JavaScript 提取 对象/数组 中的数据，解构赋值 更方便？
在 JavaScript 中，解构赋值（Destructuring Assignment）是一种 非常方便的 语法，它允许你从 数组 或 对象 中 提取值，并将它们 赋值给 不同的 变量。解构赋值 可以使代码 更加简洁 且 易于理解，尤其是在 处理 多个变量赋值 时。
1 数组 解构赋值
数组解构 允许你将 数组中的 元素 赋值给 变量。
1.1 基本语法
// 示例代码 1
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3
上面代码中（示例代码 1），变量 a、b、c 分别接收 数组 arr 中的 第一个、第二个 和 第三个 元素。
1.2 跳过元素
你可以通过 省略 变量名 来 跳过 数组中的 某些元素。
// 示例代码 2
const arr = [1, 2, 3];
const [a, , c] = arr; // 跳过第二个元素
console.log(a); // 输出 1
console.log(c); // 输出 3
1.3 默认值
如果 数组中 某个位置 没有值，解构时 可以为其 指定 默认值。
// 示例代码 3
const arr = [1];
const [a, b = 2] = arr; // 如果 b 没有值，默认是 2
console.log(a); // 输出 1
console.log(b); // 输出 2
1.4 剩余元素（Rest Syntax）
你可以使用 剩余语法（...）来收集 剩余的 元素。
// 示例代码 4
const arr = [1, 2, 3, 4, 5];
const [a, b, ...rest] = arr;
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(rest); // 输出 [3, 4, 5]
2 对象 解构赋值
对象解构 允许你从 对象中 提取 属性，并将它们 赋值给 变量。
2.1 基本语法
// 示例代码 5
const person = {
name: "Alice",
age: 25
};
const { name, age } = person;
console.log(name); // 输出 "Alice"
console.log(age); // 输出 25
解构时，变量名 需要与 对象中的 属性名 一致。
2.2 重新 命名变量
如果想要将 对象的属性 赋值给 不同的 变量名，可以在解构时 使用 : 来 重新命名。
// 示例代码 6
const person = {
name: "Alice",
age: 25
};
const { name: personName, age: personAge } = person;
console.log(personName); // 输出 "Alice"
console.log(personAge); // 输出 25
2.3 属性默认值
如果 对象中的 某个属性 没有值，可以为它 指定 一个默认值。
// 示例代码 7
const person = {
name: "Alice"
};
const { name, age = 30 } = person;
console.log(name); // 输出 "Alice"
console.log(age); // 输出 30
2.4 嵌套结构
当 对象 或 数组 嵌套时，你可以使用 解构语法 进行 多层解构。
// 示例代码 8
const person = {
name: "Alice",
address: {
city: "Wonderland",
zip: "12345"
}
};
const { name, address: { city, zip } } = person;
console.log(name); // 输出 "Alice"
console.log(city); // 输出 "Wonderland"
console.log(zip); // 输出 "12345"
2.5 剩余属性（Rest Syntax）
你可以使用 剩余语法（...）来收集 剩余的 属性。
// 示例代码 9
const person = {
name: "Alice",
age: 25,
city: "Wonderland"
};
const { name, ...rest } = person;
console.log(name); // 输出 "Alice"
console.log(rest); // 输出 { age: 25, city: "Wonderland" }
3 函数参数 解构赋值
解构赋值 也可以用在 函数的 参数 中，允许你在 调用函数时 直接解构 传入的 对象 或 数组。
3.1 数组 作为函数参数传入
// 示例代码 10
function sum([a, b]) {
return a + b;
}
console.log(sum([1, 2])); // 输出 3
3.2 对象 作为函数参数传入
// 示例代码 11
function greet({ name, age }) {
console.log(`Hello, ${name}. You are ${age} years old.`);
}
greet({ name: "Alice", age: 25 }); // 输出 "Hello, Alice. You are 25 years old."
3.3 带有默认值的 参数
// 示例代码 12
function greet({ name = "Guest", age = 18 }) {
console.log(`Hello, ${name}. You are ${age} years old.`);
}
greet({}); // 输出 "Hello, Guest. You are 18 years old."
greet({ name: "Bob" }); // 输出 "Hello, Bob. You are 18 years old."
4 注意事项
4.1 解构赋值的顺序
对于 数组解构，赋值的顺序 是 从左到右的。
// 示例代码 13
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 输出 1 2 3
对于 对象解构，赋值的顺序 并不重要，因为它是 根据属性名 进行匹配的。
// 示例代码 14
const obj = { a: 1, b: 2 };
const { b, a } = obj;
console.log(a, b); // 输出 1 2
4.2 undefined 和 null
解构时，如果 对象的属性 未定义，并且解构时 没有默设置认值，那么会被赋值为 undefined。但如果属性是 null，会被赋值为 null。
