ES6 新增內容總結

1）let 與 const

ES6中新增長了兩個重要的 JavaScript 關鍵字: let 和 const

• let 聲明的變量只在 let 命令所在的代碼塊內有效
• const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變

let

1.代碼塊內有效
let 是在代碼塊內有效，var 是在全局範圍內有效

{
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1
複製代碼

2.不能重複聲明
let 只能聲明一次 var 能夠聲明屢次:

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4
複製代碼

for 循環計數器很適合用 let

3.不存在變量提高
let 不存在變量提高，var 會變量提高:

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";
複製代碼

變量 b 用 var 聲明存在變量提高，因此當腳本開始運行的時候，b 已經存在了，可是尚未賦值，因此會輸出 undefined。
變量 a 用 let 聲明不存在變量提高，在聲明變量 a 以前，a 不存在，因此會報錯。

const

const 聲明一個只讀變量，聲明以後不容許改變。意味着，一旦聲明必須初始化，不然會報錯。

基本用法:

const PI = "3.1415926";
PI  // 3.1415926

const MY_AGE;  // SyntaxError: Missing initializer in const declaration 
複製代碼

暫時性死區:

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}
複製代碼

ES6 明確規定，代碼塊內若是存在 let 或者 const，代碼塊會對這些命令聲明的變量從塊的開始就造成一個封閉做用域。代碼塊內，在聲明變量 PI 以前使用它會報錯。

注： const 如何作到變量在聲明初始化以後不容許改變的？其實 const 其實保證的不是變量的值不變，而是保證變量指向的內存地址所保存的數據不容許改動。此時，你可能已經想到，簡單類型和複合類型保存值的方式是不一樣的。是的，對於簡單類型（數值 number、字符串 string 、布爾值 boolean）,值就保存在變量指向的那個內存地址，所以 const 聲明的簡單類型變量等同於常量。而複雜類型（對象 object，數組 array，函數 function），變量指向的內存地址實際上是保存了一個指向實際數據的指針，因此 const 只能保證指針是固定的，至於指針指向的數據結構變不變就沒法控制了，因此使用 const 聲明覆雜類型對象時要慎重

---

2）解構賦值

解構賦值是對賦值運算符的擴展。
他是一種針對數組或者對象進行模式匹配，而後對其中的變量進行賦值。
在代碼書寫上簡潔且易讀，語義更加清晰明瞭；也方便了複雜對象中數據字段獲取

解構模型

在解構中，有下面兩部分參與：

解構的源，解構賦值表達式的右邊部分。

• 解構的目標，解構賦值表達式的左邊部分。

數組模型的解構（Array）

基本

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
複製代碼

可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3
複製代碼

可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3
複製代碼

不徹底解構

let [a = 1, b] = []; // a = 1, b = undefined
複製代碼

剩餘運算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
複製代碼

字符串等

在數組的解構中，解構的目標若爲可遍歷對象，皆可進行解構賦值。可遍歷對象即實現 Iterator 接口的數據

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
複製代碼

解構默認值

let [a = 2] = [undefined]; // a = 2
複製代碼

當解構模式有匹配結果，且匹配結果是 undefined 時，會觸發默認值做爲返回結果

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
複製代碼

• a 與 b 匹配結果爲 undefined ，觸發默認值：a = 3; b = a =3
• a 正常解構賦值，匹配結果：a = 1，b 匹配結果 undefined ，觸發默認值：b = a =1
• a 與 b 正常解構賦值，匹配結果：a = 1，b = 2

對象模型的解構（Object）

基本

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
複製代碼

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'
複製代碼

不徹底解構

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
複製代碼

剩餘運算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
複製代碼

解構默認值

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;
複製代碼

3）字符串

子串的識別

ES6 以前判斷字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的識別方法

• includes()：返回布爾值，判斷是否找到參數字符串。
• startsWith()：返回布爾值，判斷參數字符串是否在原字符串的頭部
• endsWith()：返回布爾值，判斷參數字符串是否在原字符串的尾部

以上三個方法均可以接受兩個參數，須要搜索的字符串，和可選的搜索起始位置索引

let string = "apple,banana,orange";
string.includes("banana");     // true
string.startsWith("apple");    // true
string.endsWith("apple");      // false
string.startsWith("banana",6)  // true
複製代碼

注：

• 這三個方法只返回布爾值，若是須要知道子串的位置，仍是得用 indexOf 和 lastIndexOf
• 這三個方法若是傳入了正則表達式而不是字符串，會拋出錯誤。而 indexOf 和 lastIndexOf 這兩個方法，它們會將正則表達式轉換爲字符串並搜索它

字符串重複

repeat():返回新的字符串，表示將字符串重複指定次數返回。
console.log("Hello,".repeat(2)); // "Hello,Hello,"

若是參數是小數，向下取整
console.log("Hello,".repeat(3.2)); // "Hello,Hello,Hello,"

若是參數是 0 至 -1 之間的小數，會進行取整運算，0 至 -1 之間的小數取整獲得 -0 ，等同於 repeat 零次
console.log("Hello,".repeat(-0.5)); // ""

若是參數是 NaN，等同於 repeat 零次
console.log("Hello,".repeat(NaN)); // ""

若是參數是負數或者 Infinity ，會報錯:

console.log("Hello,".repeat(-1));  
// RangeError: Invalid count value

console.log("Hello,".repeat(Infinity));  
// RangeError: Invalid count value
複製代碼

若是傳入的參數是字符串，則會先將字符串轉化爲數字

console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2"));  // "Hello,Hello,"
複製代碼

字符串補全

• padStart：返回新的字符串，表示用參數字符串從頭部（左側）補全原字符串
• padEnd：返回新的字符串，表示用參數字符串從尾部（右側）補全原字符串

以上兩個方法接受兩個參數，第一個參數是指定生成的字符串的最小長度，第二個參數是用來補全的字符串。若是沒有指定第二個參數，默認用空格填充。

console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // " h"
複製代碼

若是指定的長度小於或者等於原字符串的長度，則返回原字符串:
console.log("hello".padStart(5,"A")); // "hello"

若是原字符串加上補全字符串長度大於指定長度，則截去超出位數的補全字符串:
console.log("hello".padEnd(10,",world!")); // "hello,worl"

經常使用於補全位數：
console.log("123".padStart(10,"0")); // "0000000123"

模板字符串

模板字符串至關於增強版的字符串，用反引號 ,除了做爲普通字符串，還能夠用來定義多行字符串，還能夠在字符串中加入變量和表達式。

普通用法
普通字符串

let string = `Hello'\n'world`;
console.log(string); 
// "Hello' // 'world"
複製代碼

多行字符串:

let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?
複製代碼

字符串插入變量和表達式。
變量名寫在 {} 中能夠放入 JavaScript 表達式。

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.
複製代碼

字符串中調用函數：

function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!
複製代碼

注意要點
模板字符串中的換行和空格都是會被保留的

innerHtml = `<ul>
  <li>menu</li>
  <li>mine</li>
</ul>
`;
console.log(innerHtml);
// 輸出
<ul>
 <li>menu</li>
 <li>mine</li>
</ul>
複製代碼

標籤模板

標籤模板，是一個函數的調用，其中調用的參數是模板字符串

alert`Hello world!`;
// 等價於
alert('Hello world!');
複製代碼

當模板字符串中帶有變量，會將模板字符串參數處理成多個參數。

function f(stringArr,...values){
 let result = "";
 for(let i=0;i<stringArr.length;i++){
  result += stringArr[i];
  if(values[i]){
   result += values[i];
        }
    }
 return result;
}
let name = 'Mike';
let age = 27;
f`My Name is ${name},I am ${age+1} years old next year.`;
// "My Name is Mike,I am 28 years old next year."
 
f`My Name is ${name},I am ${age+1} years old next year.`;
// 等價於
f(['My Name is',',I am ',' years old next year.'],'Mike',28);
複製代碼

應用
過濾 HTML 字符串，防止用戶輸入惡意內容。

function f(stringArr,...values){
 let result = "";
 for(let i=0;i<stringArr.length;i++){
  result += stringArr[i];
   if(values[i]){
     result += String(values[i]).replace(/&/g, "&amp;")
               .replace(/</g, "&lt;")
               .replace(/>/g, "&gt;");
    }
 }
 return result;
}
name = '<Amy&MIke>';
f`<p>Hi, ${name}.I would like send you some message.</p>`;
// <p>Hi, &lt;Amy&amp;MIke&gt;.I would like send you some message.</p>
複製代碼

國際化處理（轉化多國語言）

i18n`Hello ${name}, you are visitor number ${visitorNumber}.`;  
// 你好**，你是第**位訪問者
複製代碼

4）數值

數值的表示

二進制表示法新寫法: 前綴 0b 或 0B

console.log(0b11 === 3); // true
console.log(0B11 === 3); // true
複製代碼

八進制表示法新寫法: 前綴 0o 或 0O

console.log(0o11 === 9); // true
console.log(0O11 === 9); // true
複製代碼

常量
Number.EPSILON
Number.EPSILON 屬性表示 1 與大於 1 的最小浮點數之間的差。 它的值接近於 2.2204460492503130808472633361816E-16，或者 2-52。
測試數值是否在偏差範圍內:

0.1 + 0.2 === 0.3; // false
// 在偏差範圍內即視爲相等
equal = (Math.abs(0.1 - 0.3 + 0.2) < Number.EPSILON); // true
複製代碼

屬性特徵

writable：false
enumerable：false
configurable：false
複製代碼

最大/最小安全整數
安全整數
安全整數表示在 JavaScript 中可以精確表示的整數，安全整數的範圍在 2 的 -53 次方到 2 的 53 次方之間（不包括兩個端點），超過這個範圍的整數沒法精確表示。

最大安全整數
安全整數範圍的上限，即 2 的 53 次方減 1 。

Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true
Number.MAX_SAFE_INTEGER === Number.MAX_SAFE_INTEGER + 1;     // false
Number.MAX_SAFE_INTEGER - 1 === Number.MAX_SAFE_INTEGER - 2; // false
複製代碼

最小安全整數
安全整數範圍的下限，即 2 的 53 次方減 1 的負數

Number.MIN_SAFE_INTEGER + 1 === Number.MIN_SAFE_INTEGER + 2; // false
Number.MIN_SAFE_INTEGER === Number.MIN_SAFE_INTEGER - 1;     // false
Number.MIN_SAFE_INTEGER - 1 === Number.MIN_SAFE_INTEGER - 2; // true
複製代碼

屬性特徵

writable：false
enumerable：false
configurable：false
複製代碼

方法

Number 對象新方法
Number.isFinite()

用於檢查一個數值是否爲有限的（ finite ），即不是 Infinity

console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true
 
// NaN 不是有限的
console.log( Number.isFinite(NaN)); // false
 
console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false
 
// Number.isFinate 沒有隱式的 Number() 類型轉換，全部非數值都返回 false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false
Number.isNaN()
用於檢查一個值是否爲 NaN 。
console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('true'/0)); // true
 
