ECMAScript 6学习笔记（一）：展开运算符.md
2017-09-01 本文已影响501人
鲍鲍大人V5
Javascript 是 ECMAScript 的实现和扩展，ES6标准的制定也为Javascript 加入了许多新特性，本文主要记录展开运算符。
展开运算符允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。
展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。iterables实现是依靠[Symbol.iterator]函数，而目前只有 Array，Set，String内置 [Symbol.iterator] 方法，而 Object 尚未内置该方法，因此无法使用展开运算符。不过 ES7 草案当中已经加入了对象展开运算符特性。
函数调用中使用展开运算符
- 在以前我们会使用 apply 方法来将一个数组展开成多个参数
function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);
如上，我们把 args 数组当作实参传递给了 a, b, c，这边正是利用了 Function.prototype.apply 的特性。
不过有了 ES6，我们就可以更加简洁地来传递数组参数：
function test(a, b, c) {}
var args = [0, 1, 2];
test(...args);
我们使用...展开运算符就可以把 args 直接传递给 test() 函数。
数组字面量中使用展开运算符
- 在ES6的世界中，我们可以直接加一个数组直接合并到另外一个数组当中：
var arr1 = [ 'a', 'b', 'c' ];
var arr2 = [ ...arr1, 'd', 'e' ]; // [ 'a', 'b', 'c', 'd', 'e' ]
- 展开运算符符也可以用在push 函数中，可以不用再用 apply() 函数来合并两个数组：
var arr1 = [ 'a', 'b', 'c' ]
var arr2 = [ ...arr1, 'd', 'e' ] // //['a','b','c','d','e']
用于解构赋值
解构赋值也是ES6 中的一个特性，而这个展开运算符可以用于部分情景：
let [arg1, arg2, ...arg3] = [1, 2, 3, 4];
arg1 // 1
arg2 // 2
arg3 // [ '3', '4' ]
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的，将多个数组组合成了一个新数组。
不过要注意，解构赋值中展开运算符只能用在最后：
let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //报错
ES7草案中的对象展开运算符
ES7 中的对象展开运算符可以让我们更快捷的操作对象
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4};
x // 1
y // 2
z // { a: 3, b: 4 }
如上，我们可以将一个对象当中的对象的一部分取出来成为一个新对象赋值给展开运算符的参数。
同时，我们也可以像数组插入那样将一个对象插入另外一个对象当中：
let z = { a: 3, b: 4};
let n = { x: 1, y: 2, ...z};
n // {x:1,y:2,a:3,b:4}
另外还要很多用处，比如可以合并两个对象
let a = { x: 1, y: 2 };
let b = { z: 3 };
let ab = { ...a, ...b };
ab // { x: 1, y:2, z: 3 }
