ES6+ 核心语法糖

1.6 ES6+ 核心语法糖

ES6 及后续标准引入的一系列语法糖，大幅简化了 JavaScript 代码的书写方式，提升了代码的可读性与简洁度，是现代前端交互开发的日常基础语法。

这些语法糖普遍用于数据提取、对象操作、字符串拼接、安全访问等场景，能够显著减少冗余代码，降低边界错误的发生概率。

---

1.6.1 解构赋值（对象 / 数组 / 参数）

解构赋值是一种通过模式匹配，快速从对象、数组等复合结构中提取值并直接赋值给变量的语法。

它能够极大简化数据提取的代码量，在处理接口返回数据、函数参数解析、状态拆分等场景中高频使用。

一、对象解构

从对象中提取对应属性，赋值给同名变量，支持重命名、默认值、嵌套解构等进阶能力。

• 基础语法：const { 属性名 } = 对象
• 基础示例：

const user = { name: '张三', age: 25, gender: '男' };
// 传统写法
const name = user.name;
const age = user.age;

// 对象解构写法
const { name, age } = user;
console.log(name, age); // 张三 25

• 重命名：当变量名与属性名不一致时，可通过冒号重命名

const { name: userName, age: userAge } = user;
console.log(userName); // 张三

• 默认值：属性不存在时使用预设默认值，仅当属性值严格为 undefined 时生效

const { name, role = '普通用户' } = user;
console.log(role); // 普通用户

• 嵌套解构：提取深层嵌套对象的属性，适配接口返回的多层级数据结构

const data = {
  code: 200,
  result: {
    list: [],
    total: 10
  }
};
const { result: { total } } = data;
console.log(total); // 10

二、数组解构

按位置顺序从数组中提取值并赋值给变量，支持默认值、变量交换、忽略元素等能力。

• 基础语法：const 变量1, 变量2 = 数组
• 基础示例：

const arr = [1, 2, 3];
// 传统写法
const first = arr[0];
const second = arr[1];

// 数组解构写法
const [first, second] = arr;
console.log(first, second); // 1 2

• 忽略元素：通过空位跳过不需要的元素

const [, , third] = arr;
console.log(third); // 3

• 交换变量：无需临时变量即可完成两个变量的值交换

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

• 默认值：对应位置元素为 undefined 时触发默认值

const [x, y, z = 0] = [1, 2];
console.log(z); // 0

三、参数解构

在函数参数中直接使用解构语法，直接提取传入对象 / 数组的属性，无需在函数体内二次取值，尤其适合配置项类参数。

• 对象参数解构（最常用，适合多参数函数）

// 传统写法：需要手动从参数对象中取值
function getUserInfo(user) {
  console.log(user.name, user.age);
}

// 参数解构写法，同时支持默认值
function getUserInfo({ name, age = 18 }) {
  console.log(name, age);
}

getUserInfo({ name: '张三', age: 25 }); // 张三 25

• 典型场景：封装组件、请求函数时，配置项参数通过对象解构接收，同时设置默认配置，提升代码可读性与健壮性。

---

1.6.2 扩展运算符与剩余参数

扩展运算符（...）与剩余参数（...）语法形式相同，但作用与使用场景完全相反：

扩展运算符用于将可迭代对象 "展开" 为独立的元素，剩余参数用于将独立的元素 "收集" 为数组。二者是数组、对象操作与函数参数处理的核心语法。

一、扩展运算符

扩展运算符可以展开数组、对象、字符串等可迭代结构，常用于数据合并、浅拷贝、参数传递等场景。

1. 数组扩展

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

// 数组合并
const merged = [...arr1, ...arr2]; // [1,2,3,4,5,6]

// 数组浅拷贝
const copy = [...arr1];

// 在指定位置插入元素
const newArr = [0, ...arr1, 4]; // [0,1,2,3,4]

1. 对象扩展

const base = { a: 1, b: 2 };
const extra = { c: 3, b: 4 };

// 对象合并，后面的属性会覆盖前面的同名属性
const mergedObj = { ...base, ...extra }; // {a:1, b:4, c:3}

// 对象浅拷贝
const objCopy = { ...base };

// 新增属性并覆盖原有属性
const newObj = { ...base, d: 4 }; // {a:1, b:2, d:4}

1. 函数调用传参
2. 将数组元素展开作为函数的独立参数，替代传统的 apply 写法。

const nums = [1, 2, 3];
// 传统写法
Math.max.apply(null, nums); // 3

// 扩展运算符写法
Math.max(...nums); // 3

二、剩余参数

在函数形参中使用 ...，将传入的多个实参收集为一个数组，用于处理不定数量的参数，是传统 arguments 对象的现代替代方案。