// 在全局的 isNaN() 中，如下皆返回 true，由於在判斷前會將非數值向數值轉換
// 而 Number.isNaN() 不存在隱式的 Number() 類型轉換，非 NaN 所有返回 false
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("true");     // false
複製代碼

從全局移植到 Number 對象的方法
逐步減小全局方法，用於全局變量的模塊化。
方法的行爲沒有發生改變
Number.parseInt()

用於將給定字符串轉化爲指定進制的整數。

// 不指定進制時默認爲 10 進制
Number.parseInt('12.34'); // 12
Number.parseInt(12.34);   // 12
 
// 指定進制
Number.parseInt('0011',2); // 3
 
// 與全局的 parseInt() 函數是同一個函數
Number.parseInt === parseInt; // true
Number.parseFloat()
用於把一個字符串解析成浮點數。
Number.parseFloat('123.45')    // 123.45
Number.parseFloat('123.45abc') // 123.45
 
// 沒法被解析成浮點數，則返回 NaN
Number.parseFloat('abc') // NaN
 
// 與全局的 parseFloat() 方法是同一個方法
Number.parseFloat === parseFloat // true
Number.isInteger()
用於判斷給定的參數是否爲整數。
Number.isInteger(value)
Number.isInteger(0); // true
// JavaScript 內部，整數和浮點數採用的是一樣的儲存方法,所以 1 與 1.0 被視爲相同的值
Number.isInteger(1);   // true
Number.isInteger(1.0); // true
 
Number.isInteger(1.1);     // false
Number.isInteger(Math.PI); // false
 
// NaN 和正負 Infinity 不是整數
Number.isInteger(NaN);       // false
Number.isInteger(Infinity);  // false
Number.isInteger(-Infinity); // false
 
Number.isInteger("10");  // false
Number.isInteger(true);  // false
Number.isInteger(false); // false
Number.isInteger([1]);   // false
 
// 數值的精度超過 53 個二進制位時，因爲第 54 位及後面的位被丟棄，會產生誤判
Number.isInteger(1.0000000000000001) // true
 
// 一個數值的絕對值小於 Number.MIN_VALUE（5E-324），即小於 JavaScript 可以分辨
// 的最小值，會被自動轉爲 0，也會產生誤判
Number.isInteger(5E-324); // false
Number.isInteger(5E-325); // true
Number.isSafeInteger()
用於判斷數值是否在安全範圍內。
Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1); // false
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false
複製代碼

Math對象的擴展

ES6 在 Math 對象上新增了 17 個數學相關的靜態方法，這些方法只能在 Math 中調用。

普通計算

Math.cbrt

用於計算一個數的立方根。

Math.cbrt(1);  // 1
Math.cbrt(0);  // 0
Math.cbrt(-1); // -1
// 會對非數值進行轉換
Math.cbrt('1'); // 1
 
// 非數值且沒法轉換爲數值時返回 NaN
Math.cbrt('hhh'); // NaN
複製代碼

Math.imul

兩個數以 32 位帶符號整數形式相乘的結果，返回的也是一個 32 位的帶符號整數。

// 大多數狀況下，結果與 a * b 相同 
Math.imul(1, 2);   // 2
 
// 用於正確返回大數乘法結果中的低位數值
Math.imul(0x7fffffff, 0x7fffffff); // 1
複製代碼

Math.hypot

用於計算全部參數的平方和的平方根。

Math.hypot(3, 4); // 5
 
// 非數值會先被轉換爲數值後進行計算
Math.hypot(1, 2, '3'); // 3.741657386773941
Math.hypot(true);      // 1
Math.hypot(false);     // 0
 
// 空值會被轉換爲 0
Math.hypot();   // 0
Math.hypot([]); // 0
 
// 參數爲 Infinity 或 -Infinity 返回 Infinity
Math.hypot(Infinity); // Infinity
Math.hypot(-Infinity); // Infinity
 
// 參數中存在沒法轉換爲數值的參數時返回 NaN
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot({});          // NaN
複製代碼

Math.clz32

用於返回數字的32 位無符號整數形式的前導0的個數。

Math.clz32(0); // 32
Math.clz32(1); // 31
Math.clz32(0b01000000000100000000000000000000); // 1
 
// 當參數爲小數時，只考慮整數部分
Math.clz32(0.5); // 32
 
// 對於空值或非數值，會轉化爲數值再進行計算
Math.clz32('1');       // 31
Math.clz32();          // 32
Math.clz32([]);        // 32
Math.clz32({});        // 32
Math.clz32(NaN);       // 32
Math.clz32(Infinity);  // 32
Math.clz32(-Infinity); // 32
Math.clz32(undefined); // 32
Math.clz32('hhh');     // 32
複製代碼

數字處理

Math.trunc

用於返回數字的整數部分。

Math.trunc(12.3); // 12
Math.trunc(12);   // 12
 
// 整數部分爲 0 時也會判斷符號
Math.trunc(-0.5); // -0
Math.trunc(0.5);  // 0
 
// Math.trunc 會將非數值轉爲數值再進行處理
Math.trunc("12.3"); // 12
 
// 空值或沒法轉化爲數值時時返回 NaN
Math.trunc();           // NaN
Math.trunc(NaN);        // NaN
Math.trunc("hhh");      // NaN
Math.trunc("123.2hhh"); // NaN
複製代碼

Math.fround

用於獲取數字的32位單精度浮點數形式。

// 對於 2 的 24 次方取負至 2 的 24 次方之間的整數（不含兩個端點），返回結果與參數自己一致
Math.fround(-(2**24)+1);  // -16777215
Math.fround(2 ** 24 - 1); // 16777215
 
// 用於將 64 位雙精度浮點數轉爲 32 位單精度浮點數
Math.fround(1.234) // 1.125
// 當小數的精度超過 24 個二進制位，會丟失精度
Math.fround(0.3); // 0.30000001192092896
// 參數爲 NaN 或 Infinity 時返回自己
Math.fround(NaN)      // NaN
Math.fround(Infinity) // Infinity
 
// 參數爲其餘非數值類型時會將參數進行轉換 
Math.fround('5');  // 5
Math.fround(true); // 1
Math.fround(null); // 0
Math.fround([]);   // 0
Math.fround({});   // NaN
複製代碼

判斷
Math.sign

判斷數字的符號（正、負、0）。

Math.sign(1);  // 1
Math.sign(-1); // -1
 
// 參數爲 0 時，不一樣符號的返回不一樣
Math.sign(0);  // 0
Math.sign(-0); // -0
 
// 判斷前會對非數值進行轉換
Math.sign('1');  // 1
Math.sign('-1'); // -1  
 
// 參數爲非數值（沒法轉換爲數值）時返回 NaN
Math.sign(NaN);   // NaN 
Math.sign('hhh'); // NaN
複製代碼

對數方法

Math.expm1()

用於計算 e 的 x 次方減 1 的結果，即 Math.exp(x) - 1 。

Math.expm1(1);  // 1.718281828459045
Math.expm1(0);  // 0
Math.expm1(-1); // -0.6321205588285577
// 會對非數值進行轉換
Math.expm1('0'); //0
 
// 參數不爲數值且沒法轉換爲數值時返回 NaN
Math.expm1(NaN); // NaN
複製代碼

Math.log1p(x)

用於計算1 + x 的天然對數，即 Math.log(1 + x)

Math.log1p(1);  // 0.6931471805599453
Math.log1p(0);  // 0
Math.log1p(-1); // -Infinity
 
// 參數小於 -1 時返回 NaN
Math.log1p(-2); // NaN
複製代碼

Math.log10(x)

用於計算以 10 爲底的 x 的對數。

Math.log10(1);   // 0
// 計算前對非數值進行轉換
Math.log10('1'); // 0
// 參數爲0時返回 -Infinity
Math.log10(0);   // -Infinity
// 參數小於0或參數不爲數值（且沒法轉換爲數值）時返回 NaN
Math.log10(-1);  // NaN
複製代碼

Math.log2()

用於計算 2 爲底的 x 的對數。

Math.log2(1);   // 0
// 計算前對非數值進行轉換
Math.log2('1'); // 0
// 參數爲0時返回 -Infinity
Math.log2(0);   // -Infinity
// 參數小於0或參數不爲數值（且沒法轉換爲數值）時返回 NaN
Math.log2(-1);  // NaN
複製代碼

雙曲函數方法

• Math.sinh(x): 用於計算雙曲正弦
• Math.cosh(x): 用於計算雙曲餘弦
• Math.tanh(x): 用於計算雙曲正切
• Math.asinh(x): 用於計算反雙曲正弦
• Math.acosh(x): 用於計算反雙曲餘弦
• Math.atanh(x): 用於計算反雙曲正切

指數運算符

1 ** 2; // 1
// 右結合，從右至左計算
2 ** 2 ** 3; // 256
// **=
let exam = 2;
exam ** = 2; // 4
複製代碼

5）對象

對象字面量

屬性的簡介表示法

ES6容許對象的屬性直接寫變量，這時候屬性名是變量名，屬性值是變量值

const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同於
const person = {age: age, name: name}
複製代碼

方法名也能夠簡寫

const person = {
  sayHi(){
    console.log("Hi");
  }
}
person.sayHi();  //"Hi"
//等同於
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
person.sayHi();//"Hi"
複製代碼

若是是Generator 函數，則要在前面加一個星號:

const obj = {
  * myGenerator() {
    yield 'hello world';
  }
};
//等同於
const obj = {
  myGenerator: function* () {
    yield 'hello world';
  }
};
複製代碼

屬性名錶達式

ES6容許用表達式做爲屬性名，可是必定要將表達式放在方括號內。

const obj = {
 ["he"+"llo"](){
   return "Hi";
  }
}
obj.hello();  //"Hi"
複製代碼

注意點：屬性的簡潔表示法和屬性名錶達式不能同時使用，不然會報錯。

const hello = "Hello";
const obj = {
 [hello]
};
obj  //SyntaxError: Unexpected token }
 
const hello = "Hello";
const obj = {
 [hello+"2"]:"world"
};
obj  //{Hello2: "world"}
複製代碼

對象的擴展運算符

拓展運算符（...）用於取出參數對象全部可遍歷屬性而後拷貝到當前對象。

基本用法

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}
複製代碼

可用於合併兩個對象

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  //{age: 15, name: "Amy"}
複製代碼

注意點
自定義的屬性和拓展運算符對象裏面屬性的相同的時候：自定義的屬性在拓展運算符後面，則拓展運算符對象內部同名的屬性將被覆蓋掉

let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone;  //{name: "Mike", age: 17}
複製代碼

自定義的屬性在拓展運算度前面，則變成設置新對象默認屬性值。

let person = {name: "Amy", age: 15};
let someone = {name: "Mike", age: 17, ...person};
someone;  //{name: "Amy", age: 15}
複製代碼

拓展運算符後面是空對象，沒有任何效果也不會報錯。

