Javascript ES6
ECMAScript 2015 是 JavaScript 的第二次重大修订版。
ECMAScript 2015 也称为 ES6 和 ECMAScript 6。
本章描述了 ES6 中最重要的功能。
ES6 中的新功能
- let 关键字
- const 关键字
- 箭头函数
- {a,b} = 运算符
- [a,b] = 运算符
- ... 运算符
- For/of
- Map 对象
- Set 对象
- 类
- Promise
- Symbol
- 默认参数
- 函数剩余参数
- 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 允许您循环遍历可迭代数据结构，例如数组、字符串、映射、节点列表等等。
for/of 循环具有以下语法
for (variable of iterable) {
// 要执行的代码块
}
variable - 每次迭代时，下一个属性的值都会被分配给变量。Variable 可以用 const、let 或 var 声明。
iterable - 具有可迭代属性的对象。
循环遍历数组
例子
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
自己试试 »
循环遍历字符串
在本章中了解更多信息：JavaScript 循环 For/In/Of.
JavaScript 映射
能够使用对象作为键是映射的重要特性。
在本章中了解更多关于映射对象的信息，以及映射和数组之间的区别：JavaScript 映射.
JavaScript 集合
例子
// 创建一个集合
const letters = new Set();
// 在集合中添加一些值
letters.add("a");
letters.add("b");
letters.add("c");
自己试试 »
在本章中了解更多关于集合对象的信息：JavaScript 集合.
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 类.
JavaScript Promise
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 Promise.
Symbol 类型
JavaScript Symbol 是一个原始数据类型，就像 Number、String 或 Boolean 一样。
它表示一个唯一的“隐藏”标识符，其他任何代码都不能意外地访问它。
例如，如果不同的编码人员希望向属于第三方代码的人员对象添加 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 仍然是未定义的
自己试试 »
注意
符号始终是唯一的。
如果您创建两个描述相同的符号，它们将具有不同的值
Symbol("id") == Symbol("id"); // false
默认参数值
ES6 允许函数参数具有默认值。
例子
function myFunction(x, y = 10) {
// 如果未传递或未定义，则 y 为 10
return x + y;
}
myFunction(5); // 将返回 15
自己试试 »
函数剩余参数
剩余参数 (...) 允许函数将不定数量的参数视为数组
例子
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
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, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
entries() 方法不会更改原始数组。
Array.from()
Array.from() 方法从任何具有 length 属性的对象或任何可迭代对象返回一个数组对象。
Array keys()
keys() 方法返回一个包含数组键的数组迭代器对象。
例子
创建一个包含数组键的数组迭代器对象
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 个参数
- 项目值
- 项目索引
- 数组本身
新的数学方法
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 为底的对数
新的数字属性
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() 方法
如果参数是 Infinity 或 NaN，则全局 isFinite() 方法返回 false。
否则它返回 true
isNaN() 方法
如果参数是 NaN，则全局 isNaN() 方法返回 true。否则它返回 false
模块
模块以两种不同的方式导入
了解更多关于模块的信息：JavaScript 模块.
