在本教程中，您将借助示例了解 JavaScript ES6。
JavaScript ES6（也称为 ECMAScript 2015 或 ECMAScript 6）是 2015 年推出的较新版本的 JavaScript。
ECMAScript 是 JavaScript 编程语言使用的标准。ECMAScript 提供了关于 JavaScript 编程语言应该如何工作的规范。
本教程简要总结了 ES6 的常用特性，以便您快速入门 ES6。

JavaScript let

JavaScript let 用于声明变量。以前，变量是使用 var 关键字声明的。
要详细了解 let 和 var 之间的区别，请访问JavaScript let vs var。
使用 let 声明的变量是块范围的。这意味着它们只能在特定区块内访问。例如，

// variable declared using let
let name = 'Sara';
{
    // can be accessed only inside
    let name = 'Peter';

    console.log(name); // Peter
}
console.log(name); // Sara

JavaScript const

const 语句用于在 JavaScript 中声明常量。例如，

// name declared with const cannot be changed
const name = 'Sara';

一旦声明，就不能更改 const 变量的值。

JavaScript 箭头函数

在 ES6 版本中，可以使用箭头函数创建函数表达式。例如，
这个函数

// function expression
let x = function(x, y) {
   return x * y;
}

可以写成

// function expression using arrow function
let x = (x, y) => x * y;

要了解有关箭头函数的更多信息，请访问JavaScript 箭头函数。

JavaScript 类

JavaScript 类用于创建对象。类与构造函数类似。例如，

class Person {
  constructor(name) {
    this.name = name;
  }
}

关键字 class 用于创建类。属性在构造函数中分配。
现在您可以创建一个对象。例如，

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person1 = new Person('John');

console.log(person1.name); // John

要了解有关类的更多信息，请访问JavaScript 类。

默认参数值

在 ES6 版本中，您可以在函数参数中传递默认值。例如，

function sum(x, y = 5) {

    // take sum
    // the value of y is 5 if not passed
    console.log(x + y);
}

sum(5); // 10
sum(5, 15); // 20

在上面的示例中，如果不传递 y 的参数，默认情况下 y 取值为 5。
要了解有关默认参数的更多信息，请访问JavaScript 函数默认参数。

JavaScript 模板字面量（模板字符串）

模板字面量使在字符串中包含变量变得更加容易。例如，在您必须这样做之前：

const first_name = "Jack";
const last_name = "Sparrow";

console.log('Hello ' + first_name + ' ' + last_name);

这可以通过以下方式使用模板字面量实现：

const first_name = "Jack";
const last_name = "Sparrow";

console.log(`Hello ${first_name} ${last_name}`);

要了解有关模板字面量的更多信息，请访问 JavaScript 模板字面量。

JavaScript 解构

解构语法使为新变量赋值更容易。例如，

// before you would do something like this
const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

使用 ES6 解构语法，上述代码可以写成：

const person = {
    name: 'Sara',
    age: 25,
    gender: 'female'    
}

let { name, age, gender } = person;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

要了解有关解构的更多信息，请访问JavaScript解构。

JavaScript 导入和导出

您可以导出一个函数或一个程序，并通过导入在另一个程序中使用它。这有助于制作可重用组件。例如，如果您有两个名为 contact.js 和 home.js 的JavaScript文件。
在 contact.js 文件，您可以导出 contact（）函数：

// export
export default function contact(name, age) {
    console.log(`The name is ${name}. And age is ${age}.`);
}

然后，当您想在另一个文件中使用 contact（）函数时，只需导入该函数即可。例如，在 home.js 文件中：

import contact from './contact.js';

contact('Sara', 25);
// The name is Sara. And age is 25

JavaScript Promise

Promise 用于处理异步任务。例如，

// returns a promise
let countValue = new Promise(function (resolve, reject) {
   reject('Promise rejected'); 
});

// executes when promise is resolved successfully
countValue.then(
    function successValue(result) {
        console.log(result); // Promise resolved
    },
 )

要了解有关 Promises 的更多信息，请访问JavaScript Promises。

JavaScript Rest Parameter（剩余参数） and Spread Operator（展开操作符）

您可以使用rest 参数将不确定数量的参数表示为数组。例如，

function show(a, b, ...args) {
  console.log(a); // one
  console.log(b); // two
  console.log(args); // ["three", "four", "five", "six"]
}

show('one', 'two', 'three', 'four', 'five', 'six')

您可以使用 … 语法传递剩余的参数。因此，名为剩余参数（Rest Parameter）。
你可以使用展开操作符 … 将项目复制到单个数组中。例如，

let arr1 = ['one', 'two'];
let arr2 = [...arr1, 'three', 'four', 'five'];
console.log(arr2); // ["one", "two", "three", "four", "five"]

剩余参数和展开操作符都使用相同的语法。但是，展开操作符用于数组（可迭代值）。
要了解有关扩展运算符的更多信息，请访问 JavaScript 扩展运算符。

上一教程 ：JS Modules 下一教程 ：JS Arrow Function

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/ES6

JavaScript ES6