es6比es5新增了什么

新增內容：1、let、const關鍵字，用于聲明變量，支持塊級作用域，擁有暫時性死區；2、解構賦值，是針對數組或者對象進行模式匹配，然后對其中的變量進行賦值的意思；3、展開運算符，可用于將集合和數組中的元素擴展為單個單獨的元素；4、Set對象，一種新的數據結構，類似于數組，但是成員的值都是唯一的，沒有重復的值；5、構造函數的方法Array.from()、Array.of()。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6比ES5新增的特性

let、const：

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

const是常量，聲明時必須賦值，當賦值為基本類型時，不能改變它的值；當賦值為引用類型時，不能改變它的引用，但是可以對引用類型進行操作，如數組的push、對象的屬性增刪改

解構賦值：

es6允許按照一定的模式，從數組或對象中提取值，給變量進行賦值，稱為解構賦值。

解構賦值在代碼書寫上簡單易懂，語義清晰明了，方便對復雜對象中數據字段的獲取。

對象的解構賦值：

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

數組的解構賦值：（字符串一樣）

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

展開運算符：

由三個點 ( …) 表示，JavaScript 擴展運算符是在 ES6 中引入的。它可用于將集合和數組中的元素擴展為單個單獨的元素。

擴展運算符可用于創建和克隆數組和對象、將數組作為函數參數傳遞、從數組中刪除重復項等等。

擴展運算符只能用于可迭代對象。它必須在可迭代對象之前使用，沒有任何分隔。例如：

console.log(...arr);

數組：

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

對象：

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

剩余參數處理：

數組：

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

對象：

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}  // 對象的復制（不是傳地址） let obj2 = {...obj};

Set對象：

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

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

• Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。

• Set 中的元素只會出現一次，即 Set 中的元素是唯一的。

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

• Set 函數可以接受一個數組（或者具有 iterable 接口的其他數據結構）作為參數，用來初始化。

數組去重：

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元素個數： s.size; // 清空集合 s.clear(); // 刪除集合中的某個值，返回操作是否成功 s.delete('a'); // 查看集合是否包含某個值 s.has('a'); // 添加一項，返回集合本身的引用 s.add('b');

Map對象：

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

Map 特征：

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

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

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

Map方法：

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

函數新增內容：

• 箭頭函數：沒有this和arguments

• 參數默認值

數組新增方法：

構造函數的方法：

• 把一個類數組轉換成真正的數組：Array.from(arrLike [, mapFunc, mapThis]);

  參數：

  • arrLike:類數組
  • mapFunc:對類數組每一項的操作函數
  • mapThis:替換mapFunc的this指向

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

• 將參數列表轉換為數組：

  Array.of(...items);

• 檢測一個對象是否是一個數組：

  Array.isArray(obj);

對象的方法：

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

  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

  登錄后復制

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

• 數組扁平化：

  • arr.flat([depth])

    參數：depth：指定要提取嵌套數組的結構深度，默認為1，當depth = infinity時，無論數組多少層，都提取為一維數組。

  • arr.flatMap(callback[, thisArg])

    參數：callback：對原數組的每個元素進行操作，返回新數組的元素；

    該函數值支持深度為1的扁平化

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

  用一個固定的值填充一個數組中從起始索引到終止索引內到全部元素。不包括終止索引；不會改變數組長度

  參數：

  • value：用來填充數組元素的值；
  • start：起始索引，默認值為0；
  • end：終止索引，默認值為 arr.length ；

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

  參數：

  • valueToFind：需要查找的值
  • fromIndex：從 fromIndex 處開始向后查找

字符串新增方法：

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

  參數：

  • searchString：要搜索的字符串
  • position：在 str 中搜索 searchString 的開始位置，默認為0，也就是真正的字符串開頭處

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

  參數：

  • searchString：要搜索的字符串
  • position：在str中反向搜索的開始位置，默認為 str.length

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

模版字符串：

反引號：“，可以換行

插值表達式：${}

對象新增方法：

• 簡潔表示法：

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

  登錄后復制

• 屬性名表達式：

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

  登錄后復制

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

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

  登錄后復制

• Object.is(value1, value2)：判斷兩個值是否相等（強類型）

  和===的區別：

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

  登錄后復制

babel編譯器：

將es6語法編譯為es5語法

【