频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
ES6解构赋值使用介绍详解
2018-03-13 11:54:20      个评论    来源:wangdan_2013的博客  
收藏   我要投稿

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

点击复制链接 与好友分享!回本站首页
上一篇:Wijmo5Flexgrid基础教程之增加和删除,自定义编辑器
下一篇:html、jsp中的table标签如何添加横向滚动条?
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站