let a = {...{}, a: 1, b: 2};
a;  //{a: 1, b: 2}
複製代碼

拓展運算符後面是null或者undefined，沒有效果也不會報錯。

let b = {...null, ...undefined, a: 1, b: 2};
b;  //{a: 1, b: 2}
複製代碼

對象的新方法

Object.assign(target, source_1, ···)

用於將源對象的全部可枚舉屬性複製到目標對象中。

基本用法

let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
// 第一個參數是目標對象，後面的參數是源對象
target;  // {a: 1, b: 2, c: 3
複製代碼

• 若是目標對象和源對象有同名屬性，或者多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性
• 若是該函數只有一個參數，當參數爲對象時，直接返回該對象；當參數不是對象時，會先將參數轉爲對象而後返回

Object.assign(3);         // Number {3}
typeof Object.assign(3);  // "object"
複製代碼

由於 null 和 undefined 不能轉化爲對象，因此會報錯:

Object.assign(null);       // TypeError: Cannot convert undefined or null to object
Object.assign(undefined);  // TypeError: Cannot convert undefined or null to object
當參數不止一個時，null 和 undefined 不放第一個，即不爲目標對象時，會跳過 null 和 undefined ，不報錯
Object.assign(1,undefined);  // Number {1}
Object.assign({a: 1},null);  // {a: 1}
 
Object.assign(undefined,{a: 1});  // TypeError: Cannot convert undefined or null to object
複製代碼

注意點
assign 的屬性拷貝是淺拷貝:

let sourceObj = { a: { b: 1}};
let targetObj = {c: 3};
Object.assign(targetObj, sourceObj);
targetObj.a.b = 2;
sourceObj.a.b;  // 2
複製代碼

同名屬性替換

targetObj = { a: { b: 1, c:2}};
sourceObj = { a: { b: "hh"}};
Object.assign(targetObj, sourceObj);
targetObj;  // {a: {b: "hh"}}
複製代碼

數組的處理

Object.assign([2,3], [5]); // [5,3]

會將數組處理成對象，因此先將 [2,3] 轉爲 {0:2,1:3} ，而後再進行屬性複製，因此源對象的 0 號屬性覆蓋了目標對象的 0。

Object.is(value1, value2)

用來比較兩個值是否嚴格相等，與（===）基本相似。

基本用法

Object.is("q","q");      // true
Object.is(1,1);          // true
Object.is([1],[1]);      // false
Object.is({q:1},{q:1});  // false
複製代碼

與（===）的區別

//一是+0不等於-0
Object.is(+0,-0);  //false
+0 === -0  //true
//二是NaN等於自己
Object.is(NaN,NaN); //true
NaN === NaN  //false
複製代碼

6）數組

數組建立

Array.of()

將參數中全部值做爲元素造成數組。

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
 
// 參數值可爲不一樣類型
console.log(Array.of(1, '2', true)); // [1, '2', true]
 
// 參數爲空時返回空數組
console.log(Array.of()); // []
複製代碼

Array.from()

將類數組對象或可迭代對象轉化爲數組。

// 參數爲數組,返回與原數組同樣的數組
console.log(Array.from([1, 2])); // [1, 2]
 
// 參數含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]
複製代碼

參數

Array.from(arrayLike[, mapFn[, thisArg]])

返回值爲轉換後的數組。

• arrayLike
  想要轉換的類數組對象或可迭代對象。

console.log(Array.from([1, 2, 3])); // [1, 2, 3]

• mapFn
  可選，map 函數，用於對每一個元素進行處理，放入數組的是處理後的元素。

console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]

• thisArg
  可選，用於指定 map 函數執行時的 this 對象。

let map = {
    do: function(n) {
        return n * 2;
    }
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
    return this.do(n);
}, map)); // [2, 4, 6]
複製代碼

類數組對象

一個類數組對象必須含有 length 屬性，且元素屬性名必須是數值或者可轉換爲數值的字符。

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(); // ['1', '2', 3]
 
// 沒有 length 屬性,則返回空數組
let array = Array.from({
  0: '1',
  1: '2',
  2: 3,
});
console.log(array); // []
 
// 元素屬性名不爲數值且沒法轉換爲數值，返回長度爲 length 元素值爲 undefined 的數組  
let array1 = Array.from({
  a: 1,
  b: 2,
  length: 2
});
console.log(array1); // [undefined, undefined]
複製代碼

轉換可迭代對象

轉換map

let map = new Map();
map.set('key0', 'value0');
map.set('key1', 'value1');
console.log(Array.from(map)); // [['key0', 'value0'],['key1',
// 'value1']]
複製代碼

轉換set

let arr = [1, 2, 3];
let set = new Set(arr);
console.log(Array.from(set)); // [1, 2, 3]
複製代碼

轉換字符串

let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]
複製代碼

擴展的方法

查找

• find() 查找數組中符合條件的元素,如有多個符合條件的元素，則返回第一個元素
• findIndex() 查找數組中符合條件的元素索引，如有多個符合條件的元素，則返回第一個元素索引

填充

• fill() 將必定範圍索引的數組元素內容填充爲單個指定的值
• copyWithin() 將必定範圍索引的數組元素修改成此數組另外一指定範圍索引的元素

遍歷

• entries() 遍歷鍵值對
• keys 遍歷鍵名
• values() 遍歷鍵值

包含

• includes() 數組是否包含指定值

嵌套數組轉一維數組

• flat()

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
 
// 指定轉換的嵌套層數
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
 
// 無論嵌套多少層
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
 
// 自動跳過空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
複製代碼

• flatMap()

先對數組中每一個元素進行了的處理，再對數組執行 flat() 方法。

// 參數1：遍歷函數，該遍歷函數可接受3個參數：當前元素、當前元素索引、原數組
// 參數2：指定遍歷函數中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]
複製代碼

注：以上方法使用詳情請參考個人文章：JS數組中經常使用的方法總結

數組緩衝區

數組緩衝區是內存中的一段地址。
定型數組的基礎。
實際字節數在建立時肯定，以後只可修改其中的數據，不可修改大小。

建立數組緩衝區

經過構造函數建立

let buffer = new ArrayBuffer(10);
console.log(buffer.byteLength); // 10
分割已有數組緩衝區
let buffer = new ArrayBuffer(10);
let buffer1 = buffer.slice(1, 3);
console.log(buffer1.byteLength); // 2
複製代碼

視圖

視圖是用來操做內存的接口
視圖能夠操做數組緩衝區或緩衝區字節的子集,並按照其中一種數值數據類型來讀取和寫入數據
DataView 類型是一種通用的數組緩衝區視圖,其支持全部8種數值型數據類型

建立：

// 默認 DataView 可操做數組緩衝區所有內容
let buffer = new ArrayBuffer(10);
    dataView = new DataView(buffer); 
dataView.setInt8(0,1);
console.log(dataView.getInt8(0)); // 1
 
// 經過設定偏移量(參數2)與長度(參數3)指定 DataView 可操做的字節範圍
let buffer1 = new ArrayBuffer(10);
    dataView1 = new DataView(buffer1, 0, 3);
dataView1.setInt8(5,1); // RangeError
複製代碼

定型數組

數組緩衝區的特定類型的視圖。
能夠強制使用特定的數據類型，而不是使用通用的 DataView 對象來操做數組緩衝區

建立

經過數組緩衝區生成

let buffer = new ArrayBuffer(10),
    view = new Int8Array(buffer);
console.log(view.byteLength); // 10
複製代碼

經過構造函數

let view = new Int32Array(10);
console.log(view.byteLength); // 40
console.log(view.length);     // 10
 
// 不傳參則默認長度爲0
// 在這種狀況下數組緩衝區分配不到空間，建立的定型數組不能用來保存數據
let view1 = new Int32Array();
console.log(view1.byteLength); // 0
console.log(view1.length);     // 0
 
// 可接受參數包括定型數組、可迭代對象、數組、類數組對象
let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
let view2 = new Int16Array([1, 2]),
    view3 = new Int32Array(view2),
    view4 = new Int16Array(new Set([1, 2, 3])),
    view5 = new Int16Array([1, 2, 3]),
    view6 = new Int16Array(arr);
console.log(view2 .buffer === view3.buffer); // false
console.log(view4.byteLength); // 6
console.log(view5.byteLength); // 6
console.log(view6.byteLength); // 6
複製代碼

注意要點
length 屬性不可寫，若是嘗試修改這個值，在非嚴格模式下會直接忽略該操做，在嚴格模式下會拋出錯誤。

let view = new Int16Array([1, 2]);
view.length = 3;
console.log(view.length); // 2
複製代碼

定型數組可以使用 entries()、keys()、values()進行迭代。

let view = new Int16Array([1, 2]);
for(let [k, v] of view.entries()){
    console.log(k, v);
}
// 0 1
// 1 2
複製代碼

find() 等方法也可用於定型數組，可是定型數組中的方法會額外檢查數值類型是否安全,也會經過 Symbol.species 確認方法的返回值是定型數組而非普通數組。concat() 方法因爲兩個定型數組合並結果不肯定，故不能用於定型數組；另外，因爲定型數組的尺寸不可更改,能夠改變數組的尺寸的方法，例如 splice() ，不適用於定型數組。

let view = new Int16Array([1, 2]);
view.find((n) > 1); // 2
複製代碼

全部定型數組都含有靜態 of() 方法和 from() 方法,運行效果分別與 Array.of() 方法和 Array.from() 方法類似,區別是定型數組的方法返回定型數組,而普通數組的方法返回普通數組。

let view = Int16Array.of(1, 2);
console.log(view instanceof Int16Array); // true
複製代碼

定型數組不是普通數組，不繼承自 Array 。

let view = new Int16Array([1, 2]);
console.log(Array.isArray(view)); // false
複製代碼

定型數組中增長了 set() 與 subarray() 方法。 set() 方法用於將其餘數組複製到已有定型數組, subarray() 用於提取已有定型數組的一部分造成新的定型數組。

// set 方法
// 參數1：一個定型數組或普通數組
// 參數2：可選，偏移量，開始插入數據的位置，默認爲0
let view= new Int16Array(4);
view.set([1, 2]);
view.set([3, 4], 2);
console.log(view); // [1, 2, 3, 4]
 
// subarray 方法
// 參數1：可選，開始位置
// 參數2：可選，結束位置(不包含結束位置)
let view= new Int16Array([1, 2, 3, 4]), 
    subview1 = view.subarray(), 
    subview2 = view.subarray(1), 
    subview3 = view.subarray(1, 3);
console.log(subview1); // [1, 2, 3, 4]
console.log(subview2); // [2, 3, 4]
console.log(subview3); // [2, 3]
複製代碼

擴展運算符

複製數組

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]
 
// 數組含空位
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]
複製代碼

合併數組

console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

7）函數

函數參數的擴展

默認參數

基本用法

