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

es6 解构的使用场景

自由小鸟6年前 (2019-07-19)ES62508

二,解构

{

    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 解构的使用场景” 的相关文章

js 数据保护

js 数据保护

es3的写法利用构造函数闭包来实现属性不可编辑es5的写法用一个defineProperty 来实现只可读 writable:falsees6的实现,代理new Proxy来实现,思想和es3很像,操作是代理对象person...

es6 数组扩展

Array.fromArray.ofcopyWithinfind/findindexfillentries/keys/valuesinludes{    let arr=Array.of(3,4,7,9,11)   //把一组数据变量转换成...

es6 语法

es6 语法

数据结构set的用法    weakSet的用法   Map的用法   weakMap的用法set用法{    let list=new Set()    li...

es6 类

类的概念(基本语法,继承关系,静态方法,表态属性)类还提供了getter  setter{//基本定义和生成实例class Parent{constructor(name='mukewang'){this.name=name;}}}{//继承class Parent{con...