js实现解构赋值

解构赋值的基本概念

解构赋值是JavaScript中一种便捷的语法，允许从数组或对象中提取值并赋值给变量。这种语法简化了代码，提高了可读性。

数组解构赋值

数组解构通过匹配数组的位置来提取值。左侧的变量名与右侧数组的索引位置一一对应。

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 输出: 1 2 3

跳过某些元素可以通过留空实现：

const [x, , z] = [10, 20, 30];
console.log(x, z); // 输出: 10 30

剩余元素可以通过...语法收集：

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

对象解构赋值

对象解构通过属性名匹配来提取值。变量名需与对象属性名一致。

const obj = { name: 'Alice', age: 25 };
const { name, age } = obj;
console.log(name, age); // 输出: Alice 25

重命名变量可以使用冒号指定新名称：

const { name: userName, age: userAge } = obj;
console.log(userName, userAge); // 输出: Alice 25

嵌套对象解构可以通过多层结构实现：

const nested = { info: { id: 1, value: 'test' } };
const { info: { id, value } } = nested;
console.log(id, value); // 输出: 1 test

默认值设置

解构时可以指定默认值，当解构的值为undefined时生效。

数组解构默认值：

const [p = 1, q = 2] = [100];
console.log(p, q); // 输出: 100 2

对象解构默认值：

const { role = 'guest' } = {};
console.log(role); // 输出: guest

函数参数解构

解构赋值常用于函数参数的提取，简化参数处理。

数组参数解构：

function sum([a, b]) {
  return a + b;
}
console.log(sum([5, 10])); // 输出: 15

对象参数解构：

function greet({ name, greeting = 'Hello' }) {
  return `${greeting}, ${name}!`;
}
console.log(greet({ name: 'Bob' })); // 输出: Hello, Bob!

混合解构与复杂场景

数组和对象解构可以混合使用，处理复杂数据结构。

const data = {
  items: ['apple', 'banana'],
  meta: { page: 1, total: 10 }
};
const { items: [fruit1, fruit2], meta: { page } } = data;
console.log(fruit1, fruit2, page); // 输出: apple banana 1

注意事项

• 解构赋值的右侧必须是可迭代对象（数组）或对象。
• 变量声明（如const/let）必须与解构模式在同一语句中完成。
• 嵌套解构时需确保父级属性存在，否则会抛出错误。可通过默认值避免：

  const { missing: { child } = {} } = {};