用 ES6 创造一个更灵活的 JavaScript 世界

2023-09-17 18:39:04

变量和常量

ES6 中引入了 let 和 const ，可以声明块级作用域变量和常量。与 var 不同的是，let 和 const 定义的变量只在当前块级作用域内有效，不会影响其他块级作用域或全局作用域。

例如：

let x = 10;
if (x > 5) {
  let y = 20;
  console.log(y); // 20
}
console.log(y); // ReferenceError: y is not defined

在上面的示例中，x 是一个全局变量，可以在任何地方访问。y 是一个块级变量，只能在它被声明的块级作用域内访问。因此，当我们尝试在 if 块之外访问 y 时，会抛出一个 ReferenceError。

const 关键字用于声明常量。常量一旦被声明，就不能被重新赋值。

例如：

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.

在上面的示例中，我们尝试将 PI 的值从 3.14 改为 3.14159。但是，由于 PI 是一个常量，所以不能被重新赋值。

箭头函数

箭头函数是 ES6 中引入的一种新的函数语法。箭头函数与传统函数的不同之处在于，它没有自己的 this 关键字，并且可以省略函数体的大括号。

例如：

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

在上面的示例中，add 是一个传统函数，它有自己的 this 关键字，并且需要使用大括号来定义函数体。add 是一个箭头函数，它没有自己的 this 关键字，并且可以省略函数体的大括号。

箭头函数非常适合用作回调函数。例如：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

在上面的示例中，map() 方法使用箭头函数作为回调函数。箭头函数接收一个参数 number，并返回该参数乘以 2 的值。

模块

ES6 引入了模块的概念。模块是一种将代码组织成不同文件的机制。模块可以被其他模块导入和使用。

例如，我们可以创建一个名为 math.js 的模块，其中包含一些数学函数：

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

然后，我们可以创建一个名为 main.js 的模块，并导入 math.js 模块：

// main.js
import { add, subtract, multiply, divide } from './math.js';

console.log(add(1, 2)); // 3
console.log(subtract(4, 2)); // 2
console.log(multiply(5, 3)); // 15
console.log(divide(10, 2)); // 5

在上面的示例中，我们使用 import 语句从 math.js 模块导入 add、subtract、multiply 和 divide 函数。然后，我们可以使用这些函数来进行数学运算。

类

ES6 引入了类的概念。类是一种创建对象的蓝图。我们可以使用类来创建具有相同属性和方法的对象。

例如，我们可以创建一个名为 Person 的类：

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

然后，我们可以使用 Person 类来创建对象：

const person1 = new Person('John Doe', 30);
person1.greet(); // Hello, my name is John Doe and I am 30 years old.

const person2 = new Person('Jane Doe', 25);
person2.greet(); // Hello, my name is Jane Doe and I am 25 years old.

在上面的示例中，person1 和 person2 是 Person 类的实例。我们可以使用这些实例来访问类的属性和方法。

Promise

ES6 引入了 Promise 对象。Promise 对象用于表示异步操作的结果。Promise 对象有三种状态：

Pending： 异步操作正在进行中。
Fulfilled： 异步操作已成功完成。
Rejected： 异步操作已失败。

我们可以使用 then() 方法来处理 Promise 对象的状态。例如：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise.then((result) => {
  console.log(result); // Hello, world!
});

在上面的示例中，我们创建了一个 Promise 对象，并在 2 秒后使用 resolve() 方法来将 Promise 对象的状态设置为 Fulfilled。然后，我们使用 then() 方法来处理 Promise 对象的状态。当 Promise 对象的状态变为 Fulfilled 时，then() 方法中的回调函数就会被调用。