Linuxeden开源社区
上一篇文章中，我介绍了一些关于 ES6 解构方法的新特性。
本文中我们一起来看一下另外一个 JavaScript 新增语法 —— spread syntax（扩展语法）。
spread syntax 实际上非常简单，假设你的可遍历对象中有一些元素（如数组），你想把这些元素应用于另一个新的数组或者一个函数调用。通常的做法，你会从索引开始，利用循环访问每个元素。但是通过 spread syntax 这个事情就变的很简单了，你可以使用三个点作为前缀，即 ... 应用于可遍历对象上，问题就解决了。
为了更直观，我们一起看几个用例就明白了。
复制一个数组
假设有一个数组名字是 names。
|
1
|
const names = [‘Luke’,‘Eva’,‘Phil’];
|
如何把 names 里面的元素复制到一个新数组中呢？
传统的做法是用循环来实现，但是使用 spread syntax，解决方法很简洁。
|
1
2
|
const copiedList = [...names]
console.log(copiedList); // [‘Luke’,’Eva’,’Phil’]
|
可以看到比循环方法简单的多。
这里值得一提的是，这里复制的是引用。也就是说如果一个数组中的元素发生改变，那么另一个数组中的元素也相应地发生改变。
|
1
2
3
4
5
6
7
|
var initialArray = [{name: “Luke”}];
var copiedArray = [...initialArray];
initialArray[0][‘name’] = ‘Mark’;
console.log(initialArray); //Array [{‘name’: ‘Mark’}]
console.log(copiedArray); //Array [{‘name’: ‘Mark’}]
|
连接数组
spread syntax 另一个用法是连接数组，做法是把你想要扩展的数组放到一起。如下：
|
1
2
|
const concatinated = [...names, ...names];
console.log(concatinated); // [‘Luke’,’Eva’,’Phil’, ‘Luke’,’Eva’,’Phil’]
|
把独立变量扩展到一起
除了把元素复制到一个新数组中，还可以把独立变量一起扩展到某数组中。下面举个例子，把第一个元素和 names 数组扩展到一起。
|
1
2
|
const first = [‘Emily’, ...names];
console.log(first); // [‘Emily’,’Luke’,’Eva’,’Phil’]
|
还可以把独立变量放到 names 的后面。
|
1
2
|
const last = [...names, ‘Emily’];
console.log(last); // [‘Luke’,’Eva’,’Phil’, ‘Emily’]
|
在函数调用中使用 spread syntax
你已经掌握了如何在数组中运用 spread syntax，现在我们来看一下如何在函数调用中使用。
假设我们有个简单函数 —— printer —— 接受三个参数，并且打印出来。
|
1
2
3
|
const printer = (name1, name2, name3) => {
console.log(`Names: ${name1}, ${name2} and ${name3}`);
};
|
依照 printer 函数定义，可以使用 spread syntax 把数组元素应用于 printer 函数。
|
1
|
printer(...names); // Names: Luke, Eva and Phil
|
和数组的用法一样，可以把独立变量一起输出。我们添加 ‘Emily’ 作为 printer 函数的第一个参数，后面跟着 ...names。
|
1
|
printer(‘Emily’, ...names); // Names: Emily, Luke and Eva
|
如果传递给函数过多的参数，那么超过函数参数个数的元素将会被忽略掉。
Bonus：spread syntax 应用于对象字面值！
这个特征是基于 ECMAScript 的附加特征。但是目前使用它需要 babel 插件，叫做： babel-plugin-transform-object-rest-spread。
通过 spread syntax 这种变体，你可以把两个对象扩展到一起。假设你有两个对象包含了个人信息 —— nameAndAge 和 about。
|
1
2
3
4
5
6
7
8
9
|
const nameAndAge = {
name: ‘Luke’,
age: 24,
}
const about = {
work: ‘Developer’,
hobby: ‘Skydiving’,
}
|
接下来用 spread syntax 把两个对象合并到一起。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const person = {
...nameAndAge,
...about,
}
console.log(person);
//{
// “age”: 24,
// “hobby”: “Skydiving”,
// “name”: “Luke”,
// “work”: “Developer”
//}
|
OK，这篇文章介绍了 spread syntax 的用法。后面我们会继续介绍 ES6 新特性，敬请继续关注！