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語法

【相關推薦：、】

以上就是es6比es5新增了什麼的詳細內容，更多請關注TW511.COM其它相關文章！