ES6之扩展运算符

昨日在B站看面试录制的视频，发现对扩展运算符半懂不懂的。特地来总结下
ES6新特性的扩展运算符是三个点（…），作用是将一个数组转为用逗号分隔的参数序列。
例如console.log(...[1, 2, 3]) // 1 2 3
可以替代apply()方法

// ES5 的写法  
function f(x, y, z) {  
// ...  
}  
var args = [0, 1, 2];  
f.apply(null, args);  
// ES6 的写法  
function f(x, y, z) {  
// ...  
}  
var args = [0, 1, 2];  
f(...args);  

扩展运算符的应用
1.合并数组

// ES5  
[1, 2].concat(more)  //concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
// ES6  
[1, 2, ...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' ]  

2.与解构赋值结合

// ES5  
a = list[0], rest = list.slice(1)  
// ES6  
[a, ...rest] = list  
下面是另外一些例子。  
const [first, ...rest] = [1, 2, 3, 4, 5];  
first // 1  
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];  
//  报错  
const [last, ...butLast] = [1, 2, 3, 4, 5];
console.log(last);
// 1
console.log(butLast);
// [2,3,4,5]

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

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

4字符串
扩展运算符还可以将字符串转为真正的数组。

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

参考文章：https://www.cnblogs.com/minigrasshopper/p/9156027.html