ES 6新特性（Day07）

Leo·Bai發表於2020-11-07

Part1 · JavaScript【深度剖析】

ES 6新特性

檢視我整理的ES新特性思維導圖，參照思維導圖可以巨集觀角度來學習ES6的新特性。傳送門：ES新特性思維導圖，或直接儲存下圖。

在這裡插入圖片描述

文章說明：本專欄內容為本人參加【拉鉤大前端高新訓練營】的學習筆記以及思考總結，學徒之心，僅為分享。如若有誤，請在評論區支出，如果您覺得專欄內容還不錯，請點贊、關注、評論。

共同進步！

上一篇：【ECMAScript模板字串】、【ES6引數】、【展開陣列、物件】、【箭頭函式】、【物件】、【代理Proxy】、【class類】、【set、map資料結構】

接上一篇文章繼續看ES6的特性，本片主要講Symbol、for…of迴圈、可迭代介面、迭代器模式、生成器及生成器的應用、ES Modules、ES2016和2017的概述。同樣，本篇部落格內容較多，可以先Mark後看。

十六、Symbol符號

在ES6之前，物件的屬性名都是用字串表示，而這樣會導致，物件的屬性名重複造成衝突，例如屬性值覆蓋等問題。

// shared.js ====================================

const cache = {}

// a.js =========================================

cache['foo'] = Math.random()

// b.js =========================================

cache['foo'] = '123'

console.log(cache['foo'])  // 123

之前的解決方式基本為約定，例如a.js檔案中的鍵名都為a_foo,b.js檔案中的鍵名為b_foo，這樣就不會造成屬性名重複衝突的問題。而約定只是為了規避這個問題，並沒有實際解決這個問題。

ES6中為了解決這個問題，提出了一個新的資料型別**（Symbol）符號**。符號是原始值，且符號例項是唯一、不可變的。符號的用途是確保物件屬性使用唯一識別符號，不會發生屬性衝突的危險。

1.基本使用–Symbol()

const s = Symbol()
console.log(s)
console.log(typeof s)

// 兩個 Symbol 永遠不會相等

console.log(
  Symbol() === Symbol()
)  // false

呼叫 Symbol()函式時，也可以傳入一個字串引數作為對符號的描述（description），將來可以通過這個字串來除錯程式碼。但是，這個字串引數與符號定義或標識完全無關：

let genericSymbol = Symbol(); 
let otherGenericSymbol = Symbol(); 
let fooSymbol = Symbol('foo'); 
let otherFooSymbol = Symbol('foo'); 
console.log(genericSymbol == otherGenericSymbol); // false
console.log(fooSymbol == otherFooSymbol); // false

符號沒有字面量語法，這也是它們發揮作用的關鍵。按照規範，你只要建立 Symbol()例項並將其用作物件的新屬性，就可以保證它不會覆蓋已有的物件屬性，無論是符號屬性還是字串屬性。

let genericSymbol = Symbol(); 
console.log(genericSymbol); // Symbol() 
let fooSymbol = Symbol('foo'); 
console.log(fooSymbol); // Symbol(foo);

最重要的是，Symbol()函式不能與 new 關鍵字一起作為建構函式使用。這樣做是為了避免建立符號包裝物件，像使用 Boolean、String 或 Number 那樣，它們都支援建構函式且可用於初始化包含原始值的包裝物件：

let myBoolean = new Boolean(); 
console.log(typeof myBoolean); // "object" 
let myString = new String(); 
console.log(typeof myString); // "object" 
let myNumber = new Number(); 
console.log(typeof myNumber); // "object" 
let mySymbol = new Symbol(); // TypeError: Symbol is not a constructor

2.使用全域性符號登錄檔–Symbol.for()

如果執行時的不同部分需要共享和重用符號例項，那麼可以用一個字串作為鍵，在全域性符號登錄檔中建立並重用符號。也就是說可以使用一個字串引數作為Symbol的描述符，這樣在使用過程中可以重用這一定義的symbol。