function fn(name,age=17){
 console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17
複製代碼

注意點：使用函數默認參數時，不容許有同名參數。

// 不報錯
function fn(name,name){
 console.log(name);
}
 
// 報錯
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
 console.log(name+","+age);
}
複製代碼

只有在未傳遞參數，或者參數爲 undefined 時，纔會使用默認參數，null 值被認爲是有效的值傳遞。

function fn(name,age=17){
    console.log(name+","+age);
}
fn("Amy",null); // Amy,null
複製代碼

函數參數默認值存在暫時性死區，在函數參數默認值表達式中，還未初始化賦值的參數值沒法做爲其餘參數的默認值

function f(x,y=x){
    console.log(x,y);
}
f(1);  // 1 1
 
function f(x=y){
    console.log(x);
}
f();  // ReferenceError: y is not defined
複製代碼

不定參數

不定參數用來表示不肯定參數個數，形如，...變量名，由...加上一個具名參數標識符組成。具名參數只能放在參數組的最後，而且有且只有一個不定參數。

基本用法

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

箭頭函數

箭頭函數提供了一種更加簡潔的函數書寫方式。基本語法是

參數 => 函數體

基本用法

var f = v => v;
//等價於
var f = function(a){
 return a;
}
f(1);  //1
複製代碼

當箭頭函數沒有參數或者有多個參數，要用 () 括起來。

var f = (a,b) => a+b;
f(6,2);  //8
複製代碼

當箭頭函數函數體有多行語句，用 {} 包裹起來，表示代碼塊，當只有一行語句，而且須要返回結果時，能夠省略 {} , 結果會自動返回。

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8
複製代碼

當箭頭函數要返回對象的時候，爲了區分於代碼塊，要用 () 將對象包裹起來

// 報錯
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
 
// 不報錯
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}
複製代碼

注意點：沒有 this、super、arguments 和 new.target 綁定。

var func = () => {
  // 箭頭函數裏面沒有 this 對象，
  // 此時的 this 是外層的 this 對象，即 Window 
  console.log(this)
}
func(55)  // Window 
 
var func = () => {    
  console.log(arguments)
}
func(55);  // ReferenceError: arguments is not defined
複製代碼

箭頭函數體中的 this 對象，是定義函數時的對象，而不是使用函數時的對象

function fn(){
  setTimeout(()=>{
    // 定義時，this 綁定的是 fn 中的 this 對象
    console.log(this.a);
  },0)
}
var a = 20;
// fn 的 this 對象爲 {a: 19}
fn.call({a: 18});  // 18
複製代碼

不能夠做爲構造函數，也就是不能使用 new 命令，不然會報錯

適合使用的場景

ES6 以前，JavaScript 的 this 對象一直很使人頭大，回調函數，常常看到 var self = this 這樣的代碼，爲了將外部 this 傳遞到回調函數中，那麼有了箭頭函數，就不須要這樣作了，直接使用 this 就行

// 回調函數
var Person = {
    'age': 18,
    'sayHello': function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 20;
Person.sayHello();  // 20
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18
複製代碼

因此，當咱們須要維護一個 this 上下文的時候，就可使用箭頭函數。

不適合使用的場景

定義函數的方法，且該方法中包含 this

var Person = {
    'age': 18,
    'sayHello': ()=>{
        console.log(this.age);
      }
};
var age = 20;
Person.sayHello();  // 20
// 此時 this 指向的是全局對象
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
        console.log(this.age);
    }
};
var age = 20;
Person1.sayHello();   // 18
// 此時的 this 指向 Person1 對象
複製代碼

須要動態this的時候

var button = document.getElementById('userClick');
button.addEventListener('click', () => {
     this.classList.toggle('on');
});
複製代碼

button 的監聽函數是箭頭函數，因此監聽函數裏面的 this 指向的是定義的時候外層的 this 對象，即 Window，致使沒法操做到被點擊的按鈕對象。

8）Symbol

ES6 引入了一種新的原始數據類型 Symbol ，表示獨一無二的值，最大的用法是用來定義對象的惟一屬性名。

ES6 數據類型除了 Number 、 String 、 Boolean 、 Objec t、 null 和 undefined ，還新增了 Symbol 。

基本用法

Symbol 函數棧不能用 new 命令，由於 Symbol 是原始數據類型，不是對象。能夠接受一個字符串做爲參數，爲新建立的 Symbol 提供描述，用來顯示在控制檯或者做爲字符串的時候使用，便於區分。

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 
// 相同參數 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false
複製代碼

使用場景

做爲屬性名

用法：
因爲每個 Symbol 的值都是不相等的，因此 Symbol 做爲對象的屬性名，能夠保證屬性不重名。

let sy = Symbol("key1");
 
// 寫法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 寫法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 寫法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}
複製代碼

Symbol 做爲對象屬性名時不能用.運算符，要用方括號。由於.運算符後面是字符串，因此取到的是字符串 sy 屬性，而不是 Symbol 值 sy 屬性。

let syObject = {};
syObject[sy] = "kk";
 
syObject[sy];  // "kk"
syObject.sy;   // undefined
複製代碼

注意點

Symbol 值做爲屬性名時，該屬性是公有屬性不是私有屬性，能夠在類的外部訪問。可是不會出如今 for...in 、 for...of 的循環中，也不會被 Object.keys() 、 Object.getOwnPropertyNames() 返回。若是要讀取到一個對象的 Symbol 屬性，能夠經過 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

let syObject = {};
syObject[sy] = "kk";
console.log(syObject);
 
for (let i in syObject) {
  console.log(i);
}    // 無輸出
 
Object.keys(syObject);                     // []
Object.getOwnPropertySymbols(syObject);    // [Symbol(key1)]
Reflect.ownKeys(syObject);                 // [Symbol(key1)]
複製代碼

定義常量

在 ES5 使用字符串表示常量。例如：

const COLOR_RED = "red";
const COLOR_YELLOW = "yellow";
const COLOR_BLUE = "blue";
複製代碼

可是用字符串不能保證常量是獨特的，這樣會引發一些問題：

const COLOR_RED = "red";
const COLOR_YELLOW = "yellow";
const COLOR_BLUE = "blue";
const MY_BLUE = "blue"；
 
function getConstantName(color) {
    switch (color) {
        case COLOR_RED :
            return "COLOR_RED";
        case COLOR_YELLOW :
            return "COLOR_YELLOW ";
        case COLOR_BLUE:
            return "COLOR_BLUE";
        case MY_BLUE:
            return "MY_BLUE";         
        default:
            throw new Exception('Can't find this color'); } } 複製代碼

可是使用 Symbol 定義常量，這樣就能夠保證這一組常量的值都不相等。用 Symbol 來修改上面的例子

const COLOR_RED = Symbol("red");
const COLOR_YELLOW = Symbol("yellow");
const COLOR_BLUE = Symbol("blue");
 
function getConstantName(color) {
    switch (color) {
        case COLOR_RED :
            return "COLOR_RED";
        case COLOR_YELLOW :
            return "COLOR_YELLOW ";
        case COLOR_BLUE:
            return "COLOR_BLUE";
        default:
            throw new Exception('Can't find this color'); } } 複製代碼

Symbol 的值是惟一的，因此不會出現相同值得常量，便可以保證 switch 按照代碼預想的方式執行

Symbol.for()

Symbol.for() 相似單例模式，首先會在全局搜索被登記的 Symbol 中是否有該字符串參數做爲名稱的 Symbol 值，若是有即返回該 Symbol 值，若沒有則新建並返回一個以該字符串參數爲名稱的 Symbol 值，並登記在全局環境中供搜索。

let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false
 
let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true
複製代碼

Symbol.keyFor()

Symbol.keyFor() 返回一個已登記的 Symbol 類型值的 key ，用來檢測該字符串參數做爲名稱的 Symbol 值是否已被登記。

let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"
複製代碼

9）Map 與 Set

Map 對象

Map 對象保存鍵值對。任何值(對象或者原始值) 均可以做爲一個鍵或一個值。

Maps 和 Objects 的區別

• 一個 Object 的鍵只能是字符串或者 Symbols，但一個 Map 的鍵能夠是任意值。
• Map 中的鍵值是有序的（FIFO 原則），而添加到對象中的鍵則不是。
• Map 的鍵值對個數能夠從 size 屬性獲取，而 Object 的鍵值對個數只能手動計算。
• Object 都有本身的原型，原型鏈上的鍵名有可能和你本身在對象上的設置的鍵名產生衝突。

Map 中的 key

key是字符串

var myMap = new Map();
var keyString = "a string"; 
 
myMap.set(keyString, "和鍵'a string'關聯的值");
 
myMap.get(keyString);    // "和鍵'a string'關聯的值"
myMap.get("a string");   // "和鍵'a string'關聯的值"
                         // 由於 keyString === 'a string'
複製代碼

key是對象

var myMap = new Map();
var keyObj = {}, 
 
myMap.set(keyObj, "和鍵 keyObj 關聯的值");

myMap.get(keyObj); // "和鍵 keyObj 關聯的值"
myMap.get({}); // undefined, 由於 keyObj !== {}
複製代碼

key是函數

var myMap = new Map();
var keyFunc = function () {}, // 函數
 
myMap.set(keyFunc, "和鍵 keyFunc 關聯的值");
 
myMap.get(keyFunc); // "和鍵 keyFunc 關聯的值"
myMap.get(function() {}) // undefined, 由於 keyFunc !== function () {}
複製代碼

key是NaN

var myMap = new Map();
myMap.set(NaN, "not a number");
 
myMap.get(NaN); // "not a number"
 
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"
複製代碼

雖然 NaN 和任何值甚至和本身都不相等(NaN !== NaN 返回true)，NaN做爲Map的鍵來講是沒有區別的。

Map的迭代

對 Map 進行遍歷，如下兩個最高級。

• for...of

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 將會顯示兩個 log。 一個是 "0 = zero" 另外一個是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
/* 這個 entries 方法返回一個新的 Iterator 對象，它按插入順序包含了 Map 對象中每一個元素的 [key, value] 數組。 */
 
// 將會顯示兩個log。 一個是 "0" 另外一個是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
/* 這個 keys 方法返回一個新的 Iterator 對象， 它按插入順序包含了 Map 對象中每一個元素的鍵。 */
 
// 將會顯示兩個log。 一個是 "zero" 另外一個是 "one"
for (var value of myMap.values()) {
  console.log(value);
}
/* 這個 values 方法返回一個新的 Iterator 對象，它按插入順序包含了 Map 對象中每一個元素的值。 */
複製代碼

• forEach()

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 將會顯示兩個 logs。 一個是 "0 = zero" 另外一個是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
複製代碼

Map 對象的操做

Map 與 Array的轉換

var kvArray = [["key1", "value1"], ["key2", "value2"]];
 
// Map 構造函數能夠將一個 二維 鍵值對數組轉換成一個 Map 對象
var myMap = new Map(kvArray);
 
// 使用 Array.from 函數能夠將一個 Map 對象轉換成一個二維鍵值對數組
var outArray = Array.from(myMap);
複製代碼

Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
 
console.log(original === clone); 
// 打印 false。 Map 對象構造函數生成實例，迭代出新的對象。
複製代碼

Map 的合併

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合併兩個 Map 對象時，若是有重複的鍵值，則後面的會覆蓋前面的，對應值即 uno，dos， three
var merged = new Map([...first, ...second]);
複製代碼

Set 對象

Set 對象容許你存儲任何類型的惟一值，不管是原始值或者是對象引用。

Set 中的特殊值

Set 對象存儲的值老是惟一的，因此須要判斷兩個值是否恆等。有幾個特殊值須要特殊對待：

• +0 與 -0 在存儲判斷惟一性的時候是恆等的，因此不重複；
• undefined 與 undefined 是恆等的，因此不重複；
• NaN 與 NaN 是不恆等的，可是在 Set 中只能存一個，不重複。

代碼：

let mySet = new Set();
 
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 這裏體現了值的惟一性
mySet.add("some text"); 
// Set(3) {1, 5, "some text"} 這裏體現了類型的多樣性
var o = {a: 1, b: 2}; 
mySet.add(o);
mySet.add({a: 1, b: 2}); 
// Set(5) {1, 5, "some text", {…}, {…}} 
// 這裏體現了對象之間引用不一樣不恆等，即便值相同，Set 也能存儲
複製代碼

類型轉換

Array

// Array 轉 Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操做符，將 Set 轉 Array
var myArray = [...mySet];
String
// String 轉 Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能將 Set 轉換成 String
複製代碼

Set 對象做用

數組去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]
複製代碼

並集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
複製代碼

交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
複製代碼

差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}
複製代碼

10）Reflect 與 Proxy

Proxy 與 Reflect 是 ES6 爲了操做對象引入的 API 。
Proxy 能夠對目標對象的讀取、函數調用等操做進行攔截，而後進行操做處理。它不直接操做對象，而是像代理模式，經過對象的代理對象進行操做，在進行這些操做時，能夠添加一些須要的額外操做
Reflect 能夠用於獲取目標對象的行爲，它與 Object 相似，可是更易讀，爲操做對象提供了一種更優雅的方式。它的方法與 Proxy 是對應的

Proxy

一個 Proxy 對象由兩個部分組成： target 、 handler 。在經過 Proxy 構造函數生成實例對象時，須要提供這兩個參數。 target 即目標對象， handler 是一個對象，聲明瞭代理 target 的指定行爲。

let target = {
    name: 'Tom',
    age: 24
}
let handler = {
    get: function(target, key) {
        console.log('getting '+key);
        return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
        console.log('setting '+key);
        target[key] = value;
    }
}
let proxy = new Proxy(target, handler)
proxy.name     // 實際執行 handler.get
proxy.age = 25 // 實際執行 handler.set
// getting name
// setting age
// 25
 
// target 能夠爲空對象
let targetEpt = {}
let proxyEpt = new Proxy(targetEpt, handler)
// 調用 get 方法，此時目標對象爲空，沒有 name 屬性
proxyEpt.name // getting name
// 調用 set 方法，向目標對象中添加了 name 屬性
proxyEpt.name = 'Tom'
// setting name
// "Tom"
// 再次調用 get ，此時已經存在 name 屬性
proxyEpt.name
// getting name
// "Tom"
 
// 經過構造函數新建實例時實際上是對目標對象進行了淺拷貝，所以目標對象與代理對象會互相
// 影響
targetEpt)
// {name: "Tom"}
 
// handler 對象也能夠爲空，至關於不設置攔截操做，直接訪問目標對象
let targetEmpty = {}
let proxyEmpty = new Proxy(targetEmpty,{})
proxyEmpty.name = "Tom"
targetEmpty) // {name: "Tom"}
複製代碼

實例方法

get(target, propKey, receiver)

用於 target 對象上 propKey 的讀取操做。

let exam ={
    name: "Tom",
    age: 24
}
let proxy = new Proxy(exam, {
  get(target, propKey, receiver) {
    console.log('Getting ' + propKey);
    return target[propKey];
  }
})
proxy.name 
// Getting name
// "Tom"
複製代碼

get() 方法能夠繼承

get(target, propKey, receiver) {
      // 實現私有屬性讀取保護
      if(propKey[0] === '_'){
          throw new Erro(`Invalid attempt to get private     "${propKey}"`);
      }
      console.log('Getting ' + propKey);
      return target[propKey];
  }
});
 
