ES6解构赋值使用介绍详解

1.什么是解构赋值？

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

1.1解构赋值的几种类型

左右的都是数组，数组解构赋值

左右都是对象，对象解构赋值

左边是数组，右边是字符串，字符串解构赋值

布尔值解构赋值，函数参数解构赋值，数值解构赋值

2.数组的解构赋值

2.1 看一种最直接最简单的数组解构赋值

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

在这里，右边的数组有两个值，左边的数组有变量a,b；

通过解构赋值，a=1, b=2;

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

这里用到了 …rest 这样的格式，可以看到最后输出的rest值是一个数组，所以可以得到一个结论，如果解构赋值时，…rest 对应的值有一个或者多个，就会自动组合成一个数组，并且数组的内容是其位置对应的数组长度。

2.2 未配对成功以及默认值

{
    let a,b,c,rest;
    [a,b,c] = [1,2]; //没有成功配对，c就未undefined
    console.log(a,b,c); //1 2 undefined
}

上面的代码中 C 没有配对成功，右侧的数字只有两个值，所以 c 就是undefined，而a，b的值还是1和2.

//默认值
{
    let a,b,c;
    [a,b,c=3] = [1,2]; 
    console.log(a,b,c); //1 2 3
}

这次的代码中，c 含有默认值等于3，在配对过程中，因为右侧数组只有2个值，所以a,b分别等于1，2。按照上一个例子，c 应该为undefined，但是因为我们给了默认值 = 3 ，所以 c 在没有被赋值成功时，其值等于默认值 3。

3. 对象的解构赋值

对象的解构赋值其实和数组是类似的，我们这里就展示几个例子，大家就会明白了。

{
    let a,b;
    ({a,b} = {a:1,b:2});
    console.log(a,b); //1 2
}

和之前的数组的解构赋值对应，这里的a,b 分别为 1,2。

//默认值
{
    let a,b,c;
    ({a,b,c=3} = {a:1,b:2}); 
    console.log(a,b,c); //1 2 3
}

默认值的方式也同样适应于对象

3.使用场景

3.1 变量的交换

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

3.2 变量赋值

{
    function f(){
        return [1,2]
    }
    let a,b;
    [a,b] = f();
    console.log(a,b); // 1 2
}

返回多个值的情况下，选择性的去接受一个或者多个变量

{
    function f(){
        return [1,2,3,4,5]
    }
    let a,b;
    [a,,,b] = f();
    console.log(a,b); //1 4
}

在不知道函数返回的数组长度的情况下，只关心第一个，其余的返回一个数组

{
    function f(){
        return [1,2,3,4,5]
    }
    let a,b,c;
    [a,...b] = f();
    console.log(a,b); //1 [2,3,4,5]
}

{
    function f(){
        return [1,2,3,4,5]
    }
    let a,b,c;
    [a,,...b] = f();
    console.log(a,b); //1 [3,4,5]
}

3.3 前后端通信，json对象

{
    let metaData = {
        title: 'abc',
        test: [{
            title: 'test',
            desc: 'description'
        }]
    }
    let {title: esTitle, test:[{title:cnTitle}]} = metaData;
    console.log(esTitle,cnTitle); // abc  test
}

这里有必要说明下，我们定义的title必须和metaData中的title名称一致，下面的test也与metaData的名称一直，只有才能赋值成功。这里的title和test都称为模式，而不是变量。如果title也要作为变量，可以这样写：

{
    let metaData = {
        title: 'abc',
        test: [{
            title: 'test',
            desc: 'description'
        }]
    }
    let {title,title: esTitle, test:[{title:cnTitle}]} = metaData;
    console.log(title,esTitle,cnTitle); //abc abc  test
}

3.4 输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { pModule1, pModule2 } = require("p");

如果有不知道为什么使用{} 和 let，const的作用的，请看上一篇文章

ES6 — let、const与作用域