摘要：也就是说如果一个数组中的元素发生改变，那么另一个数组中的元素也相应地发生改变。依照函数定义，可以使用把数组元素应用于函数。应用于对象字面值这个特征是基于的附加特征。
编译：胡子大哈
翻译原文：http://huziketang.com/blog/posts/detail?postId=58f6b7b3a58c240ae35bb8e7
英文连接：ES6: The spread syntax — A concise way of applying elements to arrays and functions in JavaScript
转载请注明出处，保留原文链接以及作者信息
上一篇文章中，我介绍了一些关于 ES6 解构方法的新特性。
本文中我们一起来看一下另外一个 JavaScript 新增语法 —— spread syntax（扩展语法）。
spread syntax 实际上非常简单，假设你的可遍历对象中有一些元素（如数组），你想把这些元素应用于另一个新的数组或者一个函数调用。通常的做法，你会从索引开始，利用循环访问每个元素。但是通过 spread syntax 这个事情就变的很简单了，你可以使用三个点作为前缀，即 ... 应用于可遍历对象上，问题就解决了。
为了更直观，我们一起看几个用例就明白了。
复制一个数组假设有一个数组名字是 names。
const names = ["Luke","Eva","Phil"];
如何把 names 里面的元素复制到一个新数组中呢？
传统的做法是用循环来实现，但是使用 spread syntax，解决方法很简洁。
const copiedList = [...names]
console.log(copiedList); // ["Luke","Eva","Phil"]
可以看到比循环方法简单的多。
这里值得一提的是，这里复制的是引用。也就是说如果一个数组中的元素发生改变，那么另一个数组中的元素也相应地发生改变。
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 另一个用法是连接数组，做法是把你想要扩展的数组放到一起。如下：
const concatinated = [...names, ...names];
console.log(concatinated); // ["Luke","Eva","Phil", "Luke","Eva","Phil"]
把独立变量扩展到一起
除了把元素复制到一个新数组中，还可以把独立变量一起扩展到某数组中。下面举个例子，把第一个元素和 names 数组扩展到一起。
const first = ["Emily", ...names];
console.log(first); // ["Emily","Luke","Eva","Phil"]
还可以把独立变量放到 names 的后面。
const last = [...names, "Emily"];
console.log(last); // ["Luke","Eva","Phil", "Emily"]
在函数调用中使用 spread syntax
你已经掌握了如何在数组中运用 spread syntax，现在我们来看一下如何在函数调用中使用。
假设我们有个简单函数 —— printer —— 接受三个参数，并且打印出来。
const printer = (name1, name2, name3) => {
console.log(`Names: ${name1}, ${name2} and ${name3}`);
};
依照 printer 函数定义，可以使用 spread syntax 把数组元素应用于 printer 函数。
printer(...names); // Names: Luke, Eva and Phil
和数组的用法一样，可以把独立变量一起输出。我们添加 ‘Emily’ 作为 printer 函数的第一个参数，后面跟着 ...names。
printer("Emily", ...names); // Names: Emily, Luke and Eva
如果传递给函数过多的参数，那么超过函数参数个数的元素将会被忽略掉。
Bonus：spread syntax 应用于对象字面值！这个特征是基于 ECMAScript 的附加特征。但是目前使用它需要 babel 插件，叫做： babel-plugin-transform-object-rest-spread。
通过 spread syntax 这种变体，你可以把两个对象扩展到一起。假设你有两个对象包含了个人信息 —— nameAndAge 和 about。
const nameAndAge = {
name: "Luke",
age: 24,
}
const about = {
work: "Developer",
hobby: "Skydiving",
}
接下来用 spread syntax 把两个对象合并到一起。
const person = {
...nameAndAge,
...about,
}
console.log(person);
//{
// "age": 24,
// "hobby": "Skydiving",
// "name": "Luke",
// "work": "Developer"
//}
OK，这篇文章介绍了 spread syntax 的用法。后面我们会继续介绍 ES6 新特性，敬请继续关注！
我最近正在写一本《React.js 小书》，对 React.js 感兴趣的童鞋，欢迎指点。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82963.html
摘要：我们先来看一看的官方定义展开语法可以在函数调用数组构造时将数组表达式或者在语法层面展开还可以在构造字面量对象时将对象表达式按的方式展开。 我们先来看一看MDN的官方定义 展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1...
摘要：变量声明与赋值值传递浅拷贝与深拷贝详解归纳于笔者的现代开发语法基础与实践技巧系列文章。变量声明在中，基本的变量声明可以用方式允许省略，直接对未声明的变量赋值。按值传递中函数的形参是被调用时所传实参的副本。 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了...
摘要：副作用，无副作用可执行和关键词。和不能像一样同一个下声明多次和不会像一样变量声明提升原因是，存在因此不能，赋值前使用变量。 showImg(https://segmentfault.com/img/bVbhPlD?w=1271&h=715); 关键词： let ，const， blocking scope ，temporal dead zone，redeclaration，reassi...
摘要：三元运算符遍历过程中判断遍历数组值是否严格等于指定值，是，次数否，。三元运算符判断是否是一个数组，是，返回递归运用后的值否，直接返回。秒，从入门到放弃博客地址秒，从入门到放弃微信公众号地址秒，从入门到放弃 有意思 最近很火的github上的库30-seconds-of-code，特别有意思，代码也很优雅。 能学es6 自己翻译，能学英语 代码很美，很优雅，美即正义 函数式表达，享受 ...
摘要：当真正执行状态修改时，依赖的并不能保证是最新的，因为会把多次的修改合并成一次，这时，还是等于这几次修改发生前的。下篇预告深入系列组件的生命周期新书推荐进阶之路作者徐超毕业于浙江大学，硕士，资深前端工程师，长期就职于能源物联网公司远景智能。 文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列3：Props 和 State React 深入系列，深...
阅读 746·2019-08-30 15:54
阅读 415·2019-08-30 12:51
阅读 2001·2019-08-29 16:28
阅读 2822·2019-08-29 16:10
阅读 2312·2019-08-29 14:21
阅读 384·2019-08-29 14:09
阅读 2104·2019-08-23 16:13
阅读 1222·2019-08-23 13:59
