持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

概念

[ES6] 提供了更简洁的赋值模式，从数组和对象中提取值，这被称为解构。然后将值赋值给另一个变量，这就是赋值。

1、给数组的解构赋值

数组的解构赋值跟简单，就是从数组下标0开始取出一个值然后赋值给一个变量；再从数组中取出下标为1的值，再赋值给另一个变量......

let arr = [1,2];
let [arr0,arr1] = arr;
console.log(arr0,arr1);  // 1 2

就等同于

let arr =  [1,2];
let arr0 = arr[0];
let arr1 = arr[1];

如果数组中的长度大于我们要赋值的变量长度，那么等赋值结束后就会停止数组剩下的解构赋值。

let arr = [1,2,3,4,5];
let [a,b] = arr;
console.log(a,b);  // 1 2

同时我们可以搭配ES6的扩展运算符，可以把赋值数组剩余的部分全部赋给一个变量

let arr = [1,2,3,4,5];
let [a,b,...rest] = arr;
console.log(rest);  // [ 3, 4, 5 ]

跳过某一个值

如果我们只想要一个数组中的第一项和第三项，不想要第二项值，我们就可以跳过第二项。

let arr = [1,2,3,4,5];
let [a,,b] = arr;
console.log(a,b);  // 1 3

赋值为undefined的情况

当我们赋值的变量长度大于数组长度时，多余的部分就会被赋值为undefined.

let arr = [1,2];
let [a,b,c] = arr;
console.log(a,b,c); // 1 2 undefined

解构默认值

如果出现undefined情况，我们可以给要赋值的变量设置默认值。

let arr = [1,2];
let [a=0,b=0,c=0] = arr;
console.log(a,b,c); // 1 2 0

嵌套数组解构

如果一个数组中还包含另一个数组：

let arr = [1,2,[3,4],5];
let [a,b,c,d] = arr;
console.log(c); // [ 3, 4 ]
let [x,y] = c;
console.log(x,y); // 3 4

我们可以使用嵌套的解构赋值，更简洁：

let arr = [1,2,[3,4],5];
let [a,b,[x,y],d] = arr;
console.log(x,y);  //3 4

字符串解构

字符串解构赋值和数组是一样的。

let str = '123xx';
let [a,b,...c] = str;
console.log(a,b,c); // 1 2 [ '3', 'x', 'x' ]

2、给对象的解构赋值

给对象的解构赋值和数组的有一些区别。它的原理不是像数组一样按照数组下标从小到大开始解构赋值了，而是从对象从获取一个对象的属性，再赋值给另一个变量。

原理

let person = {
    name:'ly',
    age:18
};
let {name:myName,age:myAge} = person;
console.log(myName,myAge);  // ly 18

原理就是从person对象中拿到name属性，然后将name属性赋值给myName；再从person对象中拿到age属性，再赋值给myAge变量。

简写

但是一般情况下，我们会使用ES6的简写模式进行对象的解构赋值(就是当对象解构的属性和要给赋值的变量名称一致时)。

let person = {
    name:'ly',
    age:18
};
let {name,age} = person;
console.log(name,age);  // ly 18

它的原理就是：

let person = {
    name:'ly',
    age:18
};
let {name:name,age:age} = person;
console.log(name,age);  // ly 18

undefined和默认值

和数组一样，如果对象中没有某个属性进行解构赋值，那么就会赋值为undefined：

let person = {
    name:'ly',
    age:18
};
let {name,age,sex} = person;
console.log(name,age,sex);  // ly 18 undefined

这时我们可以使用默认值：

let person = {
    name:'ly',
    age:18
};
let {name,age,sex='未知'} = person;
console.log(name,age,sex);  // ly 18 未知

同时使用数组和对象

let persons = [{name:'ly',age:18},{name:'rose',age:20}]
let [,{name,age}] = persons;
console.log(name,age);  //rose 20

或者：

let obj = {persons: [{name: 'ly',age:18}] };
let {persons: [{ name }, y ] } = obj;//不解构x
console.log(name,y); // ly undefined

使用扩展运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
console.log(a,b,rest); // 10 20 { c: 30, d: 40 }

嵌套对象解构赋值

let person = {
    name:'ly',
    age:18,
    son:{
        name:'jack',
        age:1
    }
};
let {name,age,son:{name:sonName,age:sonAge}} = person;
console.log(name,age,sonName,sonAge); // ly 18 jack 1

其实原理是一样的，将person对象中的son属性赋值给一个变量，而son又是对象，所以又可以对这个变量再进行解构，然后将son对象中的name属性赋值给sonName变量，再将son对象的age属性赋值给sonAge变量。

3、解构的使用

交换值

以前我们交换两个变量的值，需要使用第三个变量来中转。但是使用解构赋值就不需要了：

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

配合函数传参

function fun(x,{name,age}) {
    console.log(x);
    console.log(name);
    console.log(age);
}

fun(1,{name:'ly',age:18}) 
// 1
// ly
// 18

使用默认值：

function fun(x,{name,age,sex='未知'}) {
    console.log(x);
    console.log(name);
    console.log(age);
    console.log(sex);
}

fun(1,{name:'ly',age:18}) 
// 1
// ly
// 18
// 未知

提取函数返回值

函数返回数组：

function fun() {
    return [1,2,3]
}

let [a,b,c] = fun();
console.log(a,b,c); // 1 2 3

函数返回对象：

function fun() {
    return {
        name:'ly',
        age:18
    }
}

let {name,age} = fun();
console.log(name,age); // ly 18

解构赋值其实就是简化了从数组和对象中拿到值再去赋值的过程。

javascript进阶知识16-ES6的解构赋值

概念