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

查看所有标签

猜你喜欢:

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

科技投资新时代:TMT投资方法、趋势与热点聚焦

科技投资新时代:TMT投资方法、趋势与热点聚焦

马军、宋辉、段迎晟 / 人民邮电出版社 / 2018-3 / 69.00

中国 TMT 行业(科技、媒体及通信)起步较晚但充满朝气。2017 年,TMT 板块的IPO 数量占到了总数的四分之一;对于投资者来说,投资 TMT 的收益非常可观。那么,TMT 的投资趋势如何? TMT 行业又有哪些投资热点? 本书立足于 TMT 投资现状,在介绍了 TMT 投资的基本概念之后,作者详细讲述了TMT 投资的基本研究方法、分析视角、整体行情及趋势分析,同时从行业视角分析了包括......一起来看看 《科技投资新时代:TMT投资方法、趋势与热点聚焦》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具