为了账号安全,请及时绑定邮箱和手机立即绑定

es6解构赋值

标签:
前端工具
解构赋值的定义

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,本质是一种模式匹配。

数组的解构赋值

按照对应位置,对变量赋值,如果解构不成功,变量的值就等于undefined。
同时解构赋值允许指定默认值。只有当一个数组成员严格等于undefined,默认值才会生效。

let [a, b, c] = [1, 2, 3];   //a=1,b=2,c=3let [x, , y] = [1, 2, 3];    //x=1,y=3let [foo] = [];              //foo=undefinedlet [foo = 1] = [];      //foo=1let [foo = 1] = [null];  //foo=null
对象的解构赋值

对象的解构是按照属性来进行解构赋值的。如果解构不成功,变量的值就等于undefined。
对象的解构也可以指定默认值。默认值生效的条件是,对象的属性值严格等于undefined。

let { a: foo, b: bar } = { a: "123", b: "456" }    //foo=123  bar =456let { a: a, b: b } = { a: "123", b: "456" }       //a=123 b=456let { a, b } = { a: "123", b: "456" }      //a=123 b=456   //第三种写法等于第二种,因为es6中可以在对象中直接写入变量let { a, c } = { a: "123", b: "456" }     //a=123  c=undefinedlet { a, c = 3 } = { a: "123", b: "456" }    //a=123  c=3
其他的解构赋值

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。

let  { toString: s } = 123      //s是对象的toString方法let  { toString: s } = true;     //s是对象的toString方法let { prop: x } = undefined;   //报错let { prop: y } = null;      //  报错const [a, b, c, d, e] = "hello"   // a=h b=e ...const { 0: a, 1: b, 2: c, 3: d, 4: e } = "hello"    //a=h b=e ...//字符串被转为类数组对象,故可以使用数组和对象解构赋值
解构赋值的用途
  • 交换变量的值

     let x = 1 let y = 2
     [x, y] = [y, x]
  • 方便取值

    let obj = {  a:1,  b:2,  c: function(){return 1}
    } let {a,b} = obj  //代替以前  let a= obj.a, b=obj.b 的写法
  • 输入模块的指定方法
    import {a,b} from 'a.js'

  • 遍历 Map 结构

  • 函数参数的定义(不建议使用,容易产生混乱)

注意点

ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。(不要在模式中放置圆括号)
有几个简单的规则:

  • 变量声明语句,解构赋值不得使用圆括号

  • 函数参数,解构赋值不得使用圆括号

  • 赋值语句的模式,解构赋值不得使用圆括号

let [(a)] = [1];    //报错    变量声明语句let ({x: c}) = {};   //报错   变量声明语句([a]) = [5];        //报错    赋值语句的模式[(b)] = [3];        // 正确   赋值语句的非模式部分,可以使用圆括号。可以使用圆括号的唯一情况({x} = {x: 1});     // 正确

总之,能不使用圆括号尽量不使用。



作者:tiancai啊呆
链接:https://www.jianshu.com/p/f81c59fe998e


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消