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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/206497.html

標籤：其他

上一篇：初識HTML(三)---div塊級元素以及浮動和定位(超詳細帶演示)

下一篇：前端面試題整合（JS進階篇）（二）

ES 6新特性（Day07）

Part1 · JavaScript【深度剖析】

ES 6新特性

查看我整理的ES新特性思維導圖，參照思維導圖可以宏觀角度來學習ES6的新特性，傳送門：ES新特性思維導圖，或直接保存下圖，

十六、Symbol符號

1.基本使用–Symbol()

2.使用全域符號注冊表–Symbol.for()

3.使用符號作為屬性

4.常用內置符號

5.Symbol方法

十七、for…of回圈

十八、可迭代介面

1.Iterator

2.實作iterator介面

3.迭代器模式

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

1.基本用法

2.實際應用

二十、ES2016和ES2017概述

1.ES2016

2.ES2017