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

栏目: JavaScript · 发布时间: 5年前

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

let和const

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

  • 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
  • 数值和布尔值的解构赋值

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

    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新特性--解构赋值》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UNIX环境高级编程(第3版)

UNIX环境高级编程(第3版)

史蒂文斯 (W.Richard Stevens)、拉戈 (Stephen A.Rago) / 戚正伟、张亚英、尤晋元 / 人民邮电出版社 / 2014-6-1 / 128.00元

《UNIX环境高级编程(第3版)》是被誉为UNIX编程“圣经”的Advanced Programming in the UNIX Environment一书的第3版。在本书第2版出版后的8年中,UNIX行业发生了巨大的变化,特别是影响UNIX编程接口的有关标准变化很大。本书在保持前一版风格的基础上,根据最新的标准对内容进行了修订和增补,反映了最新的技术发展。书中除了介绍UNIX文件和目录、标准I/......一起来看看 《UNIX环境高级编程(第3版)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具