跳到主要内容

JavaScript ES6

提示
  1. 新变量声明：ES6 引入了 let 和 const 用于声明变量，其中 let 声明的变量具有块级作用域，而 const 用于声明常量，一旦赋值后不能更改。
  2. 箭头函数和类：ES6 提供了箭头函数，简化了函数表达式的写法，并且引入了 class 关键字，使得基于类的面向对象编程更加直观。
  3. 模块化和异步处理：ES6 支持模块化编程，允许通过 import 和 export 引入或导出函数、变量等。此外，它通过 Promise 提供了更强大的异步处理能力。

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 声明的变量是块作用域的。这意味着它们只能在特定块内访问。例如，

// 使用 let 声明的变量
let name = "Sara";
{
  // 仅在内部可访问
  let name = "Peter";

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

JavaScript const​

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

// 使用 const 声明的 name 不能改变
const name = "Sara";

声明后，你不能更改 const 变量的值。

JavaScript 箭头函数​

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

这个函数

// 函数表达式
let x = function (x, y) {
  return x * y;
};

可以写成

// 使用箭头函数的函数表达式
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) {
  // 求和
  // 如果没有传递 y，则默认为 5
  console.log(x + y);
}

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

在上面的例子中，如果你没有传递 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 解构​

解构语法使将值分配给新变量变得更容易。例如，

// 以前你可能会这样做
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 导入和导出​

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

在 contact.js 文件中，你可以导出 contact() 函数：

// 导出
export default function contact(name, age) {
  console.log(`名字是 ${name}。年龄是 ${age}。`);
}

然后当你想在另一个文件中使用 contact() 函数时，你可以简单地导入该函数。例如，在 home.js 文件中：

import contact from "./contact.js";

contact("Sara", 25);
// 名字是 Sara。年龄是 25

JavaScript Promise​

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

// 返回一个 promise
let countValue = new Promise(function (resolve, reject) {
  reject("Promise 被拒绝");
});

// 当 promise 成功解决时执行
countValue.then(function successValue(result) {
  console.log(result); // Promise 解决
});

要了解更多关于 promises，请访问 JavaScript Promise。

JavaScript Rest 参数和 Spread 运算符​

你可以使用 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 参数。

你使用 spread 语法 ... 将项目复制到一个数组中。例如，

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

rest 参数和 spread 运算符都使用相同的语法。然而，spread 运算符用于数组（可迭代值）。

要了解更多关于 spread 运算符，请访问 JavaScript Spread 运算符。

最后于 更新