新增內容:1、let、const關鍵字,用於聲明變量,支援區塊級作用域,擁有暫時性死區;2、解構賦值,是針對數組或物件進行模式匹配,然後對其中的變數進行賦值的意思;3、展開運算符,可用於將集合和數組中的元素擴展為單個單獨的元素;4、Set對象,一種新的資料結構,類似於數組,但是成員的值都是唯一的,沒有重複的值;5、建構子的方法Array.from()、Array.of()。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
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 中的元素是唯一的。
另外,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]
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 更適合。
let arr = [ ['a', 1], ['b', 2], ['c', 3] ]; let m = new Map(arr); // m: {'a' => 1, 'b' => 2, 'c' => 3}
// 清空Map m.clear(); // 删除某一项,返回操作是否成功 m.delete(key); // 获取某一项的值,返回对应的val m.get(key); // 是否包含某一项 m.has(key); // 添加一项,返回Map本身的引用 m.set(key, val);
this
和
陣列新增方法:
检测一个对象是否是一个数组:
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]]);
用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引;不会改变数组长度
参数:
arr.includes(valueToFind[, fromIndex])
:判断数组中是否包含一个指定的值
参数:
str.startsWith(searchString[, position])
:判断当前字符串是否以另一个给定的子字符串开头
参数:
str.endsWith(searchString[, position])
:判断当前字符串是否以另一个给定的子字符串结束
参数:
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语法
【相关推荐:javascript视频教程、编程视频】
以上是es6比es5新增了什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!