es6之扩展运算符

在es6以前，如果我们要把两个数组拼接到一起，通常是使用数组的concat方法，比如

const a = ['Jelly', 'Bob', 'Helen'];
const b = ['James', 'Adrew', 'John'];
const c = a.concat(b);
console.log(c);
//  ['Jelly', 'Bob', 'Helen', 'James', 'Adrew', 'John']

上面这种方法，如果想要在中间多加一个名字，使用的方法通常是

let members = [];
members = merbers.concat(a);
members.push('Mary');
members = merbers.concat(b);
console.log(members);
//  ['Jelly', 'Bob', 'Helen', 'Mary', 'James', 'Adrew', 'John']

这样写，是不是感觉比较麻烦呢
于是，es6新出的扩展运算符就可以很好的拯救这个问题，什么是扩展运算符呢，下面给一个小代码了解一下，字符串是可遍历对象，使用扩展运算符可以扩展其中的每一个字符

["visit"]
[...'visit']
// ["v", "i", "s", "i", "t"]

上面可以看到，字符串的每一个元素被扩展到新的数组当中了，
数组也是可遍历对象，因此，之前的代码可以简写为

let members = [...a, ...b];
console.log(members);
//  ['Jelly', 'Bob', 'Helen', 'James', 'Adrew', 'John']


let members2 = [...a, 'Mary', ...b];
console.log(members2);
//  ['Jelly', 'Bob', 'Helen', 'Mary', 'James', 'Adrew', 'John']

扩展运算符还可以用于复制数组
以前，我们通常这样写

const members =  ['Jelly', 'Bob', 'Helen', 'James', 'Adrew', 'John']；
const membersCopy = members;
console.log(membersCopy);
// ['Jelly', 'Bob', 'Helen', 'James', 'Adrew', 'John']；

但是，如果你改变了新数组成员里面的值，原数组的值也会被改变，比如下面这种情况

membersCopy[0] = 'Thomas'
console.log(membersCopy);
// ['Thomas', 'Bob', 'Helen', 'James', 'Adrew', 'John']；
console.log(members);
// ['Thomas', 'Bob', 'Helen', 'James', 'Adrew', 'John']；

因为这种代码复制的不是数组，而是数组的索引
解决方法
第一种，以前的写法

const members =  ['Jelly', 'Bob', 'Helen', 'James', 'Adrew', 'John']；
const membersCopy = [].concat(members);

第二种，es6扩展运算符

const members =  ['Jelly', 'Bob', 'Helen', 'James', 'Adrew', 'John']；
const membersCopy = [...members];

扩展运算符在函数中的运用

const fruit = ['apple', 'bnanas', 'pear'];
const newFruit = ['orange', 'mongo'];

如果我们要把newFruit追加到fruit中，实现 fruit = [‘apple’, ‘bnanas’, ‘pear’, ‘orange’, ‘mongo’]这种效果
错误的做法

fruit.push(newFruit);
console.log(fruit);
//  ['apple', 'bnanas', 'pear',  ['orange', 'mongo']]

正确的做法

fruit.push.apply(fruit, newFruit);
console.log(fruit);
// ['apple', 'bnanas', 'pear', 'orange', 'mongo']

因为apply的第二个参数是一个参数的数组，这样就相当于把newFruit里面的每一个元素一次次的push到fruit的数组中
es6的做法

fruit.push(...newFruit);
console.log(fruit);
//  ['apple', 'bnanas', 'pear', 'orange', 'mongo']