ECMAScript 2015 - ES6

ES6(ECMAScript 2015) 是 JavaScript 的第二个主要修订版，本章整理了 ES6 的重要特性。

ES6(ECMAScript 2015) 是 JavaScript 的第二个主要修订版，本章整理了 ES6 的重要特性。

  • let 关键字
  • const 关键字
  • 箭头函数
  • for...of
  • Map 对象
  • Set 对象
  • 类 Class
  • Promise
  • Symbol
  • 默认参数
  • 函数剩余参数
  • String.includes()
  • String.startsWith()
  • String.endsWith()
  • Array.from()
  • Array.keys()
  • Array.find()
  • Array.findIndex()
  • Math 新方法
  • Number 新属性
  • Number 新方法
  • 新的全局方法
  • JavaScript 模块

JavaScript let

let 关键字允许您声明具有块作用域的变量。

var x = 10;
// 这里 x 是 10
{
  let x = 2;
  // 这里 x 是 2
}
// 这里 x 是 10

请转到 JavaScript Let 章节了解更多信息。

JavaScript 常量

const 关键字允许您声明一个常量（具有常量值的 JavaScript 变量）。

常量与 let 变量类似，只是其值不能改变。

var x = 10;
// 这里 x 是 10
{
  const x = 2;
  // 这里 x 是 2
}
// 这里 x 是 10

请转到 JavaScript Let 章节了解更多信息。

箭头函数

箭头函数允许使用简短的语法来编写函数表达式。

// ES5
var x = function (x, y) {
  return x * y;
};

// ES6
const x = (x, y) => x * y;

箭头函数没有自己的 this . 它们不太适合定义对象方法。

箭头函数没有被提升。它们必须在使用之前定义。

将箭头函数赋值给 const 变量是一种更安全的做法，因为函数表达式始终是一个常量值。

请转到 JavaScript 箭头函数 章节了解更多信息。

for...of 循环

JavaScript for...of 语句循环遍历可迭代对象的值。

for...of 允许您循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等。

for...of 循环的语法如下：

for (variable of iterable) {
  // code block to be executed
}
  • variable- 对于每次迭代，属性的值都会分配给变量。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…of 循环 章节了解更多信息。

JavaScript Map 对象

JavaScript Map 对象按原始插入的顺序保存键值对。Map 的键可以是任何数据类型。

能够使用 Object 作为键是 Map 的一个重要特性。

const apples = { name: "Apples" };
const bananas = { name: "Bananas" };
const oranges = { name: "Oranges" };

const fruits = new Map();

fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

请转到 JavaScript Map 章节了解更多信息。

JavaScript Set 对象

Set 对象按原始插入顺序保存值，是值的集合。Set 中的元素是唯一的，每个值只允许出现一次。Set 可以保存任何数据类型的值。

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

请转到 JavaScript Set 章节了解更多信息。

JavaScript 类

JavaScript 类是 JavaScript 对象的模板，使用关键字 class 声明一个类。 类可以包含：

  • 一个构造方法：constructor()
  • 其他自定义的方法
  • 其他自定义的属性

语法：

class ClassName {
  constructor() { ... }
}

创建一个 Car 类

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

上面的示例创建了一个名为 Car 的类，该类有两个初始属性：name 和 year。

JavaScript 类不是对象。类是对象的模板，对象是类的实例，一个类可以创建任意多个对象。

创建两个类实例：

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

上面的例子使用 Car 类创建了两个对象，每个对象拥有自己的属性值。

请转到 JavaScript 类 章节了解更多信息。

JavaScript Promise

Promise 是链接“生产代码”和“消费代码”的 JavaScript 对象。

“生产代码”可能需要一些时间，“消费代码”必须等待结果。

Promise 语法