let obj = Object.create(proxy);
obj.name
// Getting name
複製代碼

set(target, propKey, value, receiver)

用於攔截 target 對象上的 propKey 的賦值操做。若是目標對象自身的某個屬性，不可寫且不可配置，那麼set方法將不起做用。

let validator = {
    set: function(obj, prop, value) {
        if (prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
                throw new RangeError('The age seems invalid');
            }
        }
        // 對於知足條件的 age 屬性以及其餘屬性，直接保存
        obj[prop] = value;
    }
};
let proxy= new Proxy({}, validator)
proxy.age = 100;
proxy.age           // 100
proxy.age = 'oppps' // 報錯
proxy.age = 300     // 報錯
複製代碼

第四個參數 receiver 表示原始操做行爲所在對象，通常是 Proxy 實例自己。

const handler = {
    set: function(obj, prop, value, receiver) {
        obj[prop] = receiver;
    }
};
const proxy = new Proxy({}, handler);
proxy.name= 'Tom';
proxy.name=== proxy // true
 
const exam = {}
Object.setPrototypeOf(exam, proxy)
exam.name = "Tom"
exam.name === exam // true
複製代碼

注意，嚴格模式下，set代理若是沒有返回true，就會報錯。

apply(target,ctx,args)

用於攔截函數的調用、call 和 reply 操做。target 表示目標對象，ctx 表示目標對象上下文，args 表示目標對象的參數數組

function sub(a, b){
    return a - b;
}
let handler = {
    apply: function(target, ctx, args){
        console.log('handle apply');
        return Reflect.apply(...arguments);
    }
}
let proxy = new Proxy(sub, handler)
proxy(2, 1) 
// handle apply
// 1
複製代碼

has(target, propKey)

用於攔截 HasProperty 操做，即在判斷 target 對象是否存在 propKey 屬性時，會被這個方法攔截。此方法不判斷一個屬性是對象自身的屬性，仍是繼承的屬性

let  handler = {
    has: function(target, propKey){
        console.log("handle has");
        return propKey in target;
    }
}
let exam = {name: "Tom"}
let proxy = new Proxy(exam, handler)
'name' in proxy
// handle has
// true
複製代碼

注意：此方法不攔截 for ... in 循環

construct(target, args)

用於攔截 new 命令。返回值必須爲對象。

let handler = {
    construct: function(target, args, newTarget){
        console.log("handle construct");
        return Reflect.construct(target, args, newTarget);
    } }
class exam = {
    constructor(name){
        this.name = name;
    }
}
let proxy = new Proxy(exam,handler)
new proxy("Tom")
// handle construct
// exam {name: "Tom"}
複製代碼

deleteProperty(target, propKey)

用於攔截 delete 操做，若是這個方法拋出錯誤或者返回 false ，propKey 屬性就沒法被 delete 命令刪除

defineProperty(target, propKey, propDesc)

用於攔截 Object.definePro若目標對象不可擴展，增長目標對象上不存在的屬性會報錯；若屬性不可寫或不可配置，則不能改變這些屬性

let handler = {
    defineProperty: function(target, propKey, propDesc){
        console.log("handle defineProperty");
        return true;
    }
}plet target = {}
let proxy = new Proxy(target, handler)
proxy.name = "Tom"
// handle defineProperty
target
// {name: "Tom"}
 
// defineProperty 返回值爲false，添加屬性操做無效
let handler1 = {
    defineProperty: function(target, propKey, propDesc){
        console.log("handle defineProperty");
        return false;
    }
}
let target1 = {}
let proxy1 = new Proxy(target1, handler1)
proxy1.name = "Jerry"
target1
// {}
複製代碼

erty操做

getOwnPropertyDescriptor(target, propKey)

用於攔截 Object.getOwnPropertyD() 返回值爲屬性描述對象或者 undefined

let handler = {
    getOwnPropertyDescriptor: function(target, propKey){
        return Object.getOwnPropertyDescriptor(target, propKey);
    }
}ilet target = {name: "Tom"}
let proxy = new Proxy(target, handler)
Object.getOwnPropertyDescriptor(proxy, 'name')
// {value: "Tom", writable: true, enumerable: true, configurable: 
// true}
複製代碼

ptor屬性

getPrototypeOf(target)

主要用於攔截獲取對象原型的操做。包括如下操做：

• -Object.prototype.proto
• -Object.prototype.isPrototypeOf()
• -Object.getPrototypeOf()
• -Reflect.getPrototypeOf()
• -instanceof

let exam = {}
let proxy = new Proxy({},{
    getPrototypeOf: function(target){
        return exam;
    }
})
Object.getPrototypeOf(proxy) // {}
複製代碼

注意，返回值必須是對象或者 null ，不然報錯。另外，若是目標對象不可擴展（non-extensible），getPrototypeOf 方法必須返回目標對象的原型對象

let proxy = new Proxy({},{
    getPrototypeOf: function(target){
        return true;
    }
})
Object.getPrototypeOf(proxy)
// TypeError: 'getPrototypeOf' on proxy: trap returned neither object // nor null
複製代碼

isExtensible(target)

用於攔截 Object.isExtensible 操做。
該方法只能返回布爾值，不然返回值會被自動轉爲布爾值

let proxy = new Proxy({},{
    isExtensible:function(target){
        return true;
    }
})
Object.isExtensible(proxy) // true
複製代碼

注意：它的返回值必須與目標對象的isExtensible屬性保持一致，不然會拋出錯誤

let proxy = new Proxy({},{
    isExtensible:function(target){
        return false;
    }
})
Object.isExtensible(proxy)
// TypeError: 'isExtensible' on proxy: trap result does not reflect 
// extensibility of proxy target (which is 'true')
複製代碼

ownKeys(target)

用於攔截對象自身屬性的讀取操做。主要包括如下操做：

• -Object.getOwnPropertyNames()
• -Object.getOwnPropertySymbols()
• -Object.keys()
• -or...in

方法返回的數組成員，只能是字符串或 Symbol 值，不然會報錯
若目標對象中含有不可配置的屬性，則必須將這些屬性在結果中返回，不然就會報錯
若目標對象不可擴展，則必須所有返回且只能返回目標對象包含的全部屬性，不能包含不存在的屬性，不然也會報錯

let proxy = new Proxy( {
  name: "Tom",
  age: 24
}, {
    ownKeys(target) {
        return ['name'];
    }
});
Object.keys(proxy)
// [ 'name' ]f返回結果中，三類屬性會被過濾：
//          - 目標對象上沒有的屬性
//          - 屬性名爲 Symbol 值的屬性
//          - 不可遍歷的屬性
 
