JavaScript 解构赋值详解
JavaScript 的解构赋值是一种简洁的语法，用于将数组元素或对象属性快速赋值给多个变量。它使代码更易读、更易维护。
1. 数组解构
数组解构允许你从数组中提取值并分别赋值给变量。
示例：
<code class="javascript">const fruits = ["苹果", "香蕉", "樱桃"]; const [first, second, third] = fruits; console.log(first); // 输出：苹果 console.log(second); // 输出：香蕉 console.log(third); // 输出：樱桃</code>
a. 跳过元素
可以通过在逗号之间留空来跳过数组元素。
立即学习“Java免费学习笔记（深入）”；
示例：
<code class="javascript">const numbers = [1, 2, 3, 4, 5]; const [first, , third] = numbers; console.log(first); // 输出：1 console.log(third); // 输出：3</code>
b. 默认值
如果数组元素未定义，可以使用默认值。
示例：
<code class="javascript">const colors = ["红色"]; const [primary, secondary = "蓝色"] = colors; console.log(primary); // 输出：红色 console.log(secondary); // 输出：蓝色</code>
c. 剩余运算符
使用剩余运算符 ... 将剩余元素收集到一个新的数组中。
示例：
<code class="javascript">const numbers = [1, 2, 3, 4]; const [first, ...rest] = numbers; console.log(first); // 输出：1 console.log(rest); // 输出：[2, 3, 4]</code>
2. 对象解构
对象解构将对象的属性值赋值给变量。
示例：
<code class="javascript">const person = { 姓名: "Alice", 年龄: 25, 国家: "美国" };
const { 姓名, 年龄 } = person;
console.log(姓名); // 输出：Alice
console.log(年龄); // 输出：25</code>
a. 重命名变量
可以使用冒号 : 为解构的变量重新命名。
示例：
<code class="javascript">const person = { 姓名: "Alice", 年龄: 25 };
const { 姓名: 全名, 年龄: 岁数 } = person;
console.log(全名); // 输出：Alice
console.log(数年); // 输出：25</code>
b. 默认值
如果属性不存在，可以使用默认值。
示例：
<code class="javascript">const person = { 姓名: "Alice" };
const { 姓名, 年龄 = 30 } = person;
console.log(姓名); // 输出：Alice
console.log(年龄); // 输出：30</code>
c. 嵌套对象解构
可以解构嵌套对象的属性。
示例：
<code class="javascript">const employee = {
id: 101,
details: { 姓名: "Bob", 职位: "开发者" },
};
const { details: { 姓名, 职位 } } = employee;
console.log(姓名); // 输出：Bob
console.log(职位); // 输出：开发者</code>
d. 剩余运算符
使用剩余运算符 ... 收集剩余的属性。
示例：
<code class="javascript">const person = { 姓名: "Alice", 年龄: 25, 国家: "美国" };
const { 姓名, ...others } = person;
console.log(姓名); // 输出：Alice
console.log(others); // 输出：{ 年龄: 25, 国家: "美国" }</code>
3. 混合解构
可以同时使用数组和对象解构。
示例：
<code class="javascript">const data = {
id: 1,
items: ["苹果", "香蕉", "樱桃"],
};
const { id, items: [firstItem] } = data;
console.log(id); // 输出：1
console.log(firstItem); // 输出：苹果</code>
4. 函数参数解构
可以直接在函数参数中使用解构。
a. 数组解构作为参数：
<code class="javascript">function sum([a, b]) {
return a + b;
}
console.log(sum([5, 10])); // 输出：15</code>
b. 对象解构作为参数：
<code class="javascript">function greet({ 姓名, 年龄 }) {
return `你好，${姓名}。你${年龄}岁了。`;
}
console.log(greet({ 姓名: "Alice", 年龄: 25 })); // 输出：你好，Alice。你25岁了。</code>
5. 实际应用场景
- 交换变量
- 函数返回多个值
- 处理 API 响应
6. 总结
解构赋值使 JavaScript 代码更简洁、更易读。熟练掌握解构赋值可以显著提高代码效率和可维护性。
作者：Abhay Singh Kathayat
全栈开发者，精通多种编程语言和框架。联系邮箱：kaashshorts28@gmail.com
