ES6详解六:赋值语法糖 destructing & spread

destructing

这个不知道怎么翻译就不翻译了,意思就是可以通过析构表达式的右边值来同时对左边的多个值进行赋值。说起来有点绕,举几个简单的例子就可以理解:

var [a,b,c]=[1,2,3];    //通过数组给多个变量赋值
var {name, age} = {name: "Tom", age:12} //通过一个对象来给多个变量赋值

上面两个例子分别用一个数组和一个对象对多个变量进行赋值。而且并用严格一一对应,可以在赋值的时候省略掉一些属性:

var [a, ,c]=[1,2,3];    //忽略数组中的第二个
var {name, age} = {name: "Tom", age:12, gender: "male"} //通过一个对象来给多个变量赋值

如果你用babel编译,会发现上面的代码编译出来是这样的:

var _ref = [1, 2, 3];
var a = _ref[0];
var c = _ref[2];
var _name$age$gender = { name: "Tom", age: 12, gender: "male" };
var name = _name$age$gender.name;
var age = _name$age$gender.age;

结合 spread 语法,可以实现更灵活的赋值:

 var [a, b, ...others]=[1,2,3,4,5,6];

上面的代码把 数组的第一个元素赋值给 a,第二个元素赋值给 b,剩余的全部给 others,注意 others 前面的三个点。其实用babel编译出来最好理解:

var a = 1;
var b = 2;
var others = [3, 4, 5, 6];

而且这个destructing不止能取扁平的对象属性,其实只要结构对应 都能取到:

 var {name, child: {age}} = {name: "Bob", child: {age: 12}}     //取出age

还可以在for循环中通过destructing语法直接取出遍历对象中的属性:

var students = [
  {name: "Bob"},
  {name: "Lily"}
  ]

for(var {name} of students) {     //直接取出name属性
  console.log(name);
}

同理在函数形参中也可以用来直接取实参的某些属性:

function sayName({name}) {
  console.log(name);
}

sayName({name: "Bob"});

这个特性也只是一个语法糖而已,通过复杂一点点的ES4的代码完全可以实现同样的效果。
不过坑爹的chrome现在还是不支持这两个特性,想尝试的只能用babel编译。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值