js 解构语法

JavaScript 的解构语法是一种从数组或对象中提取值并赋给变量的简洁方式。

基础概念：

• 数组解构：可以按照一定的顺序从数组中提取值赋给变量。
• 对象解构：根据对象的属性名提取对应的值赋给变量。

优势：

• 代码更简洁、易读，提高了代码的可维护性。
• 可以方便地交换变量的值，而无需使用临时变量。

类型：

• 数组解构：例如 let [a, b] = [1, 2]; ，这里 a 被赋值为 1 ， b 被赋值为 2 。
• 对象解构：比如 let {name, age} = {name: 'John', age: 25}; ，此时 name 的值为 'John' ， age 的值为 25 。

应用场景：

• 函数参数传递：使函数接收参数更清晰。
• 交换变量值：如 let [a, b] = [b, a]; 。
• 从复杂的对象或数组中提取所需的特定部分。

可能出现的问题及解决方法：

• 变量未定义：如果解构的数组或对象中不存在对应的值，变量会被赋值为 undefined 。解决方法是提供默认值，例如 let [a = 10] = []; ，此时 a 的值为 10 。
• 属性不存在：对象解构时如果属性不存在，变量为 undefined 。可通过可选链操作符 ?. 或提前判断属性是否存在来处理。

示例代码：

// 数组解构交换变量值
let x = 5;
let y = 10;
[x, y] = [y, x];
console.log(x, y); // 输出 10 5

// 对象解构并提供默认值
let {width = 800, height = 600} = {width: 1024};
console.log(width, height); // 输出 1024 600