let fooGlobalSymbol = Symbol.for('foo'); // 建立新符號
let otherFooGlobalSymbol = Symbol.for('foo'); // 重用已有符號
console.log(fooGlobalSymbol === otherFooGlobalSymbol); // true

Symbol.for()對每個字串鍵都執行冪等操作。第一次使用某個字串呼叫時，它會檢查全域性執行時登錄檔(也可以理解為一個對映關係表)，發現不存在對應的符號，於是就會生成一個新符號例項並新增到登錄檔中。後續使用相同字串的呼叫同樣會檢查登錄檔，發現存在與該字串對應的符號，然後就會返回該符號例項。

即使採用相同的符號描述，在全域性登錄檔中定義的符號跟使用 Symbol()定義的符號也並不等同：

let localSymbol = Symbol('foo'); 
let globalSymbol = Symbol.for('foo'); 
console.log(localSymbol === globalSymbol); // false

全域性登錄檔中的符號必須使用字串來建立，因此傳遞給Symbol的任何引數都會被轉換為字串：

const boolSymbol = Symbol.for(true);
const stringSymbol = Symbol.for('true');
console.log(boolSymbol === stringSymbol); // true

還可以使用**Symbol.keyFor()**來查詢全域性登錄檔，這個方法接收符號，返回該全域性符號對應的字串鍵。如果查詢的不是全域性符號，則返回 undefined。

// 建立全域性符號
let s = Symbol.for('foo'); 
console.log(Symbol.keyFor(s)); // foo 
// 建立普通符號
let s2 = Symbol('bar'); 
console.log(Symbol.keyFor(s2)); // undefined 
// 如果傳給 Symbol.keyFor()的不是符號，則該方法丟擲 TypeError：
Symbol.keyFor(123); // TypeError: 123 is not a symbol

3.使用符號作為屬性

**凡是可以使用字串或數值作為屬性的地方，都可以使用符號。這就包括了物件字面量屬性和Object.defineProperty()/Object.defineProperties()**定義的屬性。物件字面量只能在計算屬性語法中使用符號作為屬性。

let s1 = Symbol('foo'), 
    s2 = Symbol('bar'), 
    s3 = Symbol('baz'), 
    s4 = Symbol('qux'); 
let o = { 
 [s1]: 'foo val' 
}; 
// 這樣也可以：o[s1] = 'foo val'; 
console.log(o); 
// {Symbol(foo): foo val} 
Object.defineProperty(o, s2, {value: 'bar val'}); 
console.log(o); 
// {Symbol(foo): foo val, Symbol(bar): bar val} 
Object.defineProperties(o, { 
    [s3]: {value: 'baz val'}, 
    [s4]: {value: 'qux val'} 
}); 
console.log(o); 
// {Symbol(foo): foo val, Symbol(bar): bar val, 
// Symbol(baz): baz val, Symbol(qux): qux val}

類似於 Object.getOwnPropertyNames()返回物件例項的常規屬性陣列，Object.getOwnPropertySymbols()返回物件例項的符號屬性陣列。這兩個方法的返回值彼此互斥。Object.getOwnPropertyDescriptors()會返回同時包含常規和符號屬性描述符的物件。Reflect.ownKeys()會返回兩種型別的鍵：

let s1 = Symbol('foo'), 
	s2 = Symbol('bar'); 
let o = { 
    [s1]: 'foo val', 
    [s2]: 'bar val', 
    baz: 'baz val', 
    qux: 'qux val' 
}; 
console.log(Object.getOwnPropertySymbols(o)); 
// [Symbol(foo), Symbol(bar)] 返回物件例項的符號屬性陣列
console.log(Object.getOwnPropertyNames(o)); 
// ["baz", "qux"] 返回物件例項的常規屬性陣列
console.log(Object.getOwnPropertyDescriptors(o)); 
// {baz: {...}, qux: {...}, Symbol(foo): {...}, Symbol(bar): {...}} 返回同時包含常規和符號屬性描述符的物件
console.log(Reflect.ownKeys(o)); 
// ["baz", "qux", Symbol(foo), Symbol(bar)]返回兩種型別的鍵**

