当前位置:首页 > ES6 > 正文内容

es6 解构的使用场景

自由小鸟5年前 (2019-07-19)ES62190

二,解构

{

    let a,b,rest;

    [a,b]=[1,2]

    console.log(a,b);  // 1 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]

}

{

    let a,b;

    ({a,b}={a:1,b:2})

    console.log(a,b) // 1  2

}

1,数组,对象结构赋值,基本方法,默认值和使用场景

1>默认值

{

    let a,b,c,rest;

    [a,b,c=3]=[1,2]

    console.log(a,b,c)  //1  2  3

}

2>作用场景

(1)变量交换,用es5的话还需要一个中间变量做存储

    {

        let a=1;

        let b=2;

        [a,b]=[b,a]

        console.log(a,b)  //2  1

    }

(2)如果有个返回值我们想取出来,如果用es5的话那不得先给一个变量a ,然后a[0],a[1 ]

    {

        function f(){
            return [1,2]
        }

        let a,b;

        [a,b]=f();

        console.log(a,b);  //1  2

    }

(3)返回值只关心某个

    {

        function f(){

            return [1,2,3,4,5]

        }

        let a,b,c

        [a,,,b]=f();

        console.log(a,b)

    }

(4)返回值不确定长度和内容,只关心第一个值,把其它的放一个数组里

    {

        function f(){

            return [1,2,3,4,5]

        }

        let a,b,c

        [a,...b]=f();

        console.log(a,b) // a上1  b是[2,3,4,5]

    }

(5)返回值不确定长度和内容,只关心第一个值,把其它的放一个数组里

    {

        function f(){

            return [1,2,3,4,5]

        }

        let a,b,c

        [a,,...b]=f();

        console.log(a,b) // a上1  b是[3,4,5]   把2就丢掉了

    }

    对象解构,把对象解构给变量

    {

        let 0={p:42,q:true}

        let {p,q}=o;

        console.log(p,q)   //p=42,q=true

    }

    对象默认值

    {

        let {a=10,b=5}={a:3}

        console.log(a,b)   // a=13,b=5

    }

对象嵌套数组解构

{

    let metaData={

        title:'abc',

        test:[

            title:'test',

            desc:'description'

        ]

    }

    let {title:esTitle,test:[{title:cnTitle}]}=metaData;  //这里的test名称和后面的结构写法都要和对象里的test一样的

    console.log(esTitle,cnTitle)  //esTitle=abc    cnTitle=test

}


版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=49

返回列表

上一篇:es6 作用域

下一篇:es6数值扩展

“es6 解构的使用场景” 的相关文章

es6数值扩展

Number.isFinite    函数用于检查其参数是否是无穷大es6 只对数字操作,如果不是数字就返回falseisFinite(25) // true Number.isFinite(25) // trueisFinite("25"...

es6 函数扩展

参数默认值rest参数扩展运算符箭头函数this绑定尾调用// 参数默认值{    function test(x,y='world'){        conso...

es6 promise

es6 promise

Promise是为解决什么问题而产生的?promise是为解决异步处理回调金字塔问题而产生的Promise的两个特点1、Promise对象的状态不受外界影响1)pending 初始状态2)resolve 成功状态3)reject 失败状态Promise 有以上三种状态,只有异步操作的结果可以决定当前...

es6 解构函数默认值

es6 解构函数默认值

1,如果函数对数解构值有默认值的情况,调用传值参数不传不会报错2,如果出现解构值没有默认值,那当传参数的时候没有传就会报错...

精选之Promise

我们从promise是什么怎么会出现来一步步解决问题来深入了解1、了解 Promise 吗? 2、Promise 解决的痛点是什么? 3、Promise 解决的痛点还有其他方法可以解决吗?如果有,请列举。 4、Promise 如何使用? 5、Promise 常用的方法有哪些?它们的作用是什么...