解构
在 JavaScript 中，解构（Destructuring）是一种简洁的语法，用于从数组或对象中提取值，并将它们分配给变量。解构可以大大简化代码，提高可读性和可维护性。
数组解构
数组解构允许你从数组中提取值并分配给变量。
基本用法
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
跳过元素
你可以跳过数组中的某些元素：
const arr = [1, 2, 3];
const [a, , c] = arr;
console.log(a); // 1
console.log(c); // 3
默认值
在解构时，可以为变量指定默认值：
const arr = [1];
const [a, b = 2] = arr;
console.log(a); // 1
console.log(b); // 2
嵌套解构
数组中包含数组时，可以进行嵌套解构：
const arr = [1, [2, 3]];
const [a, [b, c]] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
对象解构
对象解构允许你从对象中提取属性值，并将它们分配给变量。
基本用法
const obj = { x: 1, y: 2, z: 3 };
const { x, y, z } = obj;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3
重命名变量
你可以将提取的属性值分配给不同名称的变量：
const obj = { x: 1, y: 2 };
const { x: a, y: b } = obj;
console.log(a); // 1
console.log(b); // 2
默认值
在解构时，可以为变量指定默认值：
const obj = { x: 1 };
const { x, y = 2 } = obj;
console.log(x); // 1
console.log(y); // 2
嵌套解构
对象中包含对象时，可以进行嵌套解构：
const obj = { a: { b: 1, c: 2 } };
const { a: { b, c } } = obj;
console.log(b); // 1
console.log(c); // 2
剩余属性
使用剩余属性（rest properties）可以将剩余的未解构属性收集到一个新对象中：
const obj = { x: 1, y: 2, z: 3 };
const { x, ...rest } = obj;
console.log(x); // 1
console.log(rest); // { y: 2, z: 3 }
函数参数解构
解构不仅可以用于变量声明，也可以用于函数参数。
数组参数解构
function sum([a, b]) {
return a + b;
}
console.log(sum([1, 2])); // 3
对象参数解构
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
greet({ name: 'Alice', age: 25 }); // Hello, my name is Alice and I am 25 years old.
使用解构可以让代码更加简洁、易读，尤其在处理函数参数和复杂的数据结构时，解构能显著提升代码的可维护性和可读性。
通过...解构
在 JavaScript 中，使用扩展运算符（...）进行解构是一种强大的技术，可以帮助我们处理剩余元素或将数组或对象的部分内容解构出来。下面是详细的用法和示例：
数组解构中的扩展运算符
剩余元素
扩展运算符可以用于数组解构中的剩余元素，将剩余的元素收集到一个新数组中：
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
在这个例子中，rest 是一个数组，包含了解构后剩余的元素 [3, 4, 5]。
函数参数中的数组解构
扩展运算符可以用于函数参数，接收不确定数量的参数并将它们收集到一个数组中：
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22
在这个例子中，...numbers 将所有传递给 sum 函数的参数收集到一个数组中，然后使用 reduce 方法对它们求和。
对象解构中的扩展运算符
剩余属性
扩展运算符也可以用于对象解构，将对象中剩余的属性收集到一个新对象中：
const person = { name: 'Alice', age: 25, city: 'Wonderland' };
const { name, ...rest } = person;
console.log(name); // 'Alice'
console.log(rest); // { age: 25, city: 'Wonderland' }
在这个例子中，rest 是一个对象，包含了解构后剩余的属性 { age: 25, city: 'Wonderland' }。
嵌套对象解构
对于嵌套对象，可以结合解构和扩展运算符提取部分属性并保留其余属性：
const person = { name: 'Alice', address: { city: 'Wonderland', street: 'Main St' }, age: 25 };
const { name, address: { city, ...restAddress }, ...rest } = person;
console.log(name); // 'Alice'
console.log(city); // 'Wonderland'
console.log(restAddress); // { street: 'Main St' }
console.log(rest); // { age: 25 }
在这个例子中，restAddress 是一个对象，包含了解构后 address 对象中剩余的属性 { street: 'Main St' }。
扩展运算符的其他用法
扩展运算符还可以用于数组和对象的合并：
合并数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]
合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combined = { ...obj1, ...obj2 };
console.log(combined); // { a: 1, b: 2, c: 3, d: 4 }
使用扩展运算符进行解构和合并，不仅简洁而且灵活，可以帮助我们更有效地处理复杂的数据结构。
复杂解构
嵌套数组
const arr = [1, [2, 3], 4];
const [a, [b, c], d] = arr;
console.log(a, b, c, d) // 1 2 3 4
const [e, f] = arr;
console.log(e, f) // 1 [ 2, 3 ]
const [g, h, i, j=18] = arr
console.log(g, h, i, j) // 1 [ 2, 3 ] 4 18
const [k, ...l] = arr
console.log(k, l) // 1 [ [ 2, 3 ], 4 ]
嵌套对象
示例1
- 通过解构的方式，同时提取出3个a的值
let obj = {
a:10,
b:[
{
a:100,
b:'abc',
c:[1,2,3]
},
{
a:1000,
b:'abcd',
c:['a', 'b']
}
]
}
const {
a: a1,
b: [
{ a: a2 },
{ a: a3 }
]
} = obj;
console.log(a1); // 10
console.log(a2); // 100
console.log(a3); // 1000
const { a: a1, b: [ { a: a2 }, { a: a3 } ] } = obj;通过对象和数组的解构赋值，同时提取出了三个a的值。a1对应的是obj对象的顶层a，即10。a2对应的是obj.b[0]对象中的a，即100。a3对应的是obj.b[1]对象中的a，即1000。