遲來的ES6,且只說精髓

bluepeach發表於2021-09-09

圖片描述

ES6_Image.png

不廢話,程式設計師時間寶貴,精髓拿去不謝

說實話,ES6(ECMAScript2015)剛出現是有點牴觸的。由於筆者對swift有了解,發現ES6 新特效和swift很像 。它包含了一些很棒的新特性,可以更加方便的實現很多複雜的操作,提高開發人員的效率。

當然你寫ES6,由於瀏覽器的限制,需要使用babel 或其他的編譯器轉換成ES5


1.Default Parameters(預設引數) in ES6 (和swift 裡面一樣的)
var cat = function (age, color, type) {  var age = age || 2;  var color = color || 'red';  var type = type || 'bosimao';  console.log(age,color,type)  //2 "red" "bosimao"}var _cat = function(age=2,color='_red',type='_bosimao'){    console.log(age,color,type)    //2 "_red" "_bosimao"}
cat()
_cat()
2.Template Literals(模板物件) in ES6(swift 字串插值)
//字串插值 , 用於字串相連var a = '代表A';var b = '代表B';var _all = '我既' + a + '也' + b;var all = `我既${a}也${b}`console.log(_all,all)//我既代表A也代表B 我既代表A也代表B
3.Destructuring Assignment (解構賦值)in ES6
let oA = {a: 1 , b:()=>{return 3},c : 12};var { a , b } = oA //a 為1 , b為函式
4.箭頭函式
//箭頭函式,綜合了插值和預設值var aFn = (a,b=8)=>{  return `function , arguments ${a},${b}`}
5. Classes (類)in ES6

class 記住 類首字母大寫的規範 個人很喜歡這個OOP程式設計風格

class Abc {  constructor(language, length) {    this.name = 'ABC';    this.language = language    this.length = length
  }

  getLanguage(){    return `${this.language}`
  }
  nameString(){    return 'abc'
  }
}var ac = new Abc('english',26);class DEF extends Abc {  //對於父類需要初始值的,繼續的子類直接不報錯,是undefined , 這個在swift 會報錯,很讚的功能
  //可以繼承且重寫 ,只不過swift 函式重寫需要寫 override 在函式前面
  getLanguage(){    return 'DEF'
  }


}var df = new DEF()//english ABCconsole.log( ac.getLanguage() , ac.name)//DEF ABC undefinedconsole.log(df.getLanguage() , df.name,df.language)
6.Module 模組化 export,import 命令

//方式1.

export var name = 'name'

//方式2.

const  name = 'name'export name

//方式3.

// people.jslet  name = (name) => {  return `name is : ${name}`}const age = "27"export {name,age}

使用的時候是import {name, age} from './people.js'

整體輸入,module指令

//people.jsexport function getName(name) {return `${name} alisa is liujunbin`}export function getAge(){return '27';
} 

import * as p from './people.js'p.getName('baron')

export default

不用關係模組輸出了什麼,透過 export default 指令就能載入到預設模組
不需要透過 花括號來指定輸出的模組,一個模組只能使用 export default 一次

//people.js
 function getAge() {} export default getAge;

// 匯入的時候不需要花括號

 import test from './people.js';

一條import 語句可以同時匯入預設方法和其它變數.

import default, { other } from 'xxx.js';
7.Promise

詳情移步至
簡書地址

github 地址

文章稿紙的地址詳見github

其他的一些特性暫時不說了,使用的不多



作者:二月長河
連結:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2558/viewspace-2811828/,如需轉載,請註明出處,否則將追究法律責任。

相關文章