對ES6的瞭解
阿新 • • 發佈:2019-01-24
1、新增了模板字串(為JavaScript提供了簡單的字串插值功能);
2、新增了箭頭函式(操作符左邊為輸入的引數,而右邊則是進行的操作以及返回的值)
var f = () => 5;
// 等同於
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
return num1 + num2;
};
3、for-of(用來遍歷資料—例如陣列中的值)
for (var value of myArray) {
console.log(value);
}
優點:1)這是最簡潔、最直接的遍歷陣列元素的語法;
2)這個方法避開了for-in迴圈的所有缺陷;
3)與forEach()不同的是,他可以正確響應break、continue和return語句
補充:
1)用for-in遍歷陣列,key不是實際的數字,而是字串,有時會代理程式設計的麻煩。for-in適合用於字串型別的鍵,而不適合普通陣列;
2)eachFor不能使用break語句中斷迴圈,也不能使用return語句返回到外層函式。
3)for-of迴圈不支援普通物件,但如果你想迭代一個物件的屬性,你可以用for-in迴圈
4、arguments物件可被不定引數和預設引數 完美代替
// 1各種寫法 預設引數出現在中間
function getRequest(url, timeout = 2000, callback) {
// do something
}
gerRequest("/foo", undefined, function() {
});
// 2預設引數表示式
let value = 5;
function getValue() {
return value++;
}
function add(first, second = getValue()) {
return first + second;
}
add(3); // 8
add(3); // 9
add(1, 1); // 2
// 3後面引數引用前面引數
function add(first, second = first) {
return first + second;
}
add(2); // 4
add(3, 4); // 7
5、不定引數
function pick(object, ...keys) {
var result = Object.create(null); // 建立一個物件
for (var i = 0, len = keys.length; i < len; i++) {
result[keys[i]] = object[keys[i]];
}
return result;
}
// keys將object不計入在其內
var book = {
title: "understanding ES6",
author: "Nicholas C.Zakes",
year: 2016
};
var o = pick(book, "author", "year");
o.author; // "Nicholas C.Zakes"
o.year; // 2016
6、新增了spread操作符
spread操作符允許我們將陣列中的引數一個一個傳入函式中 例如:
// Math.max()函式, 一般可以加入任意個引數
Math.max(12, 13, 14, 15); // 15
// 以陣列的形式
var arr = [1, 2, 3, 4];
Math.max.apply(null, arr); // 4
// 使用 "..."
Math.max(...arr); // 4
// 還可以加入其它的一些引數
Math.max(...arr, 5, 10); // 10
7、ES6將promise物件納入規範,提供了原生的Promise物件
8、增加了let和const命令,用來宣告變數
9、增加了塊級作用域
10、ES6規定,var命令和function命令宣告的全域性變數,屬於全域性物件的屬性;let命令、const命令、class命令宣告的全域性變數,不屬於全域性物件的屬性。