ES6新特徵總結與介紹——運算符和語句

1、ES6 函數

（一）函數參數的擴展

1. 默認參數

function log(x, y = 'World') {
  console.log(x, y)
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
複製代碼

2. 剩餘參數

function f(...values){
    console.log(values.length)
}
f(1,2)    //2
f(1,2,3,4)  //4
複製代碼

（二）箭頭函數

1. 基本用法

//ES5
var f = function (a,b) {
 return a+b
}
//ES6
var f = (a,b) => {
 return a+b
}
複製代碼

2. 注意點

1. 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
2. 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
3. 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。
4. 不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

3. 不適合使用的場景

1. 定義函數的方法，且該方法中包含 this
2. 須要動態 this 的時候

2、ES6遍歷器（迭代器）

（一）Iterator

遍歷器（Iterator）是一種接口，爲各類不一樣的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口，就能夠完成遍歷操做（即依次處理該數據結構的全部成員）。

1. 遍歷過程

1. 經過 Symbol.iterator 建立一個迭代器，指向當前數據結構的起始位置
2. 隨後經過 next 方法進行向下迭代指向下一個位置， next 方法會返回當前位置的對象，對象包含了 value 和 done 兩個屬性， value 是當前屬性的值， done 用於判斷是否遍歷結束
3. 當 done 爲 true 時則遍歷結束

let arr = ['a', 'b', 'c']
let iter = arr[Symbol.iterator]()

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
複製代碼

2. 可迭代的數據結構

• Array
• Map
• Set
• String
• TypedArray
• 函數的 arguments 對象
• NodeList 對象

（二）for...of

for...of 是 ES6 新引入的循環，用於替代 for..in 和 forEach() ，而且支持新的迭代協議。它可用於迭代常規的數據類型，如數組、Set 和 Map 結構、某些相似數組的對象（好比arguments對象、DOM NodeList 對象）、Generator 對象以及字符串。

3、ES6 Class 類

（一）class類

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')'
  }
}
複製代碼

1. constructor

方法是類的默認方法，經過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，若是沒有顯式定義，一個空的constructor方法會被默認添加。

2. 類的實例

生成類的實例的寫法，與 ES5 徹底同樣，也是使用new命令。

class Point {
  // ...
}
var point = new Point(2, 3)
複製代碼

3. 取值函數（getter）和存值函數（setter）

在「類」的內部可使用get和set關鍵字，對某個屬性設置存值函數和取值函數，攔截該屬性的存取行爲。

class Point {
    constructor(x = 1) {
        this.x = x
    }
    get xx() {
        return this.x
    }
    set xx(val) {
        this.x = val
    }
}

const point = new Point()
point.xx = 99
console.log(point.x)   //99
複製代碼

4. 靜態方法

若是在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承。

class Foo {
  static classMethod() {
    return 'hello'
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo()
foo.classMethod()
// TypeError: foo.classMethod is not a function
複製代碼

父類的靜態方法，能夠被子類繼承。

class Foo {
  static classMethod() {
    return 'hello'
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'
複製代碼

5. 實例屬性的新寫法

實例屬性除了定義在constructor()方法裏面的this上面，也能夠定義在類的最頂層。

class foo {
  bar = 'hello'
  baz = 'world'

  constructor() {
    // ...
  }
}
複製代碼

（二）extends繼承

1. extends

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y) // 調用父類的constructor(x, y)
    this.color = color
  }

  toString() {
    return this.color + ' ' + super.toString() // 調用父類的toString()
  }
}
複製代碼

2. Object.getPrototypeOf()

Object.getPrototypeOf方法能夠用來從子類上獲取父類。

3. super 關鍵字

1. super做爲函數調用時，表明父類的構造函數。ES6要求，子類的構造函數必須執行一次super函數。

class A {}

class B extends A {
  constructor() {
    super()
  }
}
複製代碼

2. super做爲對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。

class A {
  p() {
    return 2
  }
}

class B extends A {
  constructor() {
    super()
    console.log(super.p()) // 2
  }
}

let b = new B()
複製代碼

3. 原生構造函數的繼承

   ECMAScript 的原生構造函數大體有下面這些：

• Boolean()
• Number()
• String()
• Array()
• Date()
• Function()
• RegExp()
• Error()
• Object()

4、ES6 模塊

（一）export 與 import

1. 基本用法

1. 導出的函數聲明與類聲明必需要有名稱（export default 命令另外考慮）。
2. 不只能導出聲明還能導出引用（例如函數）。
3. export 命令能夠出如今模塊的任何位置，但必需處於模塊頂層。
4. import 命令會提高到整個模塊的頭部，首先執行。

/*-----export [test.js]-----*/
let myName = "Tom"
let myAge = 20
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!"
}
export { myName, myAge, myfn, myClass }

/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js"
console.log(myfn())// My name is Tom! I'm 20 years old. console.log(myAge)// 20 console.log(myName)// Tom console.log(myClass.a )// yeah! 複製代碼

2. as 的用法

export 命令導出的接口名稱，須和模塊內部的變量有一一對應關係。

導入的變量名，須和導出的接口名稱相同，即順序能夠不一致。

/*-----export [test.js]-----*/
let myName = "Tom"
export { myName as exportName }
 
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js"
console.log(exportName)// Tom
使用 as 從新定義導出的接口名稱，隱藏模塊內部的變量
/*-----export [test1.js]-----*/
let myName = "Tom"
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry"
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js"
import { myName as name2 } from "./test2.js"
console.log(name1)// Tom
console.log(name2)// Jerry
複製代碼

（二）import 命令的特色

1. 只讀屬性：不容許在加載模塊的腳本里面，改寫接口的引用指向，便可以改寫 import 變量類型爲對象的屬性值，不能改寫 import 變量類型爲基本類型的值。

import {a} from "./xxx.js"
a = {}      // error
 
import {a} from "./xxx.js"
a.foo = "hello"     // a = { foo : 'hello' }
複製代碼

2. 單例模式：屢次重複執行同一句 import 語句，那麼只會執行一次，而不會執行屢次。import 同一模塊，聲明不一樣接口引用，會聲明對應變量，但只執行一次 import 。

import { a } "./xxx.js"
import { a } "./xxx.js"
// 至關於 import { a } "./xxx.js"
 
import { a } from "./xxx.js"
import { b } from "./xxx.js"
// 至關於 import { a, b } from "./xxx.js"
複製代碼

3. 靜態執行特性：import 是靜態執行，因此不能使用表達式和變量。

import { "f" + "oo" } from "methods"
// error

let module = "methods"
import { foo } from module
// error

if (true) {
  import { foo } from "method1"
} else {
  import { foo } from "method2"
}
// error
複製代碼

（三）export default 命令

1. 在一個文件或模塊中，export、import 能夠有多個，export default 僅有一個。
2. export default 中的 default 是對應的導出接口變量。
3. 經過 export 方式導出，在導入時要加{ }，export default 則不須要。
4. export default 向外暴露的成員，可使用任意變量來接收。

var a = "My name is Tom!"
export default a

export default var c = "error"
// error，default 已是對應的導出變量，不能跟着變量聲明語句
 
import b from "./xxx.js" // 不須要加{}， 使用任意變量接收
複製代碼