欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6解构赋值使用介绍详解

程序员文章站 2022-07-24 09:34:32
1.什么是解构赋值? ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。 1.1解构赋值的几种类型 左右的都是数组,数组解构赋值 左右都是对...

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与作用域