在 ES6（ECMAScript 2015）带来的众多新特性中，解构赋值（Destructuring Assignment）堪称开发者的 "效率神器"。它通过简洁的语法实现对数组和对象中数据的快速提取，极大提升了数据处理的便利性。本文将从基础语法到高级应用，全面解析这一核心特性。
一、解构赋值的核心概念
解构赋值是一种基于模式匹配的赋值语法，允许从数组或对象中提取数据，赋值给多个变量。
在 ES6 之前，提取数组或对象中的值需要繁琐的操作：
// 数组取值
const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];// 对象取值
const obj = { x: 10, y: 20 };
const xVal = obj.x;
const yVal = obj.y;
解构赋值通过模式匹配简化了这一过程，使代码更简洁易读。
二、数组解构
数组解构是按照数组元素的位置进行匹配赋值的。
1.基本数组解构
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
2. 忽略某些元素
可以使用逗号来跳过数组中的某些元素。
const arr = [1, 2, 3, 4];
const [, second, , fourth] = arr;
console.log(second); // 2
console.log(fourth); // 4
3. 默认值
当数组中对应位置的值为 undefined 时，可以为变量设置默认值。
const arr = [1];
const [first, second = 2] = arr;
console.log(first); // 1
console.log(second); // 2
second=2的意思是second没有赋值，本来默认=undefined，设置为默认=2
4.嵌套数组解构
可以对嵌套数组进行解构。
const arr = [1, [2, 3], 4];
const [first, [innerFirst, innerSecond], third] = arr;
console.log(first); // 1
console.log(innerFirst); // 2
console.log(innerSecond); // 3
console.log(third); // 4
5. 剩余元素
使用扩展运算符 ... 可以将剩余的数组元素收集到一个新数组中。
const arr = [1, 2, 3, 4];
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [2, 3, 4]6.使用解构方式实现两数交换
方式一:使用中间变量temp
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Error Test</title>
</head><body><script>let a = 10;let b = 20;console.log("a=" + a, "b=" + b)let temp;temp = a;a = b;b = temp;console.log("交换后a=" + a, "b=" + b)</script>
</body></html>
方式二：数学计算，没法用于字符串
let a = 10;let b = 20;console.log("a=" + a, "b=" + b)a = a + b;b = a - b;a = a - b;console.log("交换后a=" + a, "b=" + b)方式三：使用解构
let a = 10;let b = 20;console.log("a=" + a, "b=" + b);[a, b] = [b, a];console.log("交换后a=" + a, "b=" + b);
三、对象解构
数组解构与对象解构不同：数组解构是按顺序 一 一 解构，对象解构是根据对象的属性名进行匹配赋值的，与属性的顺序无关。
1.基本对象解构
const obj = { name: 'John', age: 30 };
const { name, age } = obj;
console.log(name); // 'John'
console.log(age); // 30
2.重命名变量
可以使用 属性名: 新变量名 的语法对解构出来的变量进行重命名。
const obj = { name: 'John', age: 30 };
const { name: personName, age: personAge } = obj;
console.log(personName); // 'John'
console.log(personAge); // 30
3.部分解构
const obj = { name: 'John', age: 30 };const { age } = obj;console.log(age); // 30let { address, name } = obj;console.log(address, name);//如果没有匹配到则变量值为undefined
4.嵌套对象解构
可以对嵌套对象进行解构。
const obj = {person: {name: 'John',age: 30},address: '123 Main St'
};
const { person: { name, age }, address } = obj;
console.log(name); // 'John'
console.log(age); // 30
console.log(address); // '123 Main St'
5.剩余属性
使用扩展运算符 ... 可以将剩余的属性收集到一个新对象中。
const obj = { name: 'John', age: 30, address: '123 Main St' };
const { name, ...rest } = obj;
console.log(name); // 'John'
console.log(rest); // { age: 30, address: '123 Main St' }
6.对象默认值
const obj = { name: 'John', age: 30, address: '天河区' };const { age, img = 'aaa.png', address = '黄浦区' } = obj;console.log(age);console.log(img);console.log(address);//address是对象里面有的，所以取对象里面的
7.对象解构使用场景：函数返回值
<script>{//场景1：函数返回值function fn() {return {name: '张三', age: 20, address: '天河区'}}let res = fn();//之前不解构的方式console.log(res.name, res.age, res.address);//解构方式let { name, age, address } = res;console.log(name, age, address);}</script>
三、字符串解构
字符串也可以进行解构，它会将字符串的每个字符按位置进行解构。
1.基本字符串解构
const str = 'hello';
const [a, b, c, d, e] = str;
console.log(a); // 'h'
console.log(b); // 'e'
console.log(c); // 'l'
console.log(d); // 'l'
console.log(e); // 'o'2.剩余字符
同样可以使用扩展运算符收集剩余的字符。
const str = 'hello';
const [first, ...rest] = str;
console.log(first); // 'h'
console.log(rest); // ['e', 'l', 'l', 'o']四、函数参数解构
函数参数解构是 ES6 解构赋值特性在函数参数传递时的应用，它允许你在定义函数参数时，直接对传入的数组或对象进行解构，从而更方便地获取其中的值。这样做能让函数参数的处理更加清晰、简洁，提高代码的可读性和可维护性。下面分别介绍数组参数解构和对象参数解构。
1.数组参数解构
在函数定义时，如果你期望传入的参数是一个数组，就可以使用数组解构来提取数组中的元素。
function add([num1, num2]) {return num1 + num2;
}const numbers = [3, 5];
const result = add(numbers);
console.log(result); // 输出 8
在上述代码中，add 函数的参数使用了数组解构 [num1, num2]。当调用 add 函数并传入一个数组 numbers 时，函数会自动将数组中的第一个元素赋值给 num1，第二个元素赋值给 num2，然后进行加法运算。
2.对象参数解构
当函数期望传入的参数是一个对象时，可以使用对象解构来提取对象中的属性。
function printPersonInfo({ name, age }) {console.log(`姓名: ${name}, 年龄: ${age}`);
}const person = { name: 'Alice', age: 25 };
printPersonInfo(person);
// 输出 姓名: Alice, 年龄: 25
在这个例子中，printPersonInfo 函数的参数使用了对象解构 { name, age }。调用函数时传入一个对象 person，函数会根据属性名将对象中的 name 和 age 属性值提取出来，并进行输出。
3.解构时设置默认值
在函数参数解构中，还可以为参数设置默认值，当传入的对象或数组中没有对应的值时，会使用默认值。
function greet({ name = 'Guest', age = 18 } = {}) {console.log(`你好, ${name}! 你今年 ${age} 岁了。`);
}greet({ name: 'Bob' });
// 输出 你好, Bob! 你今年 18 岁了。
greet();
// 输出 你好, Guest! 你今年 18 岁了。
在上述代码里，greet 函数的参数使用了对象解构，并且为 name 和 age 设置了默认值。当调用函数时，如果传入的对象中没有 name 或 age 属性，就会使用默认值。当不传入任何参数时，由于函数参数有默认的空对象 {}，所以也会使用默认值。
4.解构时重命名变量
也可以在解构时对变量进行重命名，以满足不同的代码需求。
function displayInfo({ name: personName, age: personAge }) {console.log(`这个人的姓名是 ${personName}, 年龄是 ${personAge}。`);
}const someone = { name: 'Charlie', age: 30 };
displayInfo(someone);
// 输出 这个人的姓名是 Charlie, 年龄是 30。
在 displayInfo 函数中，通过 { name: personName, age: personAge } 对传入对象的 name 和 age 属性进行解构并将其赋值给重命名后的变量 personName 和 personAge。
