es6比es5新增了什么

新增內(nèi)容：1、let、const關(guān)鍵字，用于聲明變量，支持塊級(jí)作用域，擁有暫時(shí)性死區(qū)；2、解構(gòu)賦值，是針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配，然后對(duì)其中的變量進(jìn)行賦值的意思；3、展開(kāi)運(yùn)算符，可用于將集合和數(shù)組中的元素?cái)U(kuò)展為單個(gè)單獨(dú)的元素；4、Set對(duì)象，一種新的數(shù)據(jù)結(jié)構(gòu)，類(lèi)似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值；5、構(gòu)造函數(shù)的方法Array.from()、Array.of()。

前端（vue）入門(mén)到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

ES6比ES5新增的特性

let、const：

let和const支持塊級(jí)作用域，擁有暫時(shí)性死區(qū)（必須先聲明，再使用，不支持變量提升）；

const是常量，聲明時(shí)必須賦值，當(dāng)賦值為基本類(lèi)型時(shí)，不能改變它的值；當(dāng)賦值為引用類(lèi)型時(shí)，不能改變它的引用，但是可以對(duì)引用類(lèi)型進(jìn)行操作，如數(shù)組的push、對(duì)象的屬性增刪改

解構(gòu)賦值：

es6允許按照一定的模式，從數(shù)組或?qū)ο笾刑崛≈担o變量進(jìn)行賦值，稱為解構(gòu)賦值。

解構(gòu)賦值在代碼書(shū)寫(xiě)上簡(jiǎn)單易懂，語(yǔ)義清晰明了，方便對(duì)復(fù)雜對(duì)象中數(shù)據(jù)字段的獲取。

對(duì)象的解構(gòu)賦值：

let obj = {   a: 1,   b: 2 }; let {a, b, c} = obj; // 大括號(hào)中的變量名必須和obj的屬性名一致 console.log(a, b, c);  // 輸出: // a: 1 // b: 2 // c: undefined

數(shù)組的解構(gòu)賦值：（字符串一樣）

let arr = ['a', 'b', 'c']; let [e, f] = arr;	// 中括號(hào)中的變量按數(shù)組中元素的順序被賦值 console.log(e, f);  // 輸出： // e: 'a' // f: 'b'  // 快速交換兩個(gè)變量值 let a = 1, b = 2; [a, b] = [b, a];

展開(kāi)運(yùn)算符：

由三個(gè)點(diǎn) ( …) 表示，JavaScript 擴(kuò)展運(yùn)算符是在 ES6 中引入的。它可用于將集合和數(shù)組中的元素?cái)U(kuò)展為單個(gè)單獨(dú)的元素。

擴(kuò)展運(yùn)算符可用于創(chuàng)建和克隆數(shù)組和對(duì)象、將數(shù)組作為函數(shù)參數(shù)傳遞、從數(shù)組中刪除重復(fù)項(xiàng)等等。

擴(kuò)展運(yùn)算符只能用于可迭代對(duì)象。它必須在可迭代對(duì)象之前使用，沒(méi)有任何分隔。例如：

console.log(...arr);

數(shù)組：

let arr1 = [1, 2, 3, 4]; let arr2 = ['a', 'b', ...arr1, 'c']; console.log(arr2);  // 輸出： // ['a', 'b', 1, 2, 3, 4, 'c']

對(duì)象：

let obj1 = {   a: 1,   b: 2 }; let obj2 = {   ...obj1,   c: 3,   d: 4 }; console.log(obj2);  // 輸出： // {a: 1, b: 2, c: 3, d: 4}

剩余參數(shù)處理：

數(shù)組：

let arr = [1, 2, 3, 4, 5]; let [a, b, ...c] = arr;	// 將arr后面所有的剩余參數(shù)放入c中 console.log(a, b, c);  // 輸出： // a: 1 // b: 2 // c: [3, 4, 5]

對(duì)象：

let obj = {   a: 1,   b: 2,   c: 3,   d: 4 }; let {a, b, ...c} = obj; console.log(a, b, c);  // 輸出： // a: 1 // b: 2 // c: {c: 3, d: 4}  // 對(duì)象的復(fù)制（不是傳地址） let obj2 = {...obj};

Set對(duì)象：

Set是ES6提供的一種新的數(shù)據(jù)結(jié)構(gòu)，類(lèi)似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。

• Set 本身是一個(gè)構(gòu)造函數(shù)，用來(lái)生成 Set 數(shù)據(jù)結(jié)構(gòu)。

• Set 對(duì)象允許你存儲(chǔ)任何類(lèi)型的唯一值，無(wú)論是原始值或者是對(duì)象引用。

• Set 中的元素只會(huì)出現(xiàn)一次，即 Set 中的元素是唯一的。

• 另外，NaN 和 undefined 都可以被存儲(chǔ)在 Set 中，NaN 之間被視為相同的值（盡管 NaN !== NaN）。

• Set 函數(shù)可以接受一個(gè)數(shù)組（或者具有 iterable 接口的其他數(shù)據(jù)結(jié)構(gòu)）作為參數(shù)，用來(lái)初始化。

數(shù)組去重：

let arr = [2, 1, 2, 1, 3, 4, 4, 5]; let s = new Set(arr); arr = [...s]; // arr: [2, 1, 3, 4, 5]

Set方法：

let s = new Set([1, 1, 2, 3, 'a']); // 得到Set元素個(gè)數(shù)： s.size; // 清空集合 s.clear(); // 刪除集合中的某個(gè)值，返回操作是否成功 s.delete('a'); // 查看集合是否包含某個(gè)值 s.has('a'); // 添加一項(xiàng)，返回集合本身的引用 s.add('b');

