JavaScript 中的 ES6 功能

ES6 是 ECMAScript 6 的缩写，是 JavaScript 的一个版本，于 2015 年推出。它引入了许多新的语言特性和 API。

let 和 const

在 ES6 之前，我们只能使用 var 关键字声明变量。ES6 为我们带来了两个新的关键字：let 和 const。

// 使用 let 声明变量
let x = 10;

// 使用 const 声明常量
const PI = 3.14159;

let 关键字可以像 var 一样声明变量，但有一些重要的差异。在同一作用域内，使用 let 声明的变量只能被声明一次，而使用 var 声明的变量可以被重新赋值。此外，使用 let 声明的变量不会被提升到作用域的最顶端，而是只能在声明后使用。

const 关键字可以用来声明常量，一旦声明后不允许修改它的值。const 必须被赋值，而且一旦赋值就不能再被修改。

箭头函数

箭头函数是 ES6 中的一个新特性，它提供了一种更短的函数定义语法。

// 使用箭头函数
const add = (x, y) => x + y;

// 等同于
function add(x, y) {
  return x + y;
}

在箭头函数中，函数体内可以直接使用外层作用域的 this，这意味着它可以消除 this 绑定的一些问题。

const obj = {
  name: "John",
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
};

obj.sayHello(); // 输出 "Hello, John!"，无需使用 bind 方法

模板字符串

ES6 引入了模板字符串，使得字符串拼接更加方便。

const name = "John";
console.log(`Hello, ${name}!`); // 输出 "Hello, John!"

模板字符串使用反引号（）包含，其中使用 ${}` 来插入变量。

对象字面量扩展

ES6 允许在对象字面量中使用简写语法，将变量名作为属性名。

const name = "John";
const age = 30;

const person = { name, age };

此外，ES6 还允许在对象字面量中使用计算属性名。

const propName = "name";

const person = {
  [propName]: "John"
};

解构赋值

解构赋值是一种从数组或对象中提取值并将其赋给变量的语法。

// 解构数组
const [a, b, c] = [1, 2, 3];

// 解构对象
const { name, age } = { name: "John", age: 30 };

解构赋值可以使代码更加简洁明了。

延展运算符

延展运算符是在 ES6 中引入的另一个新特性，用于展开数组或对象。

// 延展运算符可以将一个数组展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

// 延展运算符也可以用于展开对象
const obj1 = { name: "John", age: 30 };
const obj2 = { ...obj1, city: "New York" };

类和继承

ES6 引入了类和继承语法，使得 JavaScript 更加像面向对象编程语言。

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const d = new Dog("Rufus");
d.speak(); // 输出 "Rufus barks."

模块

ES6 引入了模块作为一个标准化的 JavaScript 模块系统。

// file1.js
export const name = "John";
export function sayHello() {
  console.log(`Hello, ${name}!`);
}

// file2.js
import { name, sayHello } from "./file1";
console.log(name); // 输出 "John"
sayHello(); // 输出 "Hello, John!"

模块可让代码更易读、可维护性更强，并且避免了全局作用域的引入问题。

以上就是 JavaScript 中的 ES6 功能的简介，ES6 还引入了许多其他的新特性和 API，可供开发人员使用和探索。