-
数组解构
-
基本解构
-
数组解构是将数组中的元素提取出来并赋值给变量的一种方式。例如，对于数组
[1, 2, 3]，可以这样解构：
-
-
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
-
解构的变量顺序要与数组元素的顺序相对应，
a被赋值为数组的第一个元素，b为第二个元素，c为第三个元素。 -
部分解构和跳过元素
-
可以选择性地提取数组中的部分元素，通过使用逗号来跳过某些位置。例如：
-
let [, second,, fourth] = [1, 2, 3, 4];
console.log(second); // 2
console.log(fourth); // 4
-
这里第一个和第三个元素被跳过，只获取了第二个和第四个元素。
-
剩余元素解构
-
使用
...语法可以获取数组中的剩余元素。例如：
-
let [first,...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]
-
first获取了数组的第一个元素，rest是一个包含从第二个元素开始的所有剩余元素的新数组。 -
交换变量值
-
数组解构可以很方便地交换两个变量的值。例如：
-
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x); // 2
console.log(y); // 1
-
对象解构
-
基本解构
-
对象解构是根据对象的属性名来提取属性值并赋值给变量。例如，对于对象
{ name: 'John', age: 30 }，可以这样解构：
-
-
let { name, age } = { name: 'John', age: 30 };
console.log(name); // 'John'
console.log(age); // 30
-
解构的变量名要与对象的属性名相同，才能正确地提取属性值。
-
属性重命名
- 在解构对象时可以对变量进行重命名。例如：
let { name: fullName, age } = { name: 'John', age: 30 };
console.log(fullName); // 'John'
console.log(age); // 30
-
这里
name: fullName表示将对象中的name属性的值赋值给fullName变量。 -
默认值
-
可以为解构的变量设置默认值。如果对象中不存在对应的属性，就会使用默认值。例如：
-
let { name = 'Anonymous', age } = { age: 30 };
console.log(name); // 'Anonymous'
console.log(age); // 30
-
因为对象中没有
name属性，所以name变量使用了默认值Anonymous。 -
嵌套对象解构
-
对于嵌套对象，可以进行多层解构。例如：
-
let user = {
name: 'John',
address: {
street: '123 Main St',
city: 'New York'
}
};
let { name, address: { street, city } } = user;
console.log(name); // 'John'
console.log(street); // '123 Main St'
console.log(city); // 'New York'
-
先从
user对象中提取name属性，然后从user对象的address子对象中提取street和city属性。
-
函数参数解构
-
数组参数解构
-
在函数参数中可以对传入的数组进行解构。例如：
-
-
function printFirstAndLast([first,...rest]) {
console.log(first);
console.log(rest[rest.length - 1]);
}
printFirstAndLast([1, 2, 3, 4, 5]);
// 输出：
// 1
// 5
-
对象参数解构
-
函数参数也可以对传入的对象进行解构。例如：
-
function printUserInfo({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
printUserInfo({ name: 'John', age: 30 });
// 输出：
// Name: John, Age: 30
