常用的ES6新特性--解构赋值

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了常用的ES6新特性--解构赋值脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

letconst

由于var可以重复声明,而且无法限制修改,也没有块级作用域,在一些时候不是很合适,所以出现了letconst

  • let:不能重复声明,可以修改,有块级作用域,适合for循环等一些场景
  • const:不能重复声明,有块级作用域,不可以修改,比较适合做全局

变量的结构赋值

  • 数组解构赋值

    let [a,b,c] = [1,2,3]
    let [d,[[e],f]] = [1,[[2],3]]//d=1,e=2,f=3
    let [x,y,...z] =['a'];//x="a",y=undefined,z=[]  结构不成功变量的值就为undefined

    不完全解构

    let [a,[b],c] = [1,[2,3],4];//a=1,b=2,c=4

    对于set结构,可以使用数组的解构数组

    let [x,y,z] = new Set(['a','b','c']);//a=a,y=b,z=c

    主要数据结构具有ITerator接口,都可以采用数组形式的解构赋值,如下斐波那契数列的例子,利用generator函数

    function* fibs(){
        let a = 0 ;
        let b = 1;
        while(true){
            yield a;//利用yield返回中间值
            [a,b] = [b,a+b];
        }
    }
    let [First,second,third,fourth,fifth,sixth] = fibs();
    //first=0,second=1,third=1,fourth=2,fifth=3,sixth=5

    默认值

    解构赋值允许指定默认值,es6内部使用严格相等运算===判断一个位置是否有值,所以只有当一个数组成员严格等于undefined,默认值才会生效;默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

    let [x,y='b'] = ['a'];//x='a',y='b'
    let [x=1] = [undefined];//x=1
    let [x=1] = [null];//x=null
    let [x=1,y=x] = [2];//x=2,y=2   因为先把2解构赋给x,x把值赋给y,所以x,y都为2
    let [x=1,y=x]=[1,2];//x=1,y=2
  • 对象的解构赋值

    数组的解构和对象的解构有一个不同,数组的元素按次序排列,变量的取值由其位置决定;而对象的属性没有次数,变量必需和属性同名,才能取得正确的值。

    let {foo:foo,bar:bar} = {foo:'QQq',bar:'www'}//foo=qqq,bar=www
    //嵌套解构
    let obj = {p:['hello',{y:'world'}]};
    let {p:[x,{y}]} = obj//x=hello,y=world  此时p作为模式不会被赋值
    let {p,p:[x,{y}]} = obj//p=['hello',{y:'world'}]  此时P作为变量赋值

    以下实例进行了三次解构,分别是对loc,start,line三个属性,但是最后解构赋值时,只有line是属性,start和loc都是模式,而不是变量

    const node = {
        loc:{
            start:{
                line:1,
                column:5
            }
        }
    };
    //第一个参数是对loc进行解构,得到loc = { start: { line: 1, column: 5 } }
    //第二个参数对start进行解构,得到start = { line: 1, column: 5 }
    //第三个参数对line进行解构,得到 line = 1
    let{ loc,loc:{start},loc:{start:{line}}} = node;
    console.LOG(loc);//{ start: { line: 1, column: 5 } }
    console.log(start);    //{ line: 1, column: 5 }
    console.log(line);//1

    嵌套赋值

    let obj = {};
    let arr = [];
    ({foo:obj.PRop, bar:arr[0]} = {foo:123,bar:true});
    console.log(obj);//{prop:123}
    console.log(arr);//[true]

    对象的默认值,和数组的默认值相似

    VAR {x:y=3}={x:5}//y=5
    var {x=3} = {x:undefined}//x=3
    var {x=3} = {x:null}//x=null
    var {foo} = {bar:'bz}//foo=undefined解构失败变量的值等于undefined

    一些错误写法:

    let _tmp = {baz :'bz'};
    _tmp.foo.baz;//报错,因为foo已经是undefined,再取子属性会报错
    let x;
    {x} = {x:1};//会报错,因为JavaScript引擎会把{x}解释成代码块,只有避免将大括号写在行首,避免将其解释成代码块,才能避免报错
    let x;
    ({x} = {x:1});//正确写法
  • 字符串的解构赋值

    const [a,b,c,d,e] = 'hello'//a='h',b='e',....
    let {length:len}='hello'//len=5
  • 数值和布尔值的解构赋值

    解构赋值时,如果等号右边是数值和布尔值,会先转为对象;而undefinednull无法转为对象,所以对它们解构赋值会报错

    let {toString:s} = 123;
    console.log(s === Number.prototyPE.toString);//true
    let {toString:s} = true;
    console.log(s === Boolean.prototype.toString);//true
    let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError
  • 函数参数的解构赋值

    [[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]

    函数参数的解构可以使用默认值,但是不同的写法会有区别,有如下两种情况,一种是为函数的参数指定默认值,一种是为变量指定默认值

    • 变量的默认值

      函数test的参数是一个对象,通过对对象的解构,得到参数x,y,解构失败,参数为默认值

    function test({x=0,y=0} ={}){
        return [x,y];
    }
    console.log(test({x:2,y:5}));//[2,5]
    console.log(test({x:2}));//[2,0]
    console.log(test({}));//[0,0]
    console.log(test());//[0,0]
    • 函数参数的默认值,下面是为函数的参数指定默认值
    function test({x,y} = {x:0,y:0}){
        return [x,y];
    }
    console.log(test({x:2,y:5}));//[2,5]
    console.log(test({x:2}));//[ 2, undefined ]
    console.log(test({}));//[ undefined, undefined ]
    console.log(test());[0,0]​                                  

变量解构赋值的用途

  • 交换变量的值
  • 从函数返回多个值
  • 函数参数的定义
  • 提取JSON数据
  • 函数参数的默认值
  • 遍历Map结构
  • 输入模块的指定方法

脚本宝典总结

以上是脚本宝典为你收集整理的常用的ES6新特性--解构赋值全部内容,希望文章能够帮你解决常用的ES6新特性--解构赋值所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。