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

destructing

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

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

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

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

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

1
2
3
4
5
6
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 语法,可以实现更灵活的赋值:

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

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

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

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

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

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

1
2
3
4
5
6
7
8
var students = [
{name: "Bob"},
{name: "Lily"}
]

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

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

1
2
3
4
5
function sayName({name}) {
console.log(name);
}

sayName({name: "Bob"});

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