1 屬性的簡潔表示法

ES6 允許直接寫入變量和函數，作為對象的屬性和方法。這樣的書寫更加簡潔。

var foo = 'bar'; var baz = {foo}; baz // {foo: "bar"} // 等同于 var baz = {foo: foo};

2 屬性名表達式

JavaScript語言定義對象的屬性，有兩種方法。

// 方法一 obj.foo = true; // 方法二 obj['a' + 'bc'] = 123;

3 Object.assign

Object.assign方法用于對象的合并，將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。
var target = { a: 1 }; var source1 = { b: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3}
方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源對象某個屬性的值是對象，那么目標對象拷貝得到的是這個對象的引用。

也就是說，如果源對象某個屬性的值是對象，那么目標對象拷貝得到的是這個對象的引用。

4 屬性的可枚舉性

6 對象的擴展運算符

（1）解構賦值

對象的解構賦值用于從一個對象取值，相當于將所有可遍歷的、但尚未被讀取的屬性，分配到指定的對象上面。所有的鍵和它們的值，都會拷貝到新對象上面。

（2）擴展運算符

擴展運算符（...）用于取出參數對象的所有可遍歷屬性，拷貝到當前對象之中。

?

Set

ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。

Set 本身是一個構造函數，用來生成 Set 數據結構。

const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4

遍歷操作

Set 結構的實例有四個遍歷方法，可以用于遍歷成員。

• keys()：返回鍵名的遍歷器
• values()：返回鍵值的遍歷器
• entries()：返回鍵值對的遍歷器
• forEach()：使用回調函數遍歷每個成員

Map

含義和基本用法

JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。

為了解決這個問題，ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。

?

Proxy概述

Proxy 用于修改某些操作的默認行為，等同于在語言層面做出修改，所以屬于一種“元編程”（meta programming），即對編程語言進行編程。

Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。Proxy 這個詞的原意是代理，用在這里表示由它來“代理”某些操作，可以譯為“代理器”。

var obj = new Proxy({}, { get: function (target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, receiver); } });

上面代碼對一個空對象架設了一層攔截，重定義了屬性的讀取（get）和設置（set）行為。這里暫時先不解釋具體的語法，只看運行結果。對設置了攔截行為的對象obj，去讀寫它的屬性，就會得到下面的結果。

obj.count = 1 // setting count! ++obj.count // getting count! // setting count! // 2

Promise 的含義

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6將其寫進了語言標準，統一了用法，原生提供了Promise對象。

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。

Promise對象有以下兩個特點。

（1）對象的狀態不受外界影響。Promise對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。

（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從Pending變為Resolved和從Pending變為Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。如果改變已經發生了，你再對Promise對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。

有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操作更加容易。

Promise也有一些缺點。首先，無法取消Promise，一旦新建它就會立即執行，無法中途取消。其次，如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。第三，當處于Pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

如果某些事件不斷地反復發生，一般來說，使用 stream 模式是比部署Promise更好的選擇。

?

Iterator（遍歷器）的概念

JavaScript原有的表示“集合”的數據結構，主要是數組（Array）和對象（Object），ES6又添加了Map和Set。這樣就有了四種數據集合，用戶還可以組合使用它們，定義自己的數據結構，比如數組的成員是Map，Map的成員是對象。這樣就需要一種統一的接口機制，來處理所有不同的數據結構。

遍歷器（Iterator）就是這樣一種機制。它是一種接口，為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口，就可以完成遍歷操作（即依次處理該數據結構的所有成員）。

Iterator的作用有三個：一是為各種數據結構，提供一個統一的、簡便的訪問接口；二是使得數據結構的成員能夠按某種次序排列；三是ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要供for...of消費。

Iterator的遍歷過程是這樣的。

（1）創建一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。

（2）第一次調用指針對象的next方法，可以將指針指向數據結構的第一個成員。

（3）第二次調用指針對象的next方法，指針就指向數據結構的第二個成員。

（4）不斷調用指針對象的next方法，直到它指向數據結構的結束位置。

每一次調用next方法，都會返回數據結構的當前成員的信息。具體來說，就是返回一個包含value和done兩個屬性的對象。其中，value屬性是當前成員的值，done屬性是一個布爾值，表示遍歷是否結束。

下面是一個模擬next方法返回值的例子。

var it = makeIterator(['a', 'b']); it.next() // { value: "a", done: false } it.next() // { value: "b", done: false } it.next() // { value: undefined, done: true } function makeIterator(array) { var nextIndex = 0; return { next: function() { return nextIndex < array.length ? {value: array[nextIndex++], done: false} : {value: undefined, done: true}; } }; }

基本概念

Generator 函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同。本章詳細介紹 Generator 函數的語法和 API，它的異步編程應用請看《Generator 函數的異步應用》一章。

