ES6 之解构赋值
解构赋值是 ES6 中的一项重要特性，它能够从数组或对象中提取值，并将其赋给变量。通过解构赋值，代码可以更简洁，且更具可读性。
什么是解构？
正统解释： 按照一定模式，从数组和对象中提取值，然后对变量进行赋值。
直白理解： 解构赋值可以看作是模式匹配，只要等式两边的模式一致，左边的变量就会自动被赋值为右边相应的值。
数组解构
变量声明并赋值时的解构
ES6 允许我们在声明变量时直接进行解构赋值，以下是一个简单的示例：
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
此时，数组 [1, 2] 的第一个元素 1 被赋给变量 a，第二个元素 2 被赋给变量 b。
变量先声明后赋值时解构
如果你先声明变量后再进行解构，可以通过如下方式进行：
let a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
这种方式对于需要先声明变量再进行赋值的情况非常有用。
默认值
解构赋值时，如果从数组中取出的值为 undefined，可以为其设置默认值，防止出现 undefined。
const [a = 10, b = 20] = [1];
console.log(a); // 1
console.log(b); // 20
在上面的示例中，a 被赋值为 1，但是 b 没有对应的值，因此使用默认值 20。
交换变量
在没有解构赋值的情况下，交换两个变量通常需要一个临时变量，但使用解构赋值，可以直接交换：
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1
解析一个从函数中返回的数组
函数返回数组时，可以通过解构直接获取其中的元素：
function getCoordinates() {
return [10, 20];
}
const [x, y] = getCoordinates();
console.log(x); // 10
console.log(y); // 20
忽略某些返回值
如果函数返回的数组有多项，而你不关心其中某些值，可以使用逗号进行忽略：
const [x, , y] = [10, 20, 30];
console.log(x); // 10
console.log(y); // 30
将剩余数组赋值给一个变量
通过剩余运算符 ...，你可以将数组中剩余的元素赋给一个变量：
const [x, ...rest] = [1, 2, 3, 4];
console.log(x); // 1
console.log(rest); // [2, 3, 4]
注意： 剩余元素必须是数组的最后一个元素，否则会抛出 SyntaxError 错误。
用正则表达式匹配提取值
使用正则表达式方法 exec() 匹配字符串时，它会返回一个数组，解构赋值可以提取出需要的部分：
const regex = /(\d+)/;
const [match, number] = regex.exec("The number is 42");
console.log(match); // "42"
console.log(number); // "42"
对象解构
基本赋值
对象解构赋值可以直接提取对象的属性并将其赋给变量：
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25
无声明赋值
如果不事先声明变量，也可以直接在解构时进行赋值，语法如下：
const { name, age } = { name: 'Bob', age: 30 };
console.log(name); // Bob
console.log(age); // 30
给新的变量名赋值
如果想为解构的值起一个新的变量名，可以在解构时指定新的变量名：
const person = { name: 'Charlie', age: 35 };
const { name: fullName, age: years } = person;
console.log(fullName); // Charlie
console.log(years); // 35
默认值
在对象解构时，也可以为属性提供默认值：
const person = { name: 'David' };
const { name, age = 40 } = person;
console.log(name); // David
console.log(age); // 40
给新的变量名并提供默认值
你可以结合给变量新名字和设置默认值来一起使用：
const person = { name: 'Eve' };
const { name: fullName, age = 25 } = person;
console.log(fullName); // Eve
console.log(age); // 25
函数参数解构
解构赋值不仅可以用在变量声明时，也可以在函数参数中进行解构，从而方便地提取对象或数组中的值：
// ES5
function greet(person) {
const { name, age } = person;
console.log(`Hello ${name}, you are ${age} years old.`);
}
greet({ name: 'Frank', age: 28 });
// ES6
function greet({ name, age }) {
console.log(`Hello ${name}, you are ${age} years old.`);
}
greet({ name: 'Grace', age: 30 });
解构嵌套对象和数组
解构赋值还可以用于嵌套的对象和数组，提取嵌套的值：
const person = {
name: 'Hannah',
address: {
city: 'New York',
zip: 10001
}
};
const { name, address: { city, zip } } = person;
console.log(name); // Hannah
console.log(city); // New York
console.log(zip); // 10001
对于数组的嵌套解构：
const arr = [1, [2, 3]];
const [a, [b, c]] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
for...of 迭代和解构
for...of 循环与解构结合使用时，可以遍历数组并解构每个元素：
const arr = [['name', 'Alice'], ['age', 25], ['city', 'NYC']];
for (const [key, value] of arr) {
console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 25
// city: NYC
从作为实参的函数参数的对象中提取数据
如果函数的参数是一个对象，我们可以直接解构该对象来获取它的值：
function printUserInfo({ name, age }) {
console.log(`${name} is ${age} years old.`);
}
const user = { name: 'Ivy', age: 40 };
printUserInfo(user); // Ivy is 40 years old.
解构赋值是 ES6 中非常强大的特性，可以极大地提高代码的简洁性和可读性。无论是数组还是对象解构，它都提供了更多灵活的方式来提取和赋值数据。通过嵌套解构、默认值、剩余操作符等特性，开发者可以编写更加简洁而高效的代码。
评论区