Map對(duì)象：

ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類(lèi)似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類(lèi)型的值（包括對(duì)象）都可以當(dāng)作鍵。也就是說(shuō)，Object 結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)，Map 結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。如果你需要“鍵值對(duì)”的數(shù)據(jù)結(jié)構(gòu)，Map 比 Object 更合適。

Map 特征：

• Map 對(duì)象保存鍵值對(duì)，并且能夠記住鍵的原始插入順序。

• 任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。

let arr = [   ['a', 1],   ['b', 2],   ['c', 3] ]; let m = new Map(arr); // m: {'a' => 1, 'b' => 2, 'c' => 3}

Map方法：

// 清空Map m.clear(); // 刪除某一項(xiàng)，返回操作是否成功 m.delete(key); // 獲取某一項(xiàng)的值，返回對(duì)應(yīng)的val m.get(key); // 是否包含某一項(xiàng) m.has(key); // 添加一項(xiàng)，返回Map本身的引用 m.set(key, val);

函數(shù)新增內(nèi)容：

• 箭頭函數(shù)：沒(méi)有this和arguments

• 參數(shù)默認(rèn)值

數(shù)組新增方法：

構(gòu)造函數(shù)的方法：

• 把一個(gè)類(lèi)數(shù)組轉(zhuǎn)換成真正的數(shù)組：Array.from(arrLike [, mapFunc, mapThis]);

  參數(shù)：

  • arrLike:類(lèi)數(shù)組
  • mapFunc:對(duì)類(lèi)數(shù)組每一項(xiàng)的操作函數(shù)
  • mapThis:替換mapFunc的this指向

  另一種方法：let arr = [...arrLike];

• 將參數(shù)列表轉(zhuǎn)換為數(shù)組：

  Array.of(...items);

• 檢測(cè)一個(gè)對(duì)象是否是一個(gè)數(shù)組：

  Array.isArray(obj);

對(duì)象的方法：

• arr.find(callback [, thisArg])：查找數(shù)組中滿足條件的第一個(gè)元素的值

  let arr = [1, 2, 3, 4]; let val = arr.find((item, index) => item >= 3); // val: 3 let val = arr.find((item, index) => item >= 5); // val: undefined

  登錄后復(fù)制

• arr.findIndex(callback [, thisArg])：查找數(shù)組中滿足條件的第一個(gè)元素的索引

• 數(shù)組扁平化：

  • arr.flat([depth])

    參數(shù)：depth：指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認(rèn)為1，當(dāng)depth = infinity時(shí)，無(wú)論數(shù)組多少層，都提取為一維數(shù)組。

  • arr.flatMap(callback[, thisArg])

    參數(shù)：callback：對(duì)原數(shù)組的每個(gè)元素進(jìn)行操作，返回新數(shù)組的元素；

    該函數(shù)值支持深度為1的扁平化

• 數(shù)組元素填充：arr.fill(value[, start[, end]]);

  用一個(gè)固定的值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)到全部元素。不包括終止索引；不會(huì)改變數(shù)組長(zhǎng)度

  參數(shù)：

  • value：用來(lái)填充數(shù)組元素的值；
  • start：起始索引，默認(rèn)值為0；
  • end：終止索引，默認(rèn)值為 arr.length ；

• arr.includes(valueToFind[, fromIndex])：判斷數(shù)組中是否包含一個(gè)指定的值

  參數(shù)：

  • valueToFind：需要查找的值
  • fromIndex：從 fromIndex 處開(kāi)始向后查找

字符串新增方法：

• str.startsWith(searchString[, position])：判斷當(dāng)前字符串是否以另一個(gè)給定的子字符串開(kāi)頭

  參數(shù)：

  • searchString：要搜索的字符串
  • position：在 str 中搜索 searchString 的開(kāi)始位置，默認(rèn)為0，也就是真正的字符串開(kāi)頭處

• str.endsWith(searchString[, position])：判斷當(dāng)前字符串是否以另一個(gè)給定的子字符串結(jié)束

  參數(shù)：

  • searchString：要搜索的字符串
  • position：在str中反向搜索的開(kāi)始位置，默認(rèn)為 str.length

• str.repeat(times)：返回重復(fù)str字符串times次的字符串

模版字符串：

反引號(hào)：“，可以換行

插值表達(dá)式：${}

對(duì)象新增方法：

• 簡(jiǎn)潔表示法：

  let a = 1, b = 2; // 原來(lái)的表示方法： let obj = {   a: a,   b: b,   c: function() {} }; // 簡(jiǎn)潔表示法： let obj = {   a,   b,   c() {} };

  登錄后復(fù)制

• 屬性名表達(dá)式：

  let name = "小明"; let obj = {   [name]: 111 }; console.log(obj); // 輸出： // obj: {'小明': 111}  // 等價(jià)于： let obj = {}; obj[name] = 111;

  登錄后復(fù)制

• Object.assign(obj1, obj2, ...)：將第二個(gè)參數(shù)即之后的參數(shù)對(duì)象合并到第一個(gè)參數(shù)對(duì)象中

  let obj1 = {a: 1, b: 2}; let obj2 = {c: 3, d: 4}; Object.assign(obj2, obj1); // 等價(jià)于 obj2 = {   ...obj1,   ...obj2 } // 等價(jià)于 obj2 = Object.assign({}, obj1, obj2);

  登錄后復(fù)制

• Object.is(value1, value2)：判斷兩個(gè)值是否相等（強(qiáng)類(lèi)型）

  和===的區(qū)別：

  +0 === -0;	// true Object.is(+0, -0);	// false  NaN === NaN; // false Object.is(NaN, NaN); // true

  登錄后復(fù)制

babel編譯器：

將es6語(yǔ)法編譯為es5語(yǔ)法

【