Generator 函數有多種理解角度。從語法上，首先可以把它理解成，Generator 函數是一個狀態機，封裝了多個內部狀態。

執行 Generator 函數會返回一個遍歷器對象，也就是說，Generator 函數除了狀態機，還是一個遍歷器對象生成函數。返回的遍歷器對象，可以依次遍歷 Generator 函數內部的每一個狀態。

形式上，Generator 函數是一個普通函數，但是有兩個特征。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield表達式，定義不同的內部狀態（yield在英語里的意思就是“產出”）。

function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();
上面代碼定義了一個 Generator 函數helloWorldGenerator，它內部有兩個yield表達式（hello和world），即該函數有三個狀態：hello，world 和 return 語句（結束執行）。

然后，Generator 函數的調用方法與普通函數一樣，也是在函數名后面加上一對圓括號。不同的是，調用 Generator 函數后，該函數并不執行，返回的也不是函數運行結果，而是一個指向內部狀態的指針對象，也就是上一章介紹的遍歷器對象（Iterator Object）。

下一步，必須調用遍歷器對象的next方法，使得指針移向下一個狀態。也就是說，每次調用next方法，內部指針就從函數頭部或上一次停下來的地方開始執行，直到遇到下一個yield表達式（或return語句）為止。換言之，Generator 函數是分段執行的，yield表達式是暫停執行的標記，而next方法可以恢復執行。

hw.next() // { value: 'hello', done: false } hw.next() // { value: 'world', done: false } hw.next() // { value: 'ending', done: true } hw.next() // { value: undefined, done: true }

上面代碼一共調用了四次next方法。

第一次調用，Generator 函數開始執行，直到遇到第一個yield表達式為止。next方法返回一個對象，它的value屬性就是當前yield表達式的值hello，done屬性的值false，表示遍歷還沒有結束。

第二次調用，Generator 函數從上次yield表達式停下的地方，一直執行到下一個yield表達式。next方法返回的對象的value屬性就是當前yield表達式的值world，done屬性的值false，表示遍歷還沒有結束。

第三次調用，Generator 函數從上次yield表達式停下的地方，一直執行到return語句（如果沒有return語句，就執行到函數結束）。next方法返回的對象的value屬性，就是緊跟在return語句后面的表達式的值（如果沒有return語句，則value屬性的值為undefined），done屬性的值true，表示遍歷已經結束。

第四次調用，此時 Generator 函數已經運行完畢，next方法返回對象的value屬性為undefined，done屬性為true。以后再調用next方法，返回的都是這個值。

總結一下，調用 Generator 函數，返回一個遍歷器對象，代表 Generator 函數的內部指針。以后，每次調用遍歷器對象的next方法，就會返回一個有著value和done兩個屬性的對象。value屬性表示當前的內部狀態的值，是yield表達式后面那個表達式的值；done屬性是一個布爾值，表示是否遍歷結束。

yield 表達式

由于 Generator 函數返回的遍歷器對象，只有調用next方法才會遍歷下一個內部狀態，所以其實提供了一種可以暫停執行的函數。yield表達式就是暫停標志。

遍歷器對象的next方法的運行邏輯如下。

（1）遇到yield表達式，就暫停執行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的value屬性值。

（2）下一次調用next方法時，再繼續往下執行，直到遇到下一個yield表達式。

（3）如果沒有再遇到新的yield表達式，就一直運行到函數結束，直到return語句為止，并將return語句后面的表達式的值，作為返回的對象的value屬性值。

（4）如果該函數沒有return語句，則返回的對象的value屬性值為undefined。

需要注意的是，yield表達式后面的表達式，只有當調用next方法、內部指針指向該語句時才會執行，因此等于為 JavaScript 提供了手動的“惰性求值”（Lazy Evaluation）的語法功能。

Generator 函數的異步應用

傳統方法

ES6 誕生以前，異步編程的方法，大概有下面四種。

• 回調函數
• 事件監聽
• 發布/訂閱
• Promise 對象

• 異步

  所謂"異步"，簡單說就是一個任務不是連續完成的，可以理解成該任務被人為分成兩段，先執行第一段，然后轉而執行其他任務，等做好了準備，再回過頭執行第二段。

Generator 函數將 JavaScript 異步編程帶入了一個全新的階段。

Generator 函數

協程

傳統的編程語言，早有異步編程的解決方案（其實是多任務的解決方案）。其中有一種叫做"協程"（coroutine），意思是多個線程互相協作，完成異步任務。

協程有點像函數，又有點像線程。它的運行流程大致如下。

• 第一步，協程A開始執行。
• 第二步，協程A執行到一半，進入暫停，執行權轉移到協程B。
• 第三步，（一段時間后）協程B交還執行權。
• 第四步，協程A恢復執行。

?

轉載于:https://www.cnblogs.com/wlinglinux/p/6863844.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的teach-es6-2(class)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。