let target = {
  name: "Tom",
  [Symbol.for('age')]: 24,
};
// 添加不可遍歷屬性 'gender'
Object.defineProperty(target, 'gender', {
  enumerable: false,
  configurable: true,
  writable: true,
  value: 'male'
});
let handler = {
    ownKeys(target) {
        return ['name', 'parent', Symbol.for('age'), 'gender'];
    }
};
let proxy = new Proxy(target, handler);
Object.keys(proxy)
// ['name']
複製代碼

preventExtensions(target)

攔截 Object.preventExtensions 操做。
該方法必須返回一個布爾值，不然會自動轉爲布爾值。

// 只有目標對象不可擴展時（即 Object.isExtensible(proxy) 爲 false ），
// proxy.preventExtensions 才能返回 true ，不然會報錯
var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    return true;
  }
});
// 因爲 proxy.preventExtensions 返回 true，此處也會返回 true，所以會報錯
Object.preventExtensions(proxy) 被// TypeError: 'preventExtensions' on proxy: trap returned truish but // the proxy target is extensible
 
// 解決方案
 var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    // 返回前先調用 Object.preventExtensions
    Object.preventExtensions(target);
    return true;
  }
});
Object.preventExtensions(proxy)
// Proxy {}
複製代碼

setPrototypeOf

主要用來攔截 Object.setPrototypeOf 方法
返回值必須爲布爾值，不然會被自動轉爲布爾值
若目標對象不可擴展，setPrototypeOf 方法不得改變目標對象的原型

let proto = {}
let proxy = new Proxy(function () {}, {
    setPrototypeOf: function(target, proto) {
        console.log("setPrototypeOf");
        return true;
    }
}
);
Object.setPrototypeOf(proxy, proto);
// setPrototypeOf
複製代碼

Proxy.revocable()

用於返回一個可取消的 Proxy 實例

let {proxy, revoke} = Proxy.revocable({}, {});
proxy.name = "Tom";
revoke();
proxy.name 
// TypeError: Cannot perform 'get' on a proxy that has been revoked
複製代碼

Reflect

ES6 中將 Object 的一些明顯屬於語言內部的方法移植到了 Reflect 對象上（當前某些方法會同時存在於 Object 和 Reflect 對象上），將來的新方法會只部署在 Reflect 對象上。
Reflect 對象對某些方法的返回結果進行了修改，使其更合理
Reflect 對象使用函數的方式實現了 Object 的命令式操做

靜態方法

Reflect.get(target, name, receiver)

查找並返回 target 對象的 name 屬性。

let exam = {
    name: "Tom",
    age: 24,
    get info(){
        return this.name + this.age;
    }
}
Reflect.get(exam, 'name'); // "Tom"
 
// 當 target 對象中存在 name 屬性的 getter 方法， getter 方法的 this 會綁定 // receiver
let receiver = {
    name: "Jerry",
    age: 20
}
Reflect.get(exam, 'info', receiver); // Jerry20
 
// 當 name 爲不存在於 target 對象的屬性時，返回 undefined
Reflect.get(exam, 'birth'); // undefined
 
// 當 target 不是對象時，會報錯
Reflect.get(1, 'name'); // TypeError
複製代碼

Reflect.set(target, name, value, receiver)

將 target 的 name 屬性設置爲 value。返回值爲 boolean ，true 表示修改爲功，false 表示失敗。當 target 爲不存在的對象時，會報錯

let exam = {
    name: "Tom",
    age: 24,
    set info(value){
        return this.age = value;
    }
}
exam.age; // 24
Reflect.set(exam, 'age', 25); // true
exam.age; // 25
 
// value 爲空時會將 name 屬性清除
Reflect.set(exam, 'age', ); // true
exam.age; // undefined
 
// 當 target 對象中存在 name 屬性 setter 方法時，setter 方法中的 this 會綁定 // receiver , 因此修改的其實是 receiver 的屬性,
let receiver = {
    age: 18
}
Reflect.set(exam, 'info', 1, receiver); // true
receiver.age; // 1
 
let receiver1 = {
    name: 'oppps'
}
Reflect.set(exam, 'info', 1, receiver1);
receiver1.age; // 1
複製代碼

Reflect.has(obj, name)

是 name in obj 指令的函數化，用於查找 name 屬性在 obj 對象中是否存在。返回值爲 boolean。若是 obj 不是對象則會報錯 TypeError。

let exam = {
    name: "Tom",
    age: 24
}
Reflect.has(exam, 'name'); // true
複製代碼

Reflect.deleteProperty(obj, property)

是 delete obj[property] 的函數化，用於刪除 obj 對象的 property 屬性，返回值爲 boolean。若是 obj 不是對象則會報錯 TypeError。

let exam = {
    name: "Tom",
    age: 24
}
Reflect.deleteProperty(exam , 'name'); // true
exam // {age: 24} 
// property 不存在時，也會返回 true
Reflect.deleteProperty(exam , 'name'); // true
複製代碼

Reflect.construct(obj, args)

等同於 new target(...args)。

function exam(name){
    this.name = name;
}
Reflect.construct(exam, ['Tom']); // exam {name: "Tom"}
複製代碼

Reflect.getPrototypeOf(obj)

用於讀取 obj 的 proto 屬性。在 obj 不是對象時不會像 Object 同樣把 obj 轉爲對象，而是會報錯。

class Exam{}
let obj = new Exam()
Reflect.getPrototypeOf(obj) === Exam.prototype // true
複製代碼

Reflect.setPrototypeOf(obj, newProto)

用於設置目標對象的 prototype。

let obj ={}
Reflect.setPrototypeOf(obj, Array.prototype); // true
複製代碼

Reflect.apply(func, thisArg, args)

等同於 Function.prototype.apply.call(func, thisArg, args) 。func 表示目標函數；thisArg 表示目標函數綁定的 this 對象；args 表示目標函數調用時傳入的參數列表，能夠是數組或相似數組的對象。若目標函數沒法調用，會拋出 TypeError 。

Reflect.apply(Math.max, Math, [1, 3, 5, 3, 1]); // 5

Reflect.defineProperty(target, propertyKey, attributes)

用於爲目標對象定義屬性。若是 target 不是對象，會拋出錯誤

let myDate= {}
Reflect.defineProperty(MyDate, 'now', {
  value: () => Date.now()
}); // true
複製代碼

Reflect.getOwnPropertyDescriptor(target, propertyKey)

用於獲得 target 對象的 propertyKey 屬性的描述對象。在 target 不是對象時，會拋出錯誤表示參數非法，不會將非對象轉換爲對象。

var exam = {}
Reflect.defineProperty(exam, 'name', {
  value: true,
  enumerable: false,
})
Reflect.getOwnPropertyDescriptor(exam, 'name')
// { configurable: false, enumerable: false, value: true, writable:
// false}
 
 
// propertyKey 屬性在 target 對象中不存在時，返回 undefined
Reflect.getOwnPropertyDescriptor(exam, 'age') // undefined
複製代碼

Reflect.isExtensible(target)

用於判斷 target 對象是否可擴展。返回值爲 boolean 。若是 target 參數不是對象，會拋出錯誤。

let exam = {}
Reflect.isExtensible(exam) // true
複製代碼

Reflect.preventExtensions(target)

用於讓 target 對象變爲不可擴展。若是 target 參數不是對象，會拋出錯誤。

let exam = {}
Reflect.preventExtensions(exam) // true
複製代碼

Reflect.ownKeys(target)

用於返回 target 對象的全部屬性，等同於 Object.getOwnPropertyNames 與Object.getOwnPropertySymbols 之和。

var exam = {
  name: 1,
  [Symbol.for('age')]: 4
}
Reflect.ownKeys(exam) // ["name", Symbol(age)]
複製代碼

組合使用

Reflect 對象的方法與 Proxy 對象的方法是一一對應的。因此 Proxy 對象的方法能夠經過調用 Reflect 對象的方法獲取默認行爲，而後進行額外操做。

let exam = {
    name: "Tom",
    age: 24
}
let handler = {
    get: function(target, key){
        console.log("getting "+key);
        return Reflect.get(target,key);
    },
    set: function(target, key, value){
        console.log("setting "+key+" to "+value)
        Reflect.set(target, key, value);
    }
}
let proxy = new Proxy(exam, handler)
proxy.name = "Jerry"
proxy.name
// setting name to Jerry
// getting name
// "Jerry"
複製代碼

使用場景擴展

實現觀察者模式

// 定義 Set 集合
const queuedObservers = new Set();
// 把觀察者函數都放入 Set 集合中
const observe = fn => queuedObservers.add(fn);
// observable 返回原始對象的代理，攔截賦值操做
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
  // 獲取對象的賦值操做
  const result = Reflect.set(target, key, value, receiver);
  // 執行全部觀察者
  queuedObservers.forEach(observer => observer());
  // 執行賦值操做
  return result;
}
複製代碼

11）迭代器

Iterator

Iterator 是 ES6 引入的一種新的遍歷機制，迭代器有兩個核心概念：

• 迭代器是一個統一的接口，它的做用是使各類數據結構可被便捷的訪問，它是經過一個鍵爲Symbol.iterator 的方法來實現
• 迭代器是用於遍歷數據結構元素的指針（如數據庫中的遊標）

迭代過程

迭代過程以下：

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

下面經過一個簡單的例子進行說明：

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator]();
 
it.next();
>{value: "zero", done: false}
it.next();
>{value: "one", done: false}
it.next();
>{value: "two", done: false}
it.next();
>{value: undefined, done: true}
複製代碼

上面的例子，首先建立一個數組，而後經過 Symbol.iterator 方法建立一個迭代器，以後不斷的調用 next 方法對數組內部項進行訪問，
當屬性 done 爲 true 時訪問結束。
迭代器是協議（使用它們的規則）的一部分，用於迭代。該協議的一個關鍵特性就是它是順序的：迭代器一次返回一個值。這意味着若是可迭代數據結構是非線性的（例如樹），迭代將會使其線性化。

可迭代的數據結構

如下是可迭代的值：

• Array
• String
• Map
• Set
• Dom元素（正在進行中）

咱們將使用 for...of 循環（參見下文的 for...of 循環）對數據結構進行迭代。

Array

數組 ( Array ) 和類型數組 ( TypedArray ) 他們是可迭代的。

for (let item of ["zero", "one", "two"]) {
  console.log(item);
}
// output:
// zero
// one
// two
複製代碼

String

字符串是可迭代的，單他們遍歷的是 Unicode 碼，每一個碼可能包含一個到兩個的 Javascript 字符。

for (const c of 'z\uD83D\uDC0A') {
    console.log(c);
}
// output:
// z
// \uD83D\uDC0A
複製代碼

Map

Map 主要是迭代它們的 entries ，每一個 entry 都會被編碼爲 [key, value] 的項， entries 是以肯定的形勢進行迭代，其順序是與添加的順序相同。

const map = new Map();
map.set(0, "zero");
map.set(1, "one");
 
