ES6：spread syntax —— JavaScript 将元素应用于数组和函数的优雅方法

编译：胡子大哈

翻译原文：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 感兴趣的童鞋，欢迎指点。