【转】[JavaScript] 解构赋值

转自：kimi.ai

解构赋值（Destructuring Assignment）是 JavaScript 中一种非常强大的语法特性，用于从数组或对象中快速提取数据并赋值给变量。它可以让代码更简洁、更易读。

1. 数组解构赋值

数组解构赋值允许你从数组中按顺序提取值，并将它们赋值给变量。

1.1 基本用法

JavaScript复制

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

1.2 跳过某些值

如果你只需要数组中的部分值，可以通过跳过某些位置来实现：
JavaScript复制

let arr = [1, 2, 3, 4, 5]; let [a, , c, , e] = arr; console.log(a); // 输出：1 console.log(c); // 输出：3 console.log(e); // 输出：5

1.3 默认值

如果数组中的某些值不存在，可以为变量指定默认值：
JavaScript复制

let arr = [1, 2]; let [a, b, c = 3] = arr; console.log(a); // 输出：1 console.log(b); // 输出：2 console.log(c); // 输出：3（默认值）

1.4 嵌套数组

解构赋值也支持嵌套数组：
JavaScript复制

let arr = [1, [2, 3], 4]; let [a, [b, c], d] = arr; console.log(a); // 输出：1 console.log(b); // 输出：2 console.log(c); // 输出：3 console.log(d); // 输出：4

2. 对象解构赋值

对象解构赋值允许你从对象中提取属性值，并将它们赋值给变量。与数组不同的是，对象解构是通过属性名来提取值的。

2.1 基本用法

JavaScript复制

let obj = { name: "Alice", age: 25, city: "New York" }; let { name, age, city } = obj; console.log(name); // 输出：Alice console.log(age); // 输出：25 console.log(city); // 输出：New York

2.2 自定义变量名

你可以使用别名来为解构后的变量重新命名：
JavaScript复制

let obj = { name: "Alice", age: 25 }; let { name: fullName, age: years } = obj; console.log(fullName); // 输出：Alice console.log(years); // 输出：25

2.3 默认值

如果对象中某些属性不存在，可以为变量指定默认值：
JavaScript复制

let obj = { name: "Alice" }; let { name, age = 30 } = obj; console.log(name); // 输出：Alice console.log(age); // 输出：30（默认值）

2.4 嵌套对象

解构赋值也支持嵌套对象：
JavaScript复制

let obj = { name: "Alice", address: { city: "New York", zip: "10001" } }; let { name, address: { city, zip } } = obj; console.log(name); // 输出：Alice console.log(city); // 输出：New York console.log(zip); // 输出：10001

3. 解构赋值的高级用法

3.1 函数参数解构

你可以在函数参数中直接使用解构赋值，方便地提取对象或数组中的值：
JavaScript复制

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.2 解构赋值与扩展运算符结合

你可以结合解构赋值和扩展运算符来实现对象或数组的拆分和重组：
JavaScript复制

// 对象 let obj = { a: 1, b: 2, c: 3 }; let { a, ...rest } = obj; console.log(a); // 输出：1 console.log(rest); // 输出：{ b: 2, c: 3 } // 数组 let arr = [1, 2, 3, 4, 5]; let [first, ...rest] = arr; console.log(first); // 输出：1 console.log(rest); // 输出：[2, 3, 4, 5]

4. 注意事项

1. 解构赋值的顺序：
   • 对于数组，解构赋值是按顺序提取值的。
   • 对于对象，解构赋值是通过属性名提取值的，顺序无关紧要。
2. 默认值的使用：
   • 默认值只有在属性或元素不存在时才会生效。如果属性值为 undefined，默认值也会生效。
3. 解构赋值的解引用问题：
   • 如果解构的对象或数组不存在，会导致运行时错误。例如： JavaScript复制

     let { a } = undefined; // TypeError: Cannot destructure property 'a' of 'undefined' as it is undefined.

4. 解构赋值的简洁性：
   • 解构赋值可以大大简化代码，但过度使用可能会导致代码可读性下降。在使用时需要权衡。

总结

解构赋值是 JavaScript 中非常实用的特性，它不仅可以简化代码，还可以提高代码的可读性和可维护性。无论是数组解构还是对象解构，都可以灵活地提取数据，并结合默认值、嵌套结构等高级用法来满足复杂的场景需求。

来源链接：https://www.cnblogs.com/z5337/p/18681317