for (let item of map) {
  console.log(item);
}
// output:
// [0, "zero"]
// [1, "one"]
複製代碼

注意： WeakMaps 不可迭代

Set

Set 是對其元素進行迭代，迭代的順序與其添加的順序相同

const set = new Set();
set.add("zero");
set.add("one");
 
for (let item of set) {
  console.log(item);
}
// output:
// zero
// one
複製代碼

注意： WeakSets 不可迭代

arguments

arguments 目前在 ES6 中使用愈來愈少，但也是可遍歷的

function args() {
  for (let item of arguments) {
    console.log(item);
  }
}
args("zero", "one");
// output:
// zero
// one
複製代碼

普通對象不可迭代

普通對象是由 object 建立的，不可迭代：

// TypeError
for (let item of {}) { 
  console.log(item);
}
複製代碼

for...of循環

for...of 是 ES6 新引入的循環，用於替代 for..in 和 forEach() ，而且支持新的迭代協議。它可用於迭代常規的數據類型，如 Array 、 String 、 Map 和 Set 等等。

迭代常規數據類型

Array

const nums = ["zero", "one", "two"];
 
for (let num of nums) {
  console.log(num);
}
TypedArray
const typedArray1 = new Int8Array(6);
typedArray1[0] = 10;
typedArray1[1] = 11;
 
for (let item of typedArray1) {
  console.log(item);
}
複製代碼

String

const str = "zero";
 
for (let item of str) {
  console.log(item);
}
複製代碼

Map

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
myMap.set(2, "two");
 
// 遍歷 key 和 value
for (let [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (let [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
 
// 只遍歷 key
for (let key of myMap.keys()) {
  console.log(key);
}
 
// 只遍歷 value
for (let value of myMap.values()) {
  console.log(value);
}
複製代碼

Set

let mySet = new Set();
mySet.add("zero");
mySet.add("one");
mySet.add("two");
 
// 遍歷整個 set
for (let item of mySet) {
  console.log(item);
}
 
// 只遍歷 key 值
for (let key of mySet.keys()) {
  console.log(key);
}
 
// 只遍歷 value
for (let value of mySet.values()) {
  console.log(value);
}
 
// 遍歷 key 和 value ，二者會相等
for (let [key, value] of mySet.entries()) {
  console.log(key + " = " + value);
}
複製代碼

可迭代的數據結構

of 操做數必須是可迭代，這意味着若是是普通對象則沒法進行迭代。若是數據結構相似於數組的形式，則能夠藉助 Array.from() 方法進行轉換迭代。

const arrayLink = {length: 2, 0: "zero", 1: "one"}

// 報 TypeError 異常
for (let item of arrayLink) {
  console.log(item);
}
 
// 正常運行
// output:
// zero
// one
for (let item of Array.from(arrayLink)) {
  console.log(item);
}
複製代碼

let 、const 和 var 用於 for..of

若是使用 let 和 const ，每次迭代將會建立一個新的存儲空間，這能夠保證做用域在迭代的內部。

const nums = ["zero", "one", "two"];
 
for (const num of nums) {
  console.log(num);
}
// 報 ReferenceError
console.log(num);
複製代碼

從上面的例子咱們看到，最後一句會報異常，緣由 num 的做用域只在循環體內部，外部無效，具體可查閱 let 與 const 章節。使用 var 則不會出現上述狀況，由於 var 會做用於全局，迭代將不會每次都建立一個新的存儲空間。

const nums = ["zero", "one", "two"];
 
forv (var num of nums) {
  console.log(num);
}
// output: two
console.log(num);
複製代碼

12）Class類

在ES6中，class (類)做爲對象的模板被引入，能夠經過 class 關鍵字定義類。
class 的本質是 function。
它能夠看做一個語法糖，讓對象原型的寫法更加清晰、更像面向對象編程的語法。

基礎用法

類定義

類表達式能夠爲匿名或命名。

// 匿名類
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名類
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}
複製代碼

類聲明

class Example {
    constructor(a) {
        this.a = a;
    }
}
複製代碼

注意要點：不可重複聲明。

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
複製代碼

注意要點

類定義不會被提高，這意味着，必須在訪問前對類進行定義，不然就會報錯。
類中方法不須要 function 關鍵字。
方法間不能加分號。

new Example(); 
class Example {}
複製代碼

類的主體

屬性

prototype
ES6 中，prototype 仍舊存在，雖然能夠直接自類中定義方法，可是其實方法仍是定義在 prototype 上的。 覆蓋方法 / 初始化時添加方法

Example.prototype={
    //methods
}
複製代碼

添加方法

Object.assign(Example.prototype,{
    //methods
})
複製代碼

靜態屬性

靜態屬性：class 自己的屬性，即直接定義在類內部的屬性（ Class.propname ），不須要實例化。 ES6 中規定，Class 內部只有靜態方法，沒有靜態屬性。

class Example {
// 新提案
    static a = 2;
}
// 目前可行寫法
Example.b = 2;
複製代碼

公共屬性

class Example{}
Example.prototype.a = 2;
複製代碼

實例屬性
實例屬性：定義在實例對象（ this ）上的屬性。

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}
複製代碼

name屬性
返回跟在 class 後的類名(存在時)。

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example
複製代碼

方法

constructor 方法
constructor 方法是類的默認方法，建立類的實例化對象時被調用。

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor
複製代碼

返回對象

class Test {
    constructor(){
        // 默認返回實例對象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回對象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false
複製代碼

靜態方法

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3
複製代碼

原型方法

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3
複製代碼

實例方法

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}
複製代碼

類的實例化

new

class 的實例化必須經過 new 關鍵字。

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'
複製代碼

實例化對象

共享原型對象

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
console.log(exam1._proto_ == exam2._proto_); // true
 
exam1._proto_.sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2
複製代碼

decorator

decorator 是一個函數，用來修改類的行爲，在代碼編譯時產生做用。

類修飾

一個參數
第一個參數 target，指向類自己。

function testable(target) {
    target.isTestable = true;
}
@testable
class Example {}
Example.isTestable; // true
複製代碼

多個參數——嵌套實現

function testable(isTestable) {
    return function(target) {
        target.isTestable=isTestable;
    }
}
@testable(true)
class Example {}
Example.isTestable; // true
複製代碼

實例屬性
上面兩個例子添加的是靜態屬性，若要添加實例屬性，在類的 prototype 上操做便可。

方法修飾

3個參數：target（類的原型對象）、name（修飾的屬性名）、descriptor（該屬性的描述對象）。

class Example {
    @writable
    sum(a, b) {
        return a + b;
    }
}
function writable(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor; // 必須返回
}
複製代碼

修飾器執行順序
由外向內進入，由內向外執行。

class Example {
    @logMethod(1)
    @logMthod(2)
    sum(a, b){
        return a + b;
    }
}
function logMethod(id) {
    console.log('evaluated logMethod'+id);
    return (target, name, desctiptor) => console.log('excuted logMethod '+id);
}
// evaluated logMethod 1
// evaluated logMethod 2
// excuted logMethod 2
// excuted logMethod 1
複製代碼

封裝與繼承

getter / setter

定義

class Example{
    constructor(a, b) {
        this.a = a; // 實例化時調用 set 方法
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this.a;
    }
    set a(a){
        console.log('setter');
        this.a = a; // 自身遞歸調用
    }
}
let exam = new Example(1,2); // 不斷輸出 setter ，最終致使 RangeError
class Example1{
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    get a(){
        console.log('getter');
        return this._a;
    }
    set a(a){
        console.log('setter');
        this._a = a;
    }
}
let exam1 = new Example1(1,2); // 只輸出 setter , 不會調用 getter 方法
console.log(exam._a); // 1, 能夠直接訪問
複製代碼

getter 不可單獨出現

class Example {
    constructor(a) {
        this.a = a; 
    }
    get a() {
        return this.a;
    }
}
let exam = new Example(1); // Uncaught TypeError: Cannot set property // a of #<Example> which has only a getter
複製代碼

getter 與 setter 必須同級出現

class Father {
    constructor(){}
    get a() {
        return this._a;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
    set a(a) {
        this._a = a;
    }
}
let test = new Child();
test.a = 2;
console.log(test.a); // undefined
 
class Father1 {
    constructor(){}
    // 或者都放在子類中
    get a() {
        return this._a;
    }
    set a(a) {
        this._a = a;
    }
}
class Child1 extends Father1 {
    constructor(){
        super();
    }
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); // 2
複製代碼

extends

經過 extends 實現類的繼承。

class Child extends Father { ... }

super

子類 constructor 方法中必須有 super ，且必須出如今 this 以前。

class Father {
    constructor() {}
}
class Child extends Father {
    constructor() {}
    // or 
    // constructor(a) {
        // this.a = a;
        // super();
    // }
}
let test = new Child(); // Uncaught ReferenceError: Must call super 
// constructor in derived class before accessing 'this' or returning 
// from derived constructor
複製代碼

調用父類構造函數,只能出如今子類的構造函數。

class Father {
    test(){
        return 0;
    }
    static test1(){
        return 1;
    }
}
class Child extends Father {
    constructor(){
        super();
    }
}
class Child1 extends Father {
    test2() {
        super(); // Uncaught SyntaxError: 'super' keyword unexpected     
        // here
    }
}
複製代碼

調用父類方法, super 做爲對象，在普通方法中，指向父類的原型對象，在靜態方法中，指向父類

class Child2 extends Father {
    constructor(){
        super();
        // 調用父類普通方法
        console.log(super.test()); // 0
    }
    static test3(){
        // 調用父類靜態方法
        return super.test1+2;
    }
}
Child2.test3(); // 3
複製代碼

注意要點

不可繼承常規對象。

var Father = {
    // ...
}
class Child extends Father {
     // ...
}
// Uncaught TypeError: Class extends value #<Object> is not a constructor or null
 
// 解決方案
Object.setPrototypeOf(Child.prototype, Father);
複製代碼

13）模塊

在 ES6 前， 實現模塊化使用的是 RequireJS 或者 seaJS（分別是基於 AMD 規範的模塊化庫， 和基於 CMD 規範的模塊化庫）。
ES6 引入了模塊化，其設計思想是在編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。
ES6 的模塊化分爲導出（export） @與導入（import）兩個模塊。

特色

• ES6 的模塊自動開啓嚴格模式，無論你有沒有在模塊頭部加上use strict;
• 模塊中能夠導入和導出各類類型的變量，如函數，對象，字符串，數字，布爾值，類等
• 每一個模塊都有本身的上下文，每個模塊內聲明的變量都是局部變量，不會污染全局做用域
• 每個模塊只加載一次（是單例的）， 若再去加載同目錄下同文件，直接從內存中讀取

export 與 import

基本用法

模塊導入導出各類類型的變量，如字符串，數值，函數，類。

• 導出的函數聲明與類聲明必需要有名稱（export default 命令另外考慮）。
• 不只能導出聲明還能導出引用（例如函數）。
• export 命令能夠出如今模塊的任何位置，但必需處於模塊頂層。
• 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! 複製代碼

建議使用大括號指定所要輸出的一組變量寫在文檔尾部，明確導出的接口。
函數與類都須要有對應的名稱，導出文檔尾部也避免了無對應名稱。

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
複製代碼

不一樣模塊導出接口名稱命名重複， 使用 as 從新定義變量名。

import 命令的特色

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

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

單例模式：屢次重複執行同一句 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";
複製代碼

靜態執行特性：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 命令

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

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

複合使用

注： import() 是提案，這邊暫時不延伸講解。

export 與 import 能夠在同一模塊使用，使用特色：

• 能夠將導出接口更名，包括 default。
• 複合使用 export 與 import ，也能夠導出所有，當前模塊導出的接口會覆蓋繼承導出的。

export { foo, bar } from "methods";
 
// 約等於下面兩段語句，不過上面導入導出方式該模塊沒有導入 foo 與 bar
import { foo, bar } from "methods";
export { foo, bar };
 
/* ------- 特色 1 --------*/
// 普通更名
export { foo as bar } from "methods";
// 將 foo 轉導成 default
export { foo as default } from "methods";
// 將 default 轉導成 foo
export { default as foo } from "methods";
 
/* ------- 特色 2 --------*/
export * from "methods";
複製代碼

14）Promise 對象

是異步編程的一種解決方案。
從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。

具體內容請參考個人文章-->JS中的 異步解決方案

Promise

狀態的特色

Promise 異步操做有三種狀態：pending（進行中）、fulfilled（已成功）和 rejected（已失敗）。除了異步操做的結果，任何其餘操做都沒法改變這個狀態。

Promise 對象只有：從 pending 變爲 fulfilled 和從 pending 變爲 rejected 的狀態改變。只要處於 fulfilled 和 rejected ，狀態就不會再變了即 resolved（已定型）。

const p1 = new Promise(function(resolve,reject){
    resolve('success1');
    resolve('success2');
}); 
const p2 = new Promise(function(resolve,reject){  
    resolve('success3'); 
    reject('reject');
});
p1.then(function(value){  
    console.log(value); // success1
});
p2.then(function(value){ 
    console.log(value); // success3
});
複製代碼

狀態的缺點

• 沒法取消 Promise ，一旦新建它就會當即執行，沒法中途取消。
• 若是不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。
• 當處於 pending 狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。

then 方法

then 方法接收兩個函數做爲參數，第一個參數是 Promise 執行成功時的回調，第二個參數是 Promise 執行失敗時的回調，兩個函數只會有一個被調用。

then 方法的特色
在 JavaScript 事件隊列的當前運行完成以前，回調函數永遠不會被調用。

const p = new Promise(function(resolve,reject){
  resolve('success');
});
 
p.then(function(value){
  console.log(value);
});
 
console.log('first');
// first
// success
複製代碼

經過 .then 形式添加的回調函數，不論何時，都會被調用。
經過屢次調用

.then

能夠添加多個回調函數，它們會按照插入順序而且獨立運行。

const p = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(value){ // 第一個then // 1
  console.log(value);
  return value * 2;
}).then(function(value){ // 第二個then // 2
  console.log(value);
}).then(function(value){ // 第三個then // undefined
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){ // 第四個then // resolve
  console.log(value);
  return Promise.reject('reject'); 
}).then(function(value){ // 第五個then //reject:reject
  console.log('resolve:' + value);
}, function(err) {
  console.log('reject:' + err);
});
複製代碼

then 方法將返回一個 resolved 或 rejected 狀態的 Promise 對象用於鏈式調用，且 Promise 對象的值就是這個返回值。

then 方法注意點

簡便的 Promise 鏈式編程最好保持扁平化，不要嵌套 Promise。

注意老是返回或終止 Promise 鏈。

const p1 = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(result) {
  p2(result).then(newResult => p3(newResult));
}).then(() => p4());
複製代碼

建立新 Promise 但忘記返回它時，對應鏈條被打破，致使 p4 會與 p2 和 p3 同時進行。

大多數瀏覽器中不能終止的 Promise 鏈裏的 rejection，建議後面都跟上 .catch(error => console.log(error));

15）Generator 函數

ES6 新引入了 Generator 函數，能夠經過 yield 關鍵字，把函數的執行流掛起，爲改變執行流程提供了可能，從而爲異步編程提供解決方案

Generator 函數組成

Generator 有兩個區分於普通函數的部分：

• 一是在 function 後面，函數名以前有個 * ；
• 函數內部有 yield 表達式。

其中 * 用來表示函數爲 Generator 函數，yield 用來定義函數內部的狀態。

function* func(){
 console.log("one");
 yield '1';
 console.log("two");
 yield '2'; 
 console.log("three");
 return '3';
}
複製代碼

執行機制

調用 Generator 函數和調用普通函數同樣，在函數名後面加上()便可，可是 Generator 函數不會像普通函數同樣當即執行，而是返回一個指向內部狀態對象的指針，因此要調用遍歷器對象Iterator 的 next 方法，指針就會從函數頭部或者上一次停下來的地方開始執行。

f.next();
// one
// {value: "1", done: false}
 
f.next();
// two
// {value: "2", done: false}
 
f.next();
// three
// {value: "3", done: true}
 
f.next();
// {value: undefined, done: true}
複製代碼

• 第一次調用 next 方法時，從 Generator 函數的頭部開始執行，先是打印了 one ,執行到 yield 就停下來，並將yield 後邊表達式的值 '1'，做爲返回對象的 value 屬性值，此時函數尚未執行完， 返回對象的 done 屬性值是 false。
• 第二次調用 next 方法時，同上步 。
• 第三次調用 next 方法時，先是打印了 three ，而後執行了函數的返回操做，並將 return 後面的表達式的值，做爲返回對象的 value 屬性值，此時函數已經結束，多以 done 屬性值爲true 。
• 第四次調用 next 方法時， 此時函數已經執行完了，因此返回 value 屬性值是 undefined ，done 屬性值是 true 。若是執行第三步時，沒有 return 語句的話，就直接返回 {value: undefined, done: true}。

函數返回的遍歷器對象的方法

next 方法

通常狀況下，next 方法不傳入參數的時候，yield 表達式的返回值是 undefined 。當 next 傳入參數的時候，該參數會做爲上一步yield的返回值。

function* sendParameter(){
    console.log("strat");
    var x = yield '2';
    console.log("one:" + x);
    var y = yield '3';
    console.log("two:" + y);
    console.log("total:" + (x + y));
}
複製代碼

next 不傳參

var sendp1 = sendParameter();
sendp1.next();
// strat
// {value: "2", done: false}
sendp1.next();
// one:undefined
// {value: "3", done: false}
sendp1.next();
// two:undefined
// total:NaN
// {value: undefined, done: true}
next傳參
var sendp2 = sendParameter();
sendp2.next(10);
// strat
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}
複製代碼

除了使用 next ，還可使用 for... of 循環遍歷 Generator 函數生產的 Iterator 對象。

return 方法

return 方法返回給定值，並結束遍歷 Generator 函數。

return 方法提供參數時，返回該參數；不提供參數時，返回 undefined 。

function* foo(){
    yield 1;
    yield 2;
    yield 3;
}
var f = foo();
f.next();
// {value: 1, done: false}
f.return("foo");
// {value: "foo", done: true}
f.next();
// {value: undefined, done: true}
throw 方法
throw 方法能夠再 Generator 函數體外面拋出異常，再函數體內部捕獲。
var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log('catch inner', e);
  }
};
 