因為符號屬性是對記憶體中符號的一個引用，所以直接建立並用作屬性的符號不會丟失。但是，如果沒有顯式地儲存對這些屬性的引用，那麼必須遍歷物件的所有符號屬性才能找到相應的屬性鍵：

let o = { 
    [Symbol('foo')]: 'foo val', 
    [Symbol('bar')]: 'bar val' 
}; 
console.log(o); 
// {Symbol(foo): "foo val", Symbol(bar): "bar val"} 
let barSymbol = Object.getOwnPropertySymbols(o) 
 .find((symbol) => symbol.toString().match(/bar/)); 
console.log(barSymbol); 
// Symbol(bar)

4.常用內建符號

ECMAScript 6 也引入了一批常用內建符號（well-known symbol），用於暴露語言內部行為，開發者可以直接訪問、重寫或模擬這些行為。這些內建符號都以 Symbol 工廠函式字串屬性的形式存在。這些內建符號最重要的用途之一是重新定義它們，從而改變原生結構的行為。比如，我們知道for-of 迴圈會在相關物件上使用 Symbol.iterator 屬性，那麼就可以通過在自定義物件上重新定義Symbol.iterator 的值，來改變 for-of 在迭代該物件時的行為。

for of中的Symbol.iterator我們會在下面的一節講到

這些內建符號也沒有什麼特別之處，它們就是全域性函式 Symbol 的普通字串屬性，指向一個符號的例項。所有內建符號屬性都是不可寫、不可列舉、不可配置的。

注意 在提到 ECMAScript 規範時，經常會引用符號在規範中的名稱，字首為@@。比如，@@iterator 指的就是 Symbol.iterator。

5.Symbol方法

Symbol提供了一些方法，方法如下所示，具體使用技巧可檢視MDN或《JavaScript高階程式設計第四版》

  • Symbol.asyncIterator
  • Symbol.hasInstance
  • Symbol.isConcatSpreadable
  • Symbol.iterator
  • Symbol.match
  • Symbol.replace
  • Symbol.search
  • Symbol.species
  • Symbol.split
  • Symbol.toPrimitive
  • Symbol.toStringTag
  • Symbol.unscopables

十七、for…of迴圈

在ECMAScript中，遍歷資料有很多的方法。例如，for迴圈通常用來遍歷陣列，for…in迴圈通常用來遍歷鍵值對，函式式的遍歷方法如：forEach方法。這些方法都會有一定的侷限性。所有ES2015引入了一種全新的遍歷方式，for…of，其作為以後遍歷所有資料結構的統一方式。

for-of 語句是一種嚴格的迭代語句，用於遍歷可迭代物件的元素，語法如下:

for (property of expression) statement
// 示例
for (const el of [2,4,6,8]) { 
	document.write(el); 
}

在這個例子中，我們使用 for-of 語句顯示了一個包含 4 個元素的陣列中的所有元素。迴圈會一直持續到將所有元素都迭代完。與 for 迴圈一樣，這裡控制語句中的 const 是非必需的。但為了確保這個區域性變數不被修改，推薦使用 const。

for-of 迴圈會按照可迭代物件的 next()方法產生值的順序迭代元素。關於可迭代物件，將在下面進行詳細介紹。

如果嘗試迭代的變數不支援迭代，則 for-of 語句會丟擲錯誤。

const arr = [100, 200, 300, 400]

for (const item of arr) {
    console.log(item)
}

// for...of 迴圈可以替代 陣列物件的 forEach 方法

其可替代forEach方法進行遍歷，而且優點是可以隨時使用break方法終止迴圈：

arr.forEach(item => {
    console.log(item)
})

