es6比es5新增了什麼

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

本教學操作環境：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语法

【相关推荐：javascript视频教程、编程视频】

以上是es6比es5新增了什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！