ES6之解构

ES6之解构

解构是JavaScript（ES6及以后版本）中一种非常强大的语法特性，它允许我们按照一定模式从数组或对象中提取值，并将这些值赋给声明的变量。以下是关于解构的更多详细用法：

一、数组解构

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];
const [,second] = arr;
console.log(second) //输出 2

3. 默认值

为变量提供默认值，当解构的值为undefined时使用。

const arr = [1];
const [x,y = 20] = arr;
console.log(x); // 输出：1
console.log(y); //输出：20

4. 剩余参数

使用扩展运算符（…）获取数组的剩余部分。

const arr = [1,2,3,4,5];
const [first,...rest] = arr;
console.log(first); //输出：1
console.log(rest); //输出：[2,3,4,5]

5. 嵌套解构

从嵌套数组中提取值。

const nestedArray = [1,[2,3],4];
const [a,[b,c],d] = nestedArray;
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3
console.log(d); // 输出: 4

6. 交换变量

无需临时变量即可交换两个变量的值。

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a); // 输出: 2
console.log(b); // 输出: 1

二、对象解构

1. 基本解构

从对象中提取值并赋给变量。

const obj = {name:"Tom",age:18};
const {name,age} = obj;
console.log(name); // 输出: Tom
console.log(age); // 输出: 18

注意：对象解构要求变量与键的名称一致，所以不存在位置对应的问题。即 const {age,name} = obj;与上方的例子中值是一致的。

2. 重命名

在使用过程中，会遇到重名的问题，这是我们可以使用别名来重命名提取的属性。

const obj = { name: 'Tom', age: 18 };
const { name: userName, age: userAge } = obj;
console.log(userName); // 输出: Tom
console.log(userAge); // 输出: 18

3. 默认值

为变量提供默认值，当解构的属性不存在时使用。

const obj = {name:"Tom"};
const {name,age = 18} = obj;
console.log(name); // 输出: Tom
console.log(age); // 输出: 18

4. 剩余参数

使用扩展运算符（…）获取对象的剩余属性。

const obj = {name:"Tom",age:18,gender:"男"};
const {name,...rest} = obj;
console.log(name); // 输出: Tom
console.log(rest); // 输出: { age: 18, gender: 'male' }

三、函数参数结构

1. 数组参数解构

在函数参数中使用数组解构

function fn([x,y]) {
    console.log(x,y);
}
fn([10,20]); // 输出： 10 20

2. 对象参数解构

在函数参数中适用对象解构

function printUserInfo({name,age}) {
    console.log(name,age);
}
printUserInfo({name:"Tom",age: 18}); // 输出 Tom 18

3. 默认值

function printUserInfo({name,age = 18}) {
    console.log(name,age);
}
printUserInfo({name:"Tom"}); // 输出 Tom 18

四、注意事项

1. 解构顺序

• 数组解构顺序要与数组元素的位置一致。
• 对象解构顺序因为变量与属性的键名相同没有顺序要求。

2. undefined情况

当解构的数组中没有对应的值或对象中没有对应的属性时，未赋默认值的变量会被赋值为undefined。

3. 剩余元素

使用扩展运算符时，必须确保它是解构语句中的最后一个元素或属性。不然会报错。

const obj = {
          name: "Tom",
          age: 18,
          gender: "male",
          location:"beijing"
        };
        const { name,...rest, location } = obj; //Rest element must be last element
        console.log(location);

4. 对象的方法解构

对象的方法也同样可以解构。

const obj = {
          name: "Tom",
          age: 18,
          gender: "male",
          test() {
            console.log("解构对方法也生效");
          }
        };
        const { name, test } = obj; 
        console.log(test()); //输出：解构对方法也生效

解构是JavaScript中非常强大的特性，它使得从数组和对象中提取数据变得更加简洁和方便。在实际开发中，合理利用解构可以提高代码的可读性和维护性。