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 模块。
