es6 & es7& es8語法總結

1. let const 作用域

2.變量解構賦值，ps：如果解構不成功，變量的值就等於undefined。

1）數組解構：

例：

\tlet [a, b, c] = [1, 2, 3];\t// a=1 b =2 c=3 
\tlet [foo, [[bar], baz]] = [1, [[2], 3]];
\tlet [ , , third] = ["foo", "bar", "baz"]; // third "baz"
\t解構賦值允許指定默認值,例如：let [foo = true] = []; //foo true

2）對象解構：

例：

\t\tlet { bar, foo } = { foo: "aaa", bar: "bbb" };\t\tfoo // "aaa" bar // "bbb"
\t\tlet { foo: baz } = { foo: "aaa", bar: "bbb" };\t\tbaz // "aaa" foo // error: foo is not defined

函數擴展，參數可以設置默認值

3）字符床解構

例：

 const [a, b, c, d, e] = 'hello';\t\ta // "h"\tb // "e"\tc // "l"\td // "l" \te // "o"

類似數組的對象都有一個length屬性，因此還可以對這個屬性解構：let {length : len} = 'hello';len // 5

4）數值和布爾值的解構賦值

例如：解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象

\tlet {toString: s} = 123;\t\ts === Number.prototype.toString // true

5）函數參數的解構賦值

例如：

\tlet {toString: s} = 123;\ts === Number.prototype.toString // true

3. 函數擴展：參數可設置默認值

例：

\tfunction log(x, y = 'World') {
 \t\tconsole.log(x, y);
\t}

4. 數組擴展：將一個數組轉為用逗號分隔的參數序列

例如：

 function add(x, y) {
 return x + y;
 }
const numbers = [4, 38];
add(...numbers) // 42

5. 對象的擴展：

let birth = '2000/01/01';
const Person = {
 name: '張三',
 //等同於birth: birth
 birth,
 // 等同於hello: function ()...
 hello() { console.log('我的名字是', this.name); }
};

比較兩個值是否相等：Object.is('foo', 'foo')

對象的合併：Object.assign()

例：

\t\tconst target = { a: 1 };
\t const source1 = { b: 2 };
\t const source2 = { c: 3 }; 
\t Object.assign(target, source1, source2); target // {a:1, b:2, c:3}

6. symbol

1）新的原始數據類型Symbol，表示獨一無二的值，

 // 沒有參數的情況
 let s1 = Symbol();\tlet s2 = Symbol();
 s1 === s2 // false
 // 有參數的情況
 let s1 = Symbol('foo');\tlet s2 = Symbol('foo');
 s1 === s2 // false

2）作為屬性名可以保證不會與其他屬性名產生衝突

 let mySymbol = Symbol();
 let a = {};
 // 第一種寫法
 a[mySymbol] = 'Hello!';

7. set和map的數據結構

1）set本身是一個構造函數，類似於數組，但是成員的值都是唯一的，沒有重複的值

操作方法：

\tlet set = new Set();\t//參數可放數組或者類似數組的對象
\tset.add(2);\t\t添加某個值，返回 Set 結構本身。
 s.delete(2);\t\t刪除某個值，返回一個布爾值，表示刪除是否成功。 

 s.has(2) \t\t\t回一個布爾值，表示該值是否為Set的成員。
 set.clear();\t\t清除所有成員，沒有返回值。

可用於數組去重：

 function dedupe(array) {
 \treturn Array.from(new Set(array));\t//Array.from方法可以將 Set 結構轉為數組
 }
 dedupe([1, 1, 2, 3]) // [1, 2, 3]

2)Map 類似於對象

8. proxy用於修改某些操作的默認行為，等同於在語言層面做出修改

例如：

 var person = { name: "張三"};
 var proxy = new Proxy(person, {
 get: function(target, property) {
 if (property in target) {
 return target[property];
 } else {
 throw new ReferenceError("Property \\"" + property + "\\" does not exist.");
 }
 }
 });
 proxy.name // "張三"
 proxy.age // 拋出一個錯誤

9 .reflect與Proxy對象一樣，也是 ES6 為了操作對象而提供的新 API;

1) 將Object對象的一些明顯屬於語言內部的方法（比如Object.defineProperty），放到Reflect對象上

2) 修改某些Object方法的返回結果，讓其變得更合理。

10.promise是異步編程的一種解決方案，相當於一個容器，裡面保存著某個未來才會結束的事件（通常是一個異步操作）的結果

有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。

此外，Promise對象提供統一的接口，使得控制異步操作更加容易

