Javascript ES6
ECMAScript 2015 是 JavaScript 的第二次重大修訂。
ECMAScript 2015 也稱為 ES6 和 ECMAScript 6。
本章介紹 ES6 的最重要的特性。
ES6 中的新特性
- let 關鍵字
- const 關鍵字
- 箭頭函式
- {a,b} = 運算子
- [a,b] = 運算子
- ... 運算子
- For/of
- Map 物件
- Set 物件
- Classes
- Promises
- 符號
- 預設引數
- 函式剩餘引數
- String.includes()
- String.startsWith()
- String.endsWith()
- Array entries()
- Array.from()
- Array keys()
- Array find()
- Array findIndex()
- Math.trunc
- Math.sign
- Math.cbrt
- Math.log2
- Math.log10
- Number.EPSILON
- Number.MIN_SAFE_INTEGER
- Number.MAX_SAFE_INTEGER
- Number.isInteger()
- Number.isSafeInteger()
- 新的全域性方法
- JavaScript 模組
ES6 (2015) 的瀏覽器支援
自 2017 年 6 月起，所有現代瀏覽器都完全支援 ES6
| Chrome 51 |
Edge 15 |
Firefox 54 |
Safari 10 |
Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
Internet Explorer 不支援 ES6。
JavaScript let
let 關鍵字允許您宣告一個具有塊級作用域的變數。
有關 let 的更多資訊，請參閱本章：JavaScript Let。
JavaScript const
const 關鍵字允許您宣告一個常量（一個具有常量值的 JavaScript 變數）。
常量類似於 let 變數，但值不能被更改。
有關 const 的更多資訊，請參閱本章：JavaScript Const。
箭頭函式
箭頭函式允許使用簡短的語法編寫函式表示式。
您不需要 function 關鍵字、return 關鍵字和花括號。
箭頭函式沒有自己的 this。它們不適合定義物件方法。
箭頭函式不會被提升。它們必須在使用之前定義。
使用 const 比使用 var 更安全，因為函式表示式始終是一個常量值。
只有當函式是單個語句時，您才可以省略 return 關鍵字和花括號。因此，始終保留它們可能是一個好習慣
在以下章節中瞭解有關箭頭函式的更多資訊：JavaScript 箭頭函式。
物件解構
解構賦值可以輕鬆地將陣列值和物件屬性分配給變數。
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// 解構賦值
let { firstName, age } = person;
自己動手試一試 »
注意
解構物件時，必須為變數使用與相應物件鍵（名稱）相同的名稱。
鍵（名稱）的順序無關緊要。
陣列解構
解構賦值可以輕鬆地將陣列值和物件屬性分配給變數。
示例
// 建立一個數組
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// 解構賦值
let [fruit1, fruit2] = fruits;
自己動手試一試 »
擴充套件 (...) 運算子
... 運算子將可迭代物件（如陣列）擴充套件為更多元素
示例
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
自己動手試一試 »
... 運算子可用於將可迭代物件擴充套件為函式呼叫的更多引數
For/Of 迴圈
JavaScript for/of 語句迴圈遍歷可迭代物件的值。
for/of 允許您遍歷可迭代的資料結構，如陣列、字串、Map、NodeList 等。
for/of 迴圈具有以下語法
for (variable of iterable) {
// 要執行的程式碼塊
}
variable - 每次迭代，下一個屬性的值都會分配給該變數。變數可以使用 const、let 或 var 宣告。
iterable - 具有可迭代屬性的物件。
迴圈遍歷陣列
示例
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
自己動手試一試 »
迴圈遍歷字串
示例
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
自己動手試一試 »
在以下章節中瞭解更多資訊：JavaScript For/In/Of 迴圈。
JavaScript Maps
能夠使用物件作為鍵是 Map 的一個重要特性。
在以下章節中瞭解更多關於 Map 物件，以及 Map 和 Array 之間的區別：JavaScript Maps。
JavaScript Sets
示例
// 建立一個 Set
const letters = new Set();
// 新增一些值到 Set
letters.add("a");
letters.add("b");
letters.add("c");
自己動手試一試 »
在以下章節中瞭解更多關於 Set 物件：JavaScript Sets。
JavaScript 類
JavaScript 類是 JavaScript 物件的模板。
使用 class 關鍵字建立類。
始終新增一個名為 constructor() 的方法
語法
class ClassName {
constructor() { ... }
}
示例
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
上面的示例建立了一個名為“Car”的類。
該類有兩個初始屬性：“name”和“year”。
JavaScript 類不是一個物件。
它是一個 JavaScript 物件的模板。
使用類
當您有一個類時，您可以使用該類來建立物件
在以下章節中瞭解更多關於類：JavaScript Classes。
JavaScript Promises
Promise 是一個 JavaScript 物件，它連線了“產生程式碼”和“消費程式碼”。
“產生程式碼”可能需要一些時間，“消費程式碼”必須等待結果。
Promise 語法
const myPromise = new Promise(function(myResolve, myReject) {
// "產生程式碼"（可能需要一些時間）
myResolve(); // 成功時
myReject(); // 出錯時
});
// "消費程式碼"（必須等待 Promise 履行）。
myPromise.then(
function(value) { /* 成功時的程式碼 */ },
function(error) { /* 發生錯誤時的程式碼 */ }
);
使用 Promise 的示例
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
在以下章節中瞭解更多關於 Promise 的資訊：JavaScript Promises。
Symbol 型別
JavaScript Symbol 是一個原始資料型別，就像 Number、String 或 Boolean 一樣。
它代表一個唯一的“隱藏”識別符號，任何其他程式碼都無法意外訪問。
例如，如果不同的編碼人員想向屬於第三方程式碼的 person 物件新增 person.id 屬性，他們可能會混淆彼此的值。
使用 Symbol() 建立唯一的識別符號可以解決此問題
示例
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// 現在 person[id] = 140353
// 但 person.id 仍然是 undefined
自己動手試一試 »
注意
Symbol 始終是唯一的。
如果您建立了兩個具有相同描述的 Symbol，它們將具有不同的值
Symbol("id") == Symbol("id"); // false
預設引數值
ES6 允許函式引數具有預設值。
示例
function myFunction(x, y = 10) {
// 如果未傳遞 y 或傳遞 undefined，則 y 為 10
return x + y;
}
myFunction(5); // 將返回 15
自己動手試一試 »
函式剩餘引數
rest 引數 (...) 允許函式將不定數量的引數視為一個數組
示例
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
自己動手試一試 »
String.includes()
includes() 方法如果在字串中包含指定值，則返回 true，否則返回 false
String.startsWith()
startsWith() 方法如果字串以指定值開頭，則返回 true，否則返回 false
示例
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // 返回 true
自己動手試一試 »
String.endsWith()
endsWith() 方法如果字串以指定值結尾，則返回 true，否則返回 false
Array entries()
示例
建立陣列迭代器，然後迭代鍵/值對
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
自己動手試一試 »
entries() 方法返回一個包含鍵/值對的陣列迭代器物件
[0, "香蕉"]
[1, "橙子"]
[2, "蘋果"]
[3, "芒果"]
entries() 方法不會改變原始陣列。
Array.from()
Array.from() 方法從任何具有 length 屬性的物件或任何可迭代物件返回一個 Array 物件。
Array keys()
keys() 方法返回一個包含陣列鍵的陣列迭代器物件。
示例
建立一個 Array Iterator 物件，包含陣列的鍵
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
自己動手試一試 »
Array find()
find() 方法返回透過測試函式的第一個陣列元素的值。
此示例查詢（返回第一個大於 18 的元素的值）
示例
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
自己動手試一試 »
請注意，該函式接受 3 個引數
- 專案值
- 專案索引
- 陣列本身
Array findIndex()
findIndex() 方法返回透過測試函式的第一個陣列元素的索引。
此示例查詢第一個大於 18 的元素的索引
示例
const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
自己動手試一試 »
請注意，該函式接受 3 個引數
- 專案值
- 專案索引
- 陣列本身
新的 Math 方法
ES6 向 Math 物件添加了以下方法
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
Math.trunc() 方法
Math.trunc(x) 返回 x 的整數部分
示例
Math.trunc(4.9); // 返回 4
Math.trunc(4.7); // 返回 4
Math.trunc(4.4); // 返回 4
Math.trunc(4.2); // 返回 4
Math.trunc(-4.2); // 返回 -4
自己動手試一試 »
Math.sign() 方法
Math.sign(x) 返回 x 是負數、零還是正數
Math.cbrt() 方法
Math.cbrt(x) 返回 x 的立方根
Math.log2() 方法
Math.log2(x) 返回 x 的以 2 為底的對數
Math.log10() 方法
Math.log10(x) 返回 x 的以 10 為底的對數
新的 Number 屬性
ES6 向 Number 物件添加了以下屬性
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Number.isInteger() 方法
Number.isInteger() 方法如果引數是整數，則返回 true。
Number.isSafeInteger() 方法
安全整數是可以精確表示為雙精度數字的整數。
Number.isSafeInteger() 方法如果引數是安全整數，則返回 true。
示例
Number.isSafeInteger(10); // 返回 true
Number.isSafeInteger(12345678901234567890); // 返回 false
自己動手試一試 »
安全整數是從 -(253 - 1) 到 +(253 - 1) 的所有整數。
這是安全的：9007199254740991。這是不安全的：9007199254740992。
新的全域性方法
ES6 添加了 2 個新的全域性數字方法
isFinite()isNaN()
isFinite() 方法
全域性 isFinite() 方法如果引數是 Infinity 或 NaN，則返回 false。
否則返回 true
isNaN() 方法
全域性 isNaN() 方法如果引數是 NaN，則返回 true。否則返回 false
模組
模組有兩種不同的匯入方式
在以下章節中瞭解更多關於模組的資訊：JavaScript 模組。
