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 感興趣的童鞋，歡迎指點。