const myPromise = new Promise(function (myResolve, myReject) {
  // "Producing Code" (May take some time)
  myResolve(); // when successful
  myReject(); // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function (value) {
    /* code if successful */
  },
  function (error) {
    /* code if some 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;
});

Symbol 类型

JavaScript Symbol 是一种原始数据类型，就像 Number、String 或 Boolean 一样。

它代表一个唯一的“隐藏”标识符，其他代码无法意外访问。

例如，如果不同的编码人员想要将 person.id 属性添加到属于第三方代码的 person 对象，他们可以混合使用彼此的值。

使用 Symbol() 创建唯一标识符，解决了这个问题：

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
};

let id = Symbol("id");
person[id] = 140353;
// Now person[id] = 140353 // but person.id is still undefined

符号总是独一无二的。

如果您创建两个具有相同描述的符号，它们具有不同的值。

Symbol("id") == Symbol("id"); // false

默认参数值

ES6 允许函数参数具有默认值。

function myFunction(x, 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.startsWith()

如果字符串以指定值开头，则该 startsWith() 方法返回 true ，否则 false ：

let text = "Hello world, welcome to the universe.";

text.startsWith("Hello"); // 返回 true

String.endsWith()

如果字符串以指定值结尾，则该 endsWith() 方法返回 true ，否则 false ：

var text = "John Doe";
text.endsWith("Doe"); // 返回 true

Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

此示例查找（返回 的值）大于 18 的第一个元素：

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

此示例查找大于 18 的第一个元素的索引：

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

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.sign(-4); // 返回 -1
Math.sign(0); // 返回 0
Math.sign(4); // 返回 1

Math.cbrt() 方法

Math.cbrt(x) 返回 x 的立方根：

Math.cbrt(8); // 返回 2
Math.cbrt(64); // 返回 4
Math.cbrt(125); // 返回 5

Math.log2() 方法

Math.log2(x) 返回 x 的以 2 为底的对数：

Math.log2(2); // 返回 1

Math.log10() 方法

Math.log10(x) 返回 x 的以 10 为底的对数：

Math.log10(10); // 返回 1

请转到 JavaScript Math 章节了解更多信息。

Number 新属性

ES6 向 Number 对象添加了以下属性：

  • EPSILON：表示 1 与 Number 可表示的大于 1 的最小的浮点数之间的差值
  • MIN_SAFE_INTEGER：表示 JavaScript 中最小的安全整数
  • MAX_SAFE_INTEGER：表示 JavaScript 中最大的安全整数
let x = Number.EPSILON;

let x = Number.MIN_SAFE_INTEGER;

let x = Number.MAX_SAFE_INTEGER;

Number 新方法

ES6 为 Number 对象添加了 2 个新方法：

  • Number.isInteger() 方法用来判断给定的参数是否为整数。
  • Number.isSafeInteger() 方法用来判断传入的参数值是否是一个“安全整数”

Number.isInteger() 方法

如果参数是整数，则该 Number.isInteger() 方法返回 true 。

Number.isInteger(10); // 返回 true
Number.isInteger(10.5); // 返回 false

Number.isSafeInteger() 方法

安全整数是可以精确表示为双精度数的整数。

如果参数是安全整数，则该 Number.isSafeInteger() 方法返回 true 。

Number.isSafeInteger(10); // 返回 true
Number.isSafeInteger(12345678901234567890); // 返回 false

安全整数是从 -(253 - 1) 到 +(253 - 1) 的所有整数。 9007199254740991 是最大的安全整数。

新的全局方法

ES6 添加了 2 个新的全局编号方法：

  • isFinite()
  • isNaN()

isFinite() 方法

如果参数是 Infinity 或 NaN，isFinite() 方法返回 false，否则返回 true。

isFinite(10 / 0); // 返回 false
isFinite(10 / 1); // 返回 true

isNaN() 方法

如果参数为 NaN，isNaN() 方法返回 true，否则返回 true 。

isNaN("Hello"); // 返回 true

ES6 浏览器支持情况

Safari 10 和 Edge 14 是第一批完全支持 ES6 的浏览器：

Chrome Edge Firefox Safari Opera
Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Jan 2017 Aug 2016 Mar 2017 Jul 2016 Aug 2018
ECMAScript 2009 - ES5 ECMAScript 2016