var i = g();
i.next();
 
try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('catch outside', e);
}
// catch inner a
// catch outside b
複製代碼

遍歷器對象拋出了兩個錯誤，第一個被 Generator 函數內部捕獲，第二個由於函數體內部的catch 函數已經執行過了，不會再捕獲這個錯誤，因此這個錯誤就拋出 Generator 函數體，被函數體外的 catch 捕獲。

yield 表達式*

yield* 表達式表示 yield 返回一個遍歷器對象，用於在 Generator 函數內部，調用另外一個 Generator 函數。

function* callee() {
    console.log('callee: ' + (yield));
}
function* caller() {
    while (true) {
        yield* callee();
    }
}
const callerObj = caller();
callerObj.next();
// {value: undefined, done: false}
callerObj.next("a");
// callee: a
// {value: undefined, done: false}
callerObj.next("b");
// callee: b
// {value: undefined, done: false}
 
// 等同於
function* caller() {
    while (true) {
        for (var value of callee) {
          yield value;
        }
    }
}
複製代碼

使用場景

實現 Iterator

爲不具有 Iterator 接口的對象提供遍歷方法。

function* objectEntries(obj) {
    const propKeys = Reflect.ownKeys(obj);
    for (const propKey of propKeys) {
        yield [propKey, obj[propKey]];
    }
}
 
const jane = { first: 'Jane', last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
    console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe
複製代碼

Reflect.ownKeys() 返回對象全部的屬性，無論屬性是否可枚舉，包括 Symbol。
jane 原生是不具有 Iterator 接口沒法經過 for... of遍歷。這邊用了 Generator 函數加上了 Iterator 接口，因此就能夠遍歷 jane 對象了。

16）async / await

具體用法請參考個人 JS中異步解決方案

async

async 是 ES7 纔有的與異步操做有關的關鍵字，和 Promise ， Generator 有很大關聯的。

語法

async function name([param[, param[, ... param]]]) { statements }

• name: 函數名稱。
• param: 要傳遞給函數的參數的名稱。
• statements: 函數體語句。

返回值

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

async function helloAsync(){
    return "helloAsync";
  }
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})
複製代碼

async 函數中可能會有 await 表達式，async 函數執行時，若是遇到 await 就會先暫停執行 ，等到觸發的異步操做完成後，恢復 async 函數的執行並返回解析值。

await 關鍵字僅在 async function 中有效。若是在 async function 函數體外使用 await ，你只會獲得一個語法錯誤。

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}
 
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
 }
helloAsync();
// testAwait
// helloAsync
複製代碼

await

await 操做符用於等待一個 Promise 對象, 它只能在異步函數 async function 內部使用。

語法

[return_value] = await expression;

• expression: 一個 Promise 對象或者任何要等待的值。

返回值

返回 Promise 對象的處理結果。若是等待的不是 Promise 對象，則返回該值自己。
若是一個 Promise 被傳遞給一個 await 操做符，await 將等待 Promise 正常處理完成並返回其處理結果。

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world
複製代碼

正常狀況下，await 命令後面是一個 Promise 對象，它也能夠跟其餘值，如字符串，布爾值，數值以及普通函數。

function testAwait(){
   console.log("testAwait");
}
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync
複製代碼

await針對所跟不一樣表達式的處理方式：

• Promise 對象：await 會暫停執行，等待 Promise 對象 resolve，而後恢復 async 函數的執行並返回解析值。
• 非 Promise 對象：直接返回對應的值。

---

^_<