你在项目中使用过哪些 ES6+ 新特性？

推荐答案

在项目中，我经常使用以下 ES6+ 新特性：

1. let 和 const：用于块级作用域的变量声明，const 用于声明常量。
2. 箭头函数：简化函数语法，自动绑定 this。
3. 模板字符串：使用反引号（``）包裹字符串，支持多行字符串和嵌入表达式。
4. 解构赋值：从数组或对象中提取值并赋值给变量。
5. 默认参数：为函数参数提供默认值。
6. 扩展运算符（...）：用于展开数组或对象。
7. 剩余参数：将多个参数收集到一个数组中。
8. Promise 和 async/await：用于处理异步操作。
9. 模块化（import/export）：用于模块的导入和导出。
10. 类和继承：使用 class 关键字定义类，支持继承。
11. Map 和 Set：新的数据结构，用于存储键值对和唯一值。
12. Symbol：新的原始数据类型，用于创建唯一的标识符。
13. 迭代器和生成器：用于自定义迭代行为和生成值序列。
14. Proxy 和 Reflect：用于拦截和定义对象的基本操作。
15. 可选链操作符（?.）：简化访问嵌套对象属性的代码。
16. 空值合并操作符（??）：用于提供默认值，仅在值为 null 或 undefined 时生效。

本题详细解读

let 和 const

let 和 const 是 ES6 引入的新的变量声明方式。let 用于声明块级作用域的变量，而 const 用于声明常量，一旦声明后不可重新赋值。

let x = 10;
const y = 20;

箭头函数

箭头函数简化了函数的语法，并且自动绑定 this，使得在回调函数中不再需要手动绑定 this。

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

模板字符串

模板字符串使用反引号（``）包裹，支持多行字符串和嵌入表达式。

const name = 'Alice';
const greeting = `Hello, ${name}!`;

解构赋值

解构赋值允许从数组或对象中提取值并赋值给变量。

const [a, b] = [1, 2];
const { name, age } = { name: 'Bob', age: 25 };

默认参数

默认参数允许为函数参数提供默认值。

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

扩展运算符

扩展运算符（...）用于展开数组或对象。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

剩余参数

剩余参数允许将多个参数收集到一个数组中。

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

Promise 和 async/await

Promise 用于处理异步操作，async/await 是 Promise 的语法糖，使得异步代码看起来像同步代码。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

模块化

ES6 引入了模块化语法，使用 import 和 export 来导入和导出模块。

// module.js
export const add = (a, b) => a + b;

// main.js
import { add } from './module.js';

类和继承

ES6 引入了 class 关键字，用于定义类，并支持继承。

-- -------------------- ---- -------
----- ------ -
  ----------------- -
    --------- - -----
  -
  ------- -
    ------------------------- ----- - ---------
  -
-

----- --- ------- ------ -
  ------- -
    ------------------------- ---------
  -
-

Map 和 Set

Map 和 Set 是新的数据结构，Map 用于存储键值对，Set 用于存储唯一值。

const map = new Map();
map.set('key', 'value');

const set = new Set();
set.add(1);
set.add(2);

Symbol

Symbol 是新的原始数据类型，用于创建唯一的标识符。

const sym = Symbol('description');

迭代器和生成器

迭代器用于自定义迭代行为，生成器用于生成值序列。

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = generator();

Proxy 和 Reflect

Proxy 用于拦截和定义对象的基本操作，Reflect 提供了操作对象的方法。

const target = {};
const handler = {
  get(target, prop) {
    return Reflect.get(target, prop);
  }
};
const proxy = new Proxy(target, handler);

可选链操作符

可选链操作符（?.）用于简化访问嵌套对象属性的代码。

const user = {
  profile: {
    name: 'Alice'
  }
};
const name = user.profile?.name;

空值合并操作符

空值合并操作符（??）用于提供默认值，仅在值为 null 或 undefined 时生效。

const value = null;
const defaultValue = value ?? 'default';