溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“es6比es5新增了哪些內容”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“es6比es5新增了哪些內容”吧！
新增內容：1、let、const關鍵字，用于聲明變量，支持塊級作用域，擁有暫時性死區；2、解構賦值，是針對數組或者對象進行模式匹配，然后對其中的變量進行賦值的意思；3、展開運算符，可用于將集合和數組中的元素擴展為單個單獨的元素；4、Set對象，一種新的數據結構，類似于數組，但是成員的值都是唯一的，沒有重復的值；5、構造函數的方法Array.from()、Array.of()。
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是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');
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]);
參數：
另一種方法：let arr = [...arrLike];
arrLike:類數組
mapFunc:對類數組每一項的操作函數
mapThis:替換mapFunc的this指向
將參數列表轉換為數組：
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將es6語法編譯為es5語法
感謝各位的閱讀，以上就是“es6比es5新增了哪些內容”的內容了，經過本文的學習后，相信大家對es6比es5新增了哪些內容這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
