js中 ES6 新特性详解

ES6（ECMAScript 2015）是 JavaScript 的一次重大更新，引入了许多新的特性，使 JavaScript 代码更加简洁、可读和高效。以下是 ES6 的主要新特性及其原理

1. let 和 const 关键字

原理解析

1.1 作用域

• var 关键字的作用域：在 ES5 及之前，JavaScript 只有函数作用域（Function Scope），即 var 声明的变量只在函数内部可见，但在块级 {} 内仍然可以访问：

  if (true) {
      var x = 10;
  }
  console.log(x); // 10，x 仍然可访问
  

  由于 x 是 var 声明的，它的作用域扩展到整个函数或全局，而非 if 代码块内部。

• let 和 const 关键字的作用域：

  • let 和 const 是 块级作用域（Block Scope），即它们声明的变量只在当前代码块 {} 内有效。
  • 这避免了 var 可能导致的全局污染问题。

  if (true) {
      let y = 20;
  }
  console.log(y); // ReferenceError: y is not defined
  

1.2 暂时性死区（Temporal Dead Zone, TDZ）

• let 和 const 不会像 var 一样变量提升（Hoisting），而是进入暂时性死区，直到执行到变量声明的位置，变量才可用。

  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 10;
  

  解释：

  • 代码在执行时，会先创建变量的作用域。
  • 但是 let 声明的变量在作用域创建后，直到真正声明前，处于“暂时性死区”。
  • 只有 let a = 10; 执行后，a 才能被访问。

1.3 const 的特性

• const 声明的变量不可被重新赋值：

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

• 但是对象类型（数组、对象）可以修改其内容：

  const obj = { name: "Alice" };
  obj.name = "Bob"; // 允许修改对象的属性
  console.log(obj); // { name: "Bob" }
  

  解释：
  • const 只是确保 obj 这个变量的引用地址不会变，但对象的内部属性仍然可以修改。

2. 模板字符串（Template Literals）

原理解析

2.1 变量插值

• 传统字符串拼接需要 + 号，而模板字符串可以使用 ${} 插入变量：

  let name = "Alice";
  let greeting = `Hello, ${name}!`;
  console.log(greeting); // "Hello, Alice!"
  

2.2 多行字符串

• 传统的字符串换行必须使用 \n：

  let str = "Hello\nWorld";
  

• 但模板字符串可以直接换行：

  let str = `Hello
  World`;
  console.log(str);
  

3. 箭头函数（Arrow Functions）

原理解析

3.1 this 绑定机制

• 普通 function 的 this 由调用者决定，但箭头函数的 this 由 定义时的作用域 决定：

  function normalFunction() {
      console.log(this); // this 取决于调用方式
  }
  
  const arrowFunction = () => {
      console.log(this); // this 由定义时决定
  };
  

• 在 事件回调、定时器、map/filter 中，箭头函数可以避免 this 绑定问题：

• const obj = {
      value: 10,
      method: function () {
          setTimeout(() => {
              console.log(this.value); // 10
          }, 1000);
      }
  };
  obj.method();
  

  解释：

  • setTimeout 里的回调是箭头函数，this 保持 method 里的 this，即 obj。

3.2 语法简化

• 省略 function 关键字：

  const add = (a, b) => a + b;
  

• 单个参数可省略括号：

  const square = x => x * x;
  

4. 解构赋值（Destructuring Assignment）

原理解析

4.1 数组解构

• 直接提取数组元素：

  let [a, b, c] = [1, 2, 3];
  console.log(a, b, c); // 1, 2, 3
  

• 跳过某些元素：

  let [first, , third] = [10, 20, 30];
  console.log(first, third); // 10, 30
  

4.2 对象解构

• 提取对象属性：

  let { name, age } = { name: "Alice", age: 25 };
  console.log(name, age); // "Alice", 25
  

• 给解构变量赋别名：

  let { name: userName } = { name: "Alice" };
  console.log(userName); // "Alice"
  

4.3 默认值

• 如果解构的值 undefined，可提供默认值：

  let { x = 10 } = {};
  console.log(x); // 10
  

5. 默认参数（Default Parameters）

原理解析

5.1 传统方式

• 过去需要手动检查参数：

  function greet(name) {
      name = name || "Guest"; // 传统方式
      console.log(`Hello, ${name}!`);
  }
  greet(); // "Hello, Guest!"
  

5.2 ES6 语法

• 直接在参数定义时提供默认值：

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

• 默认参数只在传 undefined 时生效，null 仍会覆盖默认值：

  greet(null); // "Hello, null!"
  

6. 扩展运算符（Spread Operator, ...）

原理解析

6.1 用于数组

• 展开数组元素：使用 ... 运算符将数组的每一项展开，可以合并数组、拷贝数组，甚至将数组插入到另一个数组中。

  let arr1 = [1, 2, 3];
  let arr2 = [...arr1, 4, 5];
  console.log(arr2); // [1, 2, 3, 4, 5]
  

• 拷贝数组：创建一个新数组，避免修改原数组：

  let arr1 = [1, 2, 3];
  let arr2 = [...arr1];
  arr2.push(4);
  console.log(arr1); // [1, 2, 3]
  console.log(arr2); // [1, 2, 3, 4]
  

6.2 用于对象

• 展开对象的属性：

  let obj1 = { name: "Alice", age: 25 };
  let obj2 = { ...obj1, city: "New York" };
  console.log(obj2); // { name: "Alice", age: 25, city: "New York" }
  

