ES2015/ES6常用新特性

= = 總結一下一些常用的 ES6 新特性

let和const

let可以聲明具有塊級作用域的變量，const是用來定義常量的。

for (let i=0; i<5; i++) {
    console.log('sm')
}

console.log(i) // Error: i is not defined

const fix = {}

fix.some = 'sm'
console.log(fix.some) // sm

fix = new Array(2, 3, 3) // Error: "fix" is read-only

const定義引用類型時，是指引用的地址不可變

arrow function

箭頭函數，箭頭函數可以簡化匿名函數的寫法，並且可以將this靜態綁定到對象，而不會因運行上下文的變化而變化：

function Person() {
    this.name = 'Person'

    this.hello = () => {
        console.log(this.name)
    }
}

var test = new Person

test.hello.bind({name: 'test'})()  //Person

這里在箭頭函數里，this對象已經靜態綁定到Person這個對象了，不會隨着運行上下文的改變而改變。

函數參數

默認值 Default

function plus(x, y=2333) {
    console.log(x + y)
}

plus(4333) // 6666

...形參 Rest

可以通過...形參將參數轉化為數組，跟arguments作用類似，只不過箭頭函數內部是取不到arguments的值的

function sum(...values) {
    let result = 0
    for (let val of values) {
        result += val
    }

    return result
}

console.log(sum(2, 3, 5)) //10

sum(...[2, 3, 5]) //等價於 sum.apply(undefined, [2, 3, 5]) -> 10

//所以可以直接這樣用

let arr = [45, 23, 4325]

sum(...arr) // 等價於 sum.apply(undefined, arr) -> 4393

Destructuring 解構

解構賦值，按照一定的規則從數組和對象中提取值，對變量進行賦值

let [cat, dog] = [
    {hello: 'wang'},
    {hello: 'miao'}
]

console.log(cat.hello) //wang

//在取json數據時尤為方便

let jsonData = {
    supplierId: '2333',
    name: 'ORZ',
    code: 6666
}

let {supplierId: id, name, code} = jsonData

使用BABEL編譯后變成這樣

'use strict';

var cat = { hello: 'wang' };
var dog = { hello: 'miao' };

console.log(cat.hello); //wang

var jsonData = {
    supplierId: '2333',
    name: 'ORZ',
    code: 6666
};

var id = jsonData.supplierId;
var name = jsonData.name;
var code = jsonData.code;

Template String

這個東西非常有用，在插入大段html內容到文檔中時，顯得很方便

let [cat, dog] = ['sss', 'mmm']

console.log(`My cat's name is ${cat} and my dog's name is ${dog}`)

Class

使用Class語法糖可以很方便地實現類以及繼承代碼

class Person {
    constructor(name) {
        this.name = name
    }

    hello() {
        console.log(`My name is ${this.name}`)
    }
}

class Student extends Person {

    constructor(name, studentNumber) {
        super(name)
        this.studentNumber = studentNumber
    }

    intro() {
        this.hello()
        console.log(`My student Number is ${this.studentNumber}`)
    }
}

let student = new Student('hwen', 13)

student.intro() 
//My name is hwen
//My student Number is 13

super指代父類的實例（也即是父類的this對象）。子類必須在constructor方法中調用super方法，否則新建實例時會報錯。
這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。

Modules

在ES6之前，模塊化的解決方案一般有兩種：CommonJS(服務器端)和AMD(瀏覽器端，如require.js)

ES6模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。

我的理解是，ES6的模塊化是親生的。。。所以可以做到在解析時就能確定模塊的依賴關系，而CommonJS和AMD的模塊是第三方庫，只能在運行時確定模塊的依賴關系。

需要注意的是大括號里的變量名需與模塊里export的接口名稱相同，引入其他模塊的默認值(default)可以直接寫在大括號外

//some.js
export defalut 'worker'
export function sm() {
    return 'do something'
}
export const time = 1000*60*60

//index.js
import people, { sm as something, time } from './some'

let work = something()

console.log(`${people} ${work} for ${time / (1000 * 60)} min`) 
//worker do something for 60 min

詳情-阮一峰的電子書：http://es6.ruanyifeng.com/#docs/intro