for (const item of arr) {
  console.log(item)
    if (item > 100) {
    break
  }

// forEach 無法跳出迴圈，必須使用 some 或者 every 方法

除了陣列可以使用for…of遍歷，一些偽陣列同樣也可以進行迴圈遍歷，例如：函式中arguments物件、DOM中元素節點列表，他們與普通陣列物件沒有任何區別，這裡就不單獨演示了。

Set和Map物件：

// 遍歷 Set 與遍歷陣列相同

const s = new Set(['foo', 'bar'])

for (const item of s) {
  console.log(item)
}
// foo
// bar

// 遍歷 Map 可以配合陣列結構語法，直接獲取鍵值

const m = new Map()
m.set('foo', '123')
m.set('bar', '345')

for (const [key, value] of m) {
    // 使用陣列展開方法
    console.log(key, value)
}

// foo 123
// bar 345

普通物件不能被for…of遍歷，至於原因，請看下面的可迭代介面，其中包含了一下Symbol.iterator：

// 普通物件不能被直接 for...of 遍歷

const obj = { foo: 123, bar: 456 }

for (const item of obj) {
  console.log(item)
}

十八、可迭代介面

ES中能夠表示有結構的資料型別越來越多，從最早的陣列和物件，到現在新增了set和map，並且還可以組合使用這些型別。為了提供一種統一的遍歷方式，ES2015提供了一種統一的Iterable介面。例如ES中任意一種資料型別都有toString方法，這就是他們都實現了統一的規格標準（統一的介面）

實現Iterable介面就是for…of的前提，只要資料結構實現了可迭代介面，他就能被for…of遍歷，也就是說之前的所有資料型別都實現了可迭代介面。

1.Iterator

在chrome瀏覽器的控制檯進行測試：

Chrome-console控制檯

console.log([]);  // 列印陣列
[]
    length: 0
    __proto__: Array(0)
        ...
        Symbol(Symbol.iterator): ƒ values()  // Symbol.iterator可迭代介面
        Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
        __proto__: Object

console.log(new Set());  // 列印Set
Set(0) {}
    [[Entries]]
    size: (...)
    __proto__: Set
        add: ƒ add()
        ...
        Symbol(Symbol.iterator): ƒ values()  // Symbol.iterator可迭代介面
        Symbol(Symbol.toStringTag): "Set"
        get size: ƒ size()
        __proto__: Object

console.log(new Map());  // 列印Map
Map(0) {}
    [[Entries]]
    size: (...)
    __proto__: Map
        clear: ƒ clear()
        ...
        Symbol(Symbol.iterator): ƒ entries()  // Symbol.iterator可迭代介面
        Symbol(Symbol.toStringTag): "Map"
        get size: ƒ size()
        __proto__: Object

繼續看看Symbol.iterator到底實現了什麼：

Chrome-console控制檯

const arr = ['foo', 'bar', 'baz']
undefined
arr[Symbol.iterator]()
Array Iterator {}
	__proto__: Array Iterator
    	next: ƒ next()
		arguments: (...)
        caller: (...)
        length: 0
        name: "next"
		...
const iterator = arr[Symbol.iterator]()
undefined
iterator.next()
{value: "foo", done: false}

value中的就是陣列中的第一個元素，done為false，當再次呼叫時，結果為相同的結構，此時的done為false。

Chrome-console控制檯

iterator.next()
{value: "bar", done: false}
iterator.next()
{value: "bar", done: true}

done屬性的作用就是表示陣列內部的屬性是否全部遍歷完成。

模擬迭代器：

// 迭代器（Iterator）

const set = new Set(['foo', 'bar', 'baz'])

const iterator = set[Symbol.iterator]()

console.log(iterator.next())  // { value: 'foo', done: false }
console.log(iterator.next())  // { value: 'bar', done: false }
console.log(iterator.next())  // { value: 'baz', done: false }
console.log(iterator.next())  // { value: undefined, done: true }
console.log(iterator.next())  // { value: undefined, done: true }

while (true) {
  const current = iterator.next()
  if (current.done) {
    break // 迭代已經結束了，沒必要繼續了
  }
  console.log(current.value)
}

2.實現iterator介面

// 實現可迭代介面（Iterable）

const obj = {
    // 實現了可迭代介面，Iterable，約定內部必須有用於範湖迭代器的iterator方法
    [Symbol.iterator]: function () {
        // 實現了迭代器介面，iterator其內部有用於迭代的next方法
        return {
            next: function () {
                // 迭代結果介面，iterationResult，約定物件內部必須要有value屬性，來表示當前被迭代到的資料，值為任意型別，done屬性用來表示迭代是否結束
                return {
                    value: 'zce',
                    done: true
                }
            }
        }
    }
}

const obj = {
    store: ['foo', 'bar', 'baz'],

    [Symbol.iterator]: function () {
        let index = 0
        const self = this

        return {
            next: function () {
                const result = {
                    value: self.store[index],
                    done: index >= self.store.length
                }
                index++
                return result
            }
        }
    }
}

3.迭代器模式

迭代器模式（特別是在 ECMAScript 這個語境下）描述了一個方案，即可以把有些結構稱為“可迭代物件”（iterable），因為它們實現了正式的 Iterable 介面，而且可以通過迭代器 Iterator 消費。

// 迭代器設計模式

// 場景：你我協同開發一個任務清單應用

// 我的程式碼 ===============================

const todos = {
  life: ['吃飯', '睡覺', '打豆豆'],
  learn: ['語文', '數學', '外語'],
  work: ['喝茶'],

  // 提供統一遍歷訪問介面
  each: function (callback) {
    const all = [].concat(this.life, this.learn, this.work)
    for (const item of all) {
      callback(item)
    }
  },

  // 提供迭代器（ES2015 統一遍歷訪問介面）
  [Symbol.iterator]: function () {
    const all = [...this.life, ...this.learn, ...this.work]
    let index = 0
    return {
      next: function () {
        return {
          value: all[index],
          done: index++ >= all.length
        }
      }
    }
  }
}

// 你的程式碼 ===============================
// 實現統一遍歷介面之前
// for (const item of todos.life) {
//   console.log(item)
// }
// for (const item of todos.learn) {
//   console.log(item)
// }
// for (const item of todos.work) {
//   console.log(item)
// }
// 實現統一遍歷介面之後
todos.each(function (item) {
  console.log(item)
})

console.log('-------------------------------')

for (const item of todos) {
  console.log(item)
}

十九、生成器及生成器的應用

生成器是 ECMAScript 6 新增的一個極為靈活的結構，擁有在一個函式塊內暫停和恢復程式碼執行的能力。這種新能力具有深遠的影響，比如，使用生成器可以自定義迭代器和實現協程。其可以避免非同步程式設計中回撥巢狀過深的問題，提供更好的額非同步程式設計解決方案。

1.基本用法

生成器的形式是一個函式，函式名稱前面加一個星號（*）表示它是一個生成器。只要是可以定義函式的地方，就可以定義生成器。

// 生成器函式宣告
function* generatorFn() {}

// 生成器函式表示式
let generatorFn = function* () {}
// 作為物件字面量方法的生成器函式
let foo = {
    * generatorFn() {}
}

// 作為類例項方法的生成器函式
class Foo {
    * generatorFn() {}
}

// 作為類靜態方法的生成器函式
class Bar {
    static* generatorFn() {}
}

呼叫生成器函式會產生一個生成器物件。生成器物件一開始處於暫停執行（suspended）的狀態。與迭代器相似，生成器物件也實現了 Iterator 介面，因此具有 next()方法。呼叫這個方法會讓生成器開始或恢復執行。

function* foo() {
  console.log('zce')
  return 100
}

const result = foo()
console.log(result)  // Object [Generator] {}
console.log(result.next())  // { value: 100, done: false }

yield 關鍵字可以讓生成器停止和開始執行，也是生成器最有用的地方。生成器函式在遇到 yield關鍵字之前會正常執行。遇到這個關鍵字後，執行會停止，函式作用域的狀態會被保留。停止執行的生成器函式只能通過在生成器物件上呼叫 next()方法來恢復執行：

function* foo() {
    console.log('1111')
    yield 100
    console.log('2222')
    yield 200
    console.log('3333')
    yield 300
}

const generator = foo()

console.log(generator.next()) // 第一次呼叫，函式體開始執行，遇到第一個 yield 暫停
console.log(generator.next()) // 第二次呼叫，從暫停位置繼續，直到遇到下一個 yield 再次暫停
console.log(generator.next()) // 。。。
console.log(generator.next()) // 第四次呼叫，已經沒有需要執行的內容了，所以直接得到 undefined

2.實際應用

在生成器物件上顯式呼叫 next()方法的用處並不大。其實，如果把生成器物件當成可迭代物件，那麼使用起來會更方便：

function* generatorFn() { 
    yield 1; 
    yield 2; 
    yield 3; 
} 
for (const x of generatorFn()) { 
    console.log(x); 
} 
// 1 
// 2 
// 3

// Generator 應用

// 案例1：發號器

function* createIdMaker() {
    let id = 1
    while (true) {
        yield id++
    }
}

const idMaker = createIdMaker()

console.log(idMaker.next().value)  // 1
console.log(idMaker.next().value)  // 2
console.log(idMaker.next().value)  // 3
console.log(idMaker.next().value)  // 4

// 案例2：使用 Generator 函式實現 iterator 方法

const todos = {
    life: ['吃飯', '睡覺', '打豆豆'],
    learn: ['語文', '數學', '外語'],
    work: ['喝茶'],
    [Symbol.iterator]: function* () {
        const all = [...this.life, ...this.learn, ...this.work]
        for (const item of all) {
            yield item
        }
    }
}

for (const item of todos) {
    console.log(item)
}

二十、ES2016和ES2017概述

1.ES2016

新增陣列例項物件的includes方法，檢查陣列中是否包含某個指定元素

const arr = ['foo', 1, NaN, false]

// 找到返回元素下標
console.log(arr.indexOf('foo'))
// 找不到返回 -1
console.log(arr.indexOf('bar'))
// 無法找到陣列中的 NaN
console.log(arr.indexOf(NaN))

includes方法
// 直接返回是否存在指定元素
console.log(arr.includes('foo'))
// 能夠查詢 NaN
console.log(arr.includes(NaN))

新增指數運算子

console.log(Math.pow(2, 10))
console.log(2 ** 10)  // 語言本身的運算子與加減乘除相同

2.ES2017

object物件的三個擴充套件方法

  • Object.values
  • Object.entries
  • Object.getOwnPropertyDescriptiors
const obj = {
    foo: 'value1',
    bar: 'value2'
}
// Object.values -------------------返回物件中所有值組成的陣列----------------------------------------
console.log(Object.values(obj))

// Object.entries ------------------以陣列的形式返回物件中所有的鍵值對----------------------------------------
console.log(Object.entries(obj))
// 可以直接使用for...of遍歷
for (const [key, value] of Object.entries(obj)) {
    console.log(key, value)
}
// 將物件轉換為Map型別的物件
console.log(new Map(Object.entries(obj)))

// Object.getOwnPropertyDescriptors ----------獲取物件中屬性的完整描述資訊------------------------------

const p1 = {
    firstName: 'Lei',
    lastName: 'Wang',
    get fullName() {
        return this.firstName + ' ' + this.lastName
    }
}
console.log(p1.fullName)

const p2 = Object.assign({}, p1)
p2.firstName = 'zce'
console.log(p2)

const descriptors = Object.getOwnPropertyDescriptors(p1)
console.log(descriptors)
const p2 = Object.defineProperties({}, descriptors)
p2.firstName = 'zce'
console.log(p2.fullName)

字串方法

  • String.prototype.padStart
  • String.prototype.padEnd
const books = {
    html: 5,
    css: 16,
    javascript: 128
}

for (const [name, count] of Object.entries(books)) {
    console.log(name, count)
}

for (const [name, count] of Object.entries(books)) {
    console.log(`${name.padEnd(16, '-')}|${count.toString().padStart(3, '0')}`)
}
//html 5
//css 16
//javascript 128
//html------------|005
//css-------------|016
//javascript------|128

今日分享截止到這裡，明天更新：TypeScript部分。

記錄：2020/11/07

相關文章