ES6 (ES2015) 的演变及其为现代 JavaScript 带来的新特性

ES6 (即 ECMAScript 6 或 ES2015) 是 JavaScript 的最新版本之一。它在 2015 年发布，并为 JavaScript 带来了很多新的特性和语法。这些新特性使得 JavaScript 更加强大，更加易于编写和维护。本文将介绍 ES6 的主要特性。

变量声明

在 ES6 之前，JavaScript 只能使用 var 来声明变量。而 ES6 引入了两个新的变量声明关键字：let 和 const。

let

使用 let 定义的变量具有块级作用域，只能在定义它的代码块内部访问。这与使用 var 定义的变量不同，后者的作用域是函数级别的。例如：

if (true) {
  let x = 10;
}
console.log(x); // 抛出一个 ReferenceError 异常

const

使用 const 定义的变量是常量，一旦赋值就不能再改变。常量也具有块级作用域。例如：

const PI = 3.141592653589793;
PI = 3.14; // 抛出一个 TypeError 异常

箭头函数

ES6 引入了一种新的函数定义方式：箭头函数。它们通过 => 符号定义，可以简化写法，并且可以自动绑定 this 关键字。例如：

var numbers = [1, 2, 3, 4, 5];
var tripled = numbers.map((number) => {
  return number * 3;
});
console.log(tripled); // [3, 6, 9, 12, 15]

这段代码使用 map 方法将 numbers 数组中的每个元素都乘以 3，生成一个新的数组 tripled。这个函数使用了箭头函数，将一个函数作为参数传递给 map，而不是定义一个新的函数。

模板字面量

在 ES6 之前，JavaScript 使用字符串连接符 + 来拼接多个字符串。而 ES6 引入了一种新的字符串定义方式：模板字面量。使用模板字面量，我们可以在字符串中使用表达式，并且可以跨多行定义字符串。例如：

var name = "Alice";
var age = 30;
var message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); // "My name is Alice and I'm 30 years old."

这个例子中，我们使用了模板字面量来定义一个字符串 message，其中使用了两个变量 name 和 age，通过 ${} 包裹在字符串中，并且字符串跨越了多行。

解构

ES6 允许我们使用解构语法来快速提取对象或数组中的属性或元素，并将它们赋值给变量。例如：

var person = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    state: "NY"
  }
};
var {name, address: {city}} = person;
console.log(name); // "Alice"
console.log(city); // "New York"

这个例子中，我们使用解构语法将 person 对象中的属性 name 和 address.city 赋值给变量 name 和 city。

默认参数

在 ES6 之前，JavaScript 没有默认参数的概念，我们需要在函数内部手动检查参数是否传递。而 ES6 允许我们在函数定义时为参数提供默认值。例如：

function greet(name = "John") {
  console.log(`Hello, ${name}!`);
}
greet(); // "Hello, John!"
greet("Alice"); // "Hello, Alice!"

这个例子中，我们声明了一个函数 greet，它有一个参数 name，默认值为 "John"。当我们调用 greet 函数时，如果没有传递参数，则使用默认值 "John"。

for-of 循环

ES6 引入了一个新的循环语句：for-of 循环。for-of 循环与 for-in 循环不同，它用于迭代可迭代对象（如数组）。例如：

var numbers = [1, 2, 3, 4, 5];
for (var number of numbers) {
  console.log(number);
}

这个例子中，我们使用 for-of 循环迭代 numbers 数组中的每个元素，并将其打印到控制台上。

类

ES6 支持使用 class 关键字来定义类。类是一种可重用的模板，用于创建对象。类包含了属性和方法的定义。例如：

class Circle {
  constructor(radius) {
    this.radius = radius;
  }
  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}
var c = new Circle(10);
console.log(c.getArea()); // 314.1592653589793

这个例子中，我们使用 class 关键字定义了一个 Circle 类，它有一个属性 radius 和一个方法 getArea，用于计算圆的面积。我们通过 new Circle(10) 来创建一个新的圆对象 c，并使用 c.getArea() 来计算其面积。

模块

ES6 引入了一种新的模块定义方式，支持将代码封装到模块中，并进行导入和导出。例如：

// circle.js
const PI = Math.PI;
export class Circle {
  constructor(radius) {
    this.radius = radius;
  }
  getArea() {
    return PI * this.radius * this.radius;
  }
}

// app.js
import {Circle} from "./circle.js";
var c = new Circle(10);
console.log(c.getArea()); // 314.1592653589793

这个例子中，我们将 Circle 类定义在 circle.js 文件中，并通过 export 关键字导出。在另外一个文件 app.js 中，我们通过 import 关键字将它导入，并创建了一个新的圆对象 c。