• 基础语法：function fn(...args) {}
• 基础示例：

// 求和函数，支持任意数量参数
function sum(...nums) {
  return nums.reduce((prev, cur) => prev + cur, 0);
}

sum(1, 2, 3); // 6
sum(1, 2, 3, 4, 5); // 15

• 与解构结合使用：提取部分参数后，将剩余内容收集起来

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2,3,4]

const { name, ...other } = { name: '张三', age: 25, gender: '男' };
console.log(other); // {age:25, gender:'男'}

注意：剩余参数必须放在参数列表的最后一位，不能出现在中间或开头。

---

1.6.3 可选链？. 与空值合并？？

可选链与空值合并运算符是 ES2020 引入的语法，专门用于优化深层属性访问与默认值处理的代码，能够大幅简化边界判断，避免因属性不存在导致的运行时报错，是处理接口返回的不确定数据的必备语法。

一、可选链操作符？.

可选链操作符用于安全访问对象的深层嵌套属性，当访问链中某一层的值为 null 或 undefined 时，表达式会直接返回 undefined，而不会抛出错误，替代传统的多层 && 防御式判断。

• 基础语法：obj?.prop、obj?.expr、fn?.()
• 基础示例：

const user = {
  name: '张三',
  address: null
};

// 传统写法：层层判断，避免 Cannot read properties of null 报错
const city = user && user.address && user.address.city;

// 可选链写法
const city = user?.address?.city;
console.log(city); // undefined，不会报错

• 支持的场景：
  • 对象属性访问：user?.name
  • 动态属性访问：user?.'name'
  • 函数调用：handleSubmit?.()，函数存在才执行，不存在则返回 undefined
  • 数组访问：list?.0，数组存在才访问对应下标
• 典型场景：处理后端接口返回的嵌套数据，无需层层判空即可安全访问深层字段，显著减少冗余的防御代码。

二、空值合并运算符？？

空值合并运算符是一个逻辑运算符，当左侧操作数为 null 或 undefined 时，返回右侧操作数；否则返回左侧操作数。它专门用于设置默认值，解决了传统 || 运算符会将所有假值（0、''、false）都替换为默认值的问题。

• 对比示例：

const count = 0;

// || 写法：0 被视为假值，会返回默认值，不符合业务预期
const count1 = count || 10; // 10

// ?? 写法：仅 null/undefined 才返回默认值，0 是有效值，正常返回
const count2 = count ?? 10; // 0

• 常见使用场景：

// 表单字段默认值
const username = formData.username ?? '未设置';

// 接口分页参数默认值
const pageSize = params.pageSize ?? 20;

三、组合使用

可选链与空值合并通常搭配使用，实现「安全访问 + 兜底默认值」的完整逻辑，是接口数据处理的标准写法。

// 安全获取用户所在城市，不存在则返回"未知"
const city = user?.address?.city ?? '未知';

---

1.6.4 模板字符串与标签模板

模板字符串是 ES6 引入的新型字符串语法，使用反引号包裹，支持多行字符串、变量插值与表达式嵌入，彻底替代了传统的字符串拼接写法，在动态文本生成、HTML 结构拼接等交互场景中广泛使用。标签模板是其高级用法，可自定义模板的解析逻辑。

一、模板字符串

• 基础语法：使用反引号 ` 包裹字符串，通过 ${表达式} 嵌入变量或任意 JavaScript 表达式
• 核心特性与示例：

1. 变量插值

const name = '张三';
const age = 25;

// 传统字符串拼接
const str1 = '姓名：' + name + '，年龄：' + age;

// 模板字符串
const str2 = `姓名：${name}，年龄：${age}`;

1. 多行字符串
2. 无需手动拼接换行符，直接换行书写即可，适合拼接 DOM 结构。

const html = `
  <div class="card">
    <h3>${title}</h3>
    <p>${content}</p>
  </div>
`;

1. 嵌入表达式
2. ${} 中可以放入任意 JavaScript 表达式，包括运算、函数调用、三元判断。

const score = 85;
const levelText = `等级：${score >= 60 ? '及格' : '不及格'}`;

二、标签模板

标签模板是模板字符串的高级用法，在模板字符串前紧跟一个函数名，该函数会自动接收模板的字符串片段与插值结果，可自定义处理逻辑，实现字符串过滤、国际化、语法转义等能力。

• 基础示例：

// 定义标签函数
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] ? `<span class="highlight">${values[i]}</span>` : '';
    return result + str + value;
  }, '');
}

const name = '张三';
const result = highlight`用户：${name}，操作成功`;
// 结果：用户：<span class="highlight">张三</span>，操作成功

• 典型应用场景：HTML 字符转义防止 XSS、多语言国际化文案处理、SQL 语句预处理等。