记录一下ES6 ... 扩展运算符(对象展开符)的使用

一、扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

例子:
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

二、合并数组

如下面例子
// ES5
[1, 2,3].concat(more)
// ES6
[1, 2,3, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

三、解构赋值结合

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
下面是另外一些例子。
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first) // 打印1
console.log(rest) // 打印[2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // []

特别注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
//  报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  报错

四、函数的返回值
JavaScript 的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields = readDateFields(database);
var d = new Date(...dateFields);
上面代码从数据库取出一行数据，通过扩展运算符，直接将其传入构造函数Date。

五、字符串
扩展运算符可以将字符串转为数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

六、Map 和 Set
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
let arr = [...map.values()]; // ["one", "two", "three"]
let arr = [...map];

七、数据构造

两个对象连接返回新的对象

  let x = {
			name: 'sina'
	}
let y = {
		age: 18
	}
let z = {...x,...y}
console.log(z)// {name: "sina", age: 18}

两个数组连接返回新的数组

let x = ['chen']
let y = ['sina']
let z = [...x, ...y]
console.log(z)// ["chen", "sina"]

数组加上对象 =>返回新的数组

 
let x = [{
	name: 'sina'
}]
let y = {
	name: 'chen'
}
let z = [...x, y];
console.log(z);//[0: {name: "sina"}，1: {name: "chen"}]

数组+字符串

let x = ['sina'];
let y = 'chen';
let z = [...x, y];
console.log(z); //["sina", "chen"]

数组+对象
let x = {
	name: ['chen','sina'],
	age:18
}
let y = {
	...x, //name: ['chen','sina'],age:18
	arr: [...x.name] //相当于复制数组
	
}
console.log(y)