特點：1）對象的狀態不受外界影響 ；2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。

例如：

 const promise = new Promise(function(resolve, reject) {
 // ... some code
 if (/* 異步操作成功 */){
 resolve(value);\t\t//將Promise對象的狀態從“未完成”變為“成功”
 } else {
 reject(error);\t\t//將Promise對象的狀態從“未完成”變為“失敗”
 }
 });

Promise實例生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回調函數

 promise.then(function(value) { 

 // success
 }, function(error) {
 // failure
 });

\t1）. Promise.prototype.then(fn1,fn2)\t\t//第一個參數是resolved狀態的回調函數，第二個參數（可選）是rejected狀態的回調函數
\t2). Promise.prototype.catch()\t\t\t//用於指定發生錯誤時的回調函數。
\t3).Promise.prototype.finally()\t\t\t//用於指定不管 Promise 對象最後狀態如何，都會執行的操作
\t4）Promise.all() \t\t\t\t\t\t//用於將多個 Promise 實例包裝成一個新的 Promise 實例。
\t5).Promise.race\t\t\t\t\t\t//方法同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。
\t6).Promise.resolve\t\t\t\t\t//將現有對象轉為 Promise 對象

11. Generator 函數管理流程，其實提供了一種可以暫停執行的函數

特徵：1）function關鍵字與函數名之間有一個星號；

2）函數體內部使用yield表達式，定義不同的內部狀態（yield在英語裡的意思就是“產出”）。

執行 Generator 函數會返回一個遍歷器對象

例如：

 function* helloWorldGenerator() {
 yield 'hello';
 yield 'world';
 return 'ending';
 }
 var hw = helloWorldGenerator(); 

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

12. async函數返回一個 Promise 對象，可以使用then方法添加回調函數

async表示函數里有異步操作，await表示緊跟在後面的表達式需要等待結果。

async函數返回一個 Promise 對象，可以使用then方法添加回調函數。當函數執行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執行函數體內後面的語句。

改造Generator 函數，和普通函數一樣調用後自動往下執行

例如：

 function timeout(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 \tconosle.log(1111)
 });
 }
 async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
 }
 asyncPrint('hello world', 50); \t // 1111 'hello world'

13. get/set訪問器：

作用：1. 限制一個變量是否可以被訪問或是否可以被重寫 2. 在訪問或重寫時可以執行其他語句進行處理

es7

1、求冪運算

\t\t3 ** 2 // 9

2、Array.prototype.includes() 查找一個值在不在數組裡，若在，則返回true，反之返回false

\t['a', 'b', 'c'].includes('a') // true
\t['a', 'b', 'c'].includes('d') // false

接收兩個參數：要搜索的值和搜索的開始索引。當第二個參數被傳入時，該方法會從索引處開始往後搜索（默認索引值為0）。若搜索值在數組中存在則返回true，否則返回false

\t['a', 'b', 'c', 'd'].includes('b') // true
 ['a', 'b', 'c', 'd'].includes('b', 1) // true
 ['a', 'b', 'c', 'd'].includes('b', 2) // false

ps: ['a', 'b', 'c'].indexOf('a') > -1 也可以用來判斷數組中是否含有某項，

區別在於：1、includes更簡便

2、includes更精確，includes()方法中，兩個NaN被認為是相等的，即使在NaN === NaN，和indexOf()的行為不同，indexOf()嚴格使用===判斷

\tlet demo = [1, NaN, 2, 3]
\tdemo.indexOf(NaN) //-1
\tdemo.includes(NaN) //true 

es8

1、異步函數(Async functions)

目標：實現現JavaScript語言的異步編程，避免“回調函數地獄”，解決Promise鏈式調用造成的代碼冗餘

實現：

引入了另外一種異步編程的機制：Generator（帶星號），Generator 函數是分段執行的，yield表達式是暫停執行的標記，而next方法可以恢復執行

 function* helloWorldGenerator() {
 yield 'hello';
 yield 'world';
 return 'ending';
 }
 var hw = helloWorldGenerator();
 \thw.next() // { value: 'hello', done: false }
 hw.next() // { value: 'world', done: false }
 \tES8引入了async函數，自動執行Generator函數的方法
 \tasync function asyncFunc(params) {
 \tconst result1 = await this.login()
 \tconst result2 = await this.getInfo()
 \t}

2、Object.entries()和Object.values()

\tObject.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
 Object.entries([1, 2]) //[['0', 1], ['1', 2]] 

\tObject.values({ one: 1, two: 2 }) //[1, 2]
 Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']