• 合并对象：

  let obj1 = { name: "Alice" };
  let obj2 = { age: 25 };
  let obj3 = { ...obj1, ...obj2 };
  console.log(obj3); // { name: "Alice", age: 25 }
  

6.3 与函数参数结合使用

• 直接展开数组作为函数参数：

  function sum(a, b, c) {
      return a + b + c;
  }
  let nums = [1, 2, 3];
  console.log(sum(...nums)); // 6
  

7. 对象增强语法（Enhanced Object Literals）

原理解析

7.1 属性简写

• 如果对象字面量中的键名与变量名相同，可以省略键名：

  let name = "Alice";
  let person = { name };
  console.log(person); // { name: "Alice" }
  

7.2 方法简写

• 定义对象方法时，不再需要 function 关键字：

  let person = {
      greet() {
          console.log("Hello!");
      }
  };
  person.greet(); // "Hello!"
  

7.3 动态属性名

• 对象的属性名可以动态设置，使用方括号 []：

  let propName = "age";
  let person = {
      [propName]: 25
  };
  console.log(person.age); // 25
  

8. for...of 迭代器

原理解析

8.1 迭代器（Iterator）

• for...of 用于迭代对象，尤其适用于数组、字符串、Set、Map 等可迭代对象。

  let arr = [1, 2, 3];
  for (let value of arr) {
      console.log(value); // 1, 2, 3
  }
  

8.2 与 for...in 的区别

• for...in 遍历对象的属性名，而 for...of 遍历对象的值。

  let arr = [10, 20, 30];
  
  for (let key in arr) {
      console.log(key); // 0, 1, 2（索引）
  }
  
  for (let value of arr) {
      console.log(value); // 10, 20, 30（元素值）
  }
  

8.3 可迭代对象

• 迭代对象必须实现 [Symbol.iterator]() 方法，如 Array, String, Map, Set 等。

  let str = "Hello";
  for (let char of str) {
      console.log(char); // H, e, l, l, o
  }
  

9. Map 和 Set

原理解析

9.1 Map

• Map 是一个键值对集合，支持任意类型的键（不仅仅是字符串），并且有序（按插入顺序存储）。

  let map = new Map();
  map.set("name", "Alice");
  map.set(1, "one");
  console.log(map.get("name")); // Alice
  console.log(map.get(1)); // one
  

• Map 还支持直接遍历：

  for (let [key, value] of map) {
      console.log(key, value); // name Alice, 1 one
  }
  

9.2 Set

• Set 是一个值的集合，其中每个值都是唯一的，不允许重复。

  let set = new Set([1, 2, 3, 3, 4]);
  console.log(set); // Set { 1, 2, 3, 4 }
  

• Set 可以用来自动去重：

  let arr = [1, 2, 3, 3, 4];
  let uniqueArr = [...new Set(arr)];
  console.log(uniqueArr); // [1, 2, 3, 4]
  

10. 类（Class）

原理解析

10.1 类的定义

• ES6 引入了更直观的 class 语法，进行面向对象编程：

  class Person {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }
      
      greet() {
          console.log(`Hello, I'm ${this.name}`);
      }
  }
  
  let p = new Person("Alice", 25);
  p.greet(); // "Hello, I'm Alice"
  

10.2 类的继承

• class 还支持继承，使用 extends 关键字：

  class Student extends Person {
      constructor(name, age, grade) {
          super(name, age);
          this.grade = grade;
      }
      
      study() {
          console.log(`${this.name} is studying`);
      }
  }
  
  let student = new Student("Bob", 20, "A");
  student.greet(); // "Hello, I'm Bob"
  student.study(); // "Bob is studying"
  

• super() 调用父类构造函数。

11. Promise 和异步操作

原理解析

11.1 Promise 的构造

• Promise 是用于处理异步操作的一种机制，可以简化回调函数的使用，避免回调地狱：

  let promise = new Promise((resolve, reject) => {
      let success = true;
      if (success) {
          resolve("Operation successful");
      } else {
          reject("Operation failed");
      }
  });
  
  promise.then((message) => {
      console.log(message); // "Operation successful"
  }).catch((error) => {
      console.log(error); // "Operation failed"
  });
  

11.2 Promise 的链式调用

• then() 返回一个新的 Promise，因此可以链式调用多个异步操作：

  let promise = new Promise((resolve, reject) => resolve(10));
  
  promise.then(value => {
      return value * 2;
  }).then(value => {
      console.log(value); // 20
  });
  

12. 模块化（Modules, import/export）

原理解析

12.1 导出（export）

• 使用 export 将函数、变量或类导出，使其可以在其他文件中使用：

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

12.2 导入（import）

• 使用 import 从其他模块导入：

  // main.js
  import { pi, add } from './math.js';
  console.log(pi); // 3.14
  console.log(add(2, 3)); // 5
  

13. Symbol 类型

原理解析

13.1 唯一性

• Symbol 是一个 唯一的原始数据类型，每个 Symbol 值都是唯一的。

  let sym1 = Symbol("desc");
  let sym2 = Symbol("desc");
  console.log(sym1 === sym2); // false
  

13.2 用作对象的私有属性

• Symbol 可以用于创建私有对象属性，防止外部访问：

  const secret = Symbol("secret");
  let obj = {
      [secret]: "hidden"
  };
  console.log(obj[secret]); // "hidden"
  

  j