ES6 解构：语法、规则与大厂面试考点精析
在 ES6 的新特性中，解构赋值无疑是提升代码简洁性的核心语法之一。
一、解构的核心规则
- 匹配规则：解构本质是 “模式匹配”—— 数组按索引顺序匹配，对象按属性名匹配，不匹配的变量会赋值为
undefined。 - 解构默认值：当提取的值为
undefined时，会触发默认值（需注意：null、0、''等 falsy 值不会触发）。 - 不完全解构：允许只提取部分数据，剩余未匹配的结构不会影响解构结果。
- 可嵌套解构：支持数组、对象的多层嵌套，嵌套结构需与原数据格式一致。
- 解构失败处理：若解构目标为
null或undefined，会抛出 TypeError，需提前确保目标存在。 - 非数组 / 对象的解构适配：字符串、数值、布尔值解构时会先转为对象（
null/undefined除外），可提取其原生属性。
二、常用语法速览
1. 数组解构
// 基础用法（按索引匹配）
const [a, b] = [1, 2]; // a=1，b=2
// 跳过元素
const [, c, d] = [3, 4, 5]; // c=4，d=5
// 剩余元素（rest运算符）
const [x, ...y] = [6, 7, 8]; // x=6，y=[7,8]
// 默认值
const [p = 10] = []; // p=10（解构值为undefined时触发）
2. 对象解构
// 基础用法（按属性名匹配）
const { name, age } = { name: '张三', age: 20 }; // name='张三'，age=20
// 别名赋值（解决变量名冲突）
const { id: userId } = { id: 1001 }; // userId=1001
// 嵌套解构
const { user: { address } } = { user: { address: '北京' } }; // address='北京'
// 默认值
const { gender = '男' } = { name: '李四' }; // gender='男'
3. 字符串解构
字符串解构的本质是：将字符串转为 “类数组对象”（具备索引和length属性），因此既可以按索引提取字符，也能提取其length属性。
// 按索引提取字符
const [a, b, c, d, e] = 'hello'; // a='h'，b='e'，c='l'，d='l'，e='o'
// 提取length属性（新增示例）
let { length: len } = 'hello';
// 解释：
// 1. 字符串'hello'被转为类数组对象，该对象包含原生属性length（值为5）；
// 2. 解构时按属性名匹配'length'，并通过别名赋值给变量len；
// 3. 最终len = 5
len // 5
4. 其他常用场景
-
数值 / 布尔值解构（提取原型方法）：
const { toString: numToString } = 123; numToString === Number.prototype.toString; // true -
函数参数解构（简化参数处理）：
function fn({ name, age = 18 }) { console.log(name, age); } fn({ name: '王五' }); // 王五 18
三、大厂面试高频考点
- 解构默认值的触发条件：考点：
const [a = 1] = [null];中 a 的值是多少？（答案：null，只有解构值为undefined才触发默认值）。 - 对象解构的属性名与变量名差异：考点：如何提取对象中
let属性（关键字冲突）？（答案：使用别名const { let: myLet } = { let: 10 };）。 - 嵌套解构的错误处理：考点：
const { user: { address } } = { name: '赵六' };会报错吗？（答案：会，user为undefined，无法解构address，需加默认值const { user: { address } = {} } = { name: '赵六' };）。 - rest 运算符与解构结合：考点：
const [a, ...b] = [1, 2, 3, 4];中 b 的类型是什么？（答案：数组[2,3,4]，rest 运算符仅能作为最后一个元素）。 - 函数参数解构的应用：考点：如何简化 React 组件的 props 传递？（答案：
const Component = ({ name, age }) => <div>{name}{age}</div>）。 - 字符串解构的特殊用法（新增考点）：考点：
const { length: l } = 'es6';中 l 的值是多少？（答案：3，字符串转为类数组对象后可提取 length 属性）。
总结
解构的核心是 “模式匹配 + 简洁赋值”。
