ES6：spread syntax —— JavaScript 將元素應用于數組和函數的優雅方法

xuweijian 發布于2019-08-20 16:30 / 1256人閱讀

摘要：也就是說如果一個數組中的元素發生改變，那么另一個數組中的元素也相應地發生改變。依照函數定義，可以使用把數組元素應用于函數。應用于對象字面值這個特征是基于的附加特征。

編譯：胡子大哈

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

云服務器 GPU云服務器 javascript數組函數 javascript函數方法 javascript數組方法 php數組和函數參數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82963.html

ES6指北【5】——展開語法(spread syntax)

摘要：我們先來看一看的官方定義展開語法可以在函數調用數組構造時將數組表達式或者在語法層面展開還可以在構造字面量對象時將對象表達式按的方式展開。我們先來看一看MDN的官方定義展開語法(Spread syntax), 可以在函數調用/數組構造時, 將數組表達式或者string在語法層面展開；還可以在構造字面量對象時, 將對象表達式按key-value的方式展開。(譯者注: 字面量一般指 [1...

ZoomQuiet 2019-08-26 12:16 評論0 收藏0
ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

摘要：變量聲明與賦值值傳遞淺拷貝與深拷貝詳解歸納于筆者的現代開發語法基礎與實踐技巧系列文章。變量聲明在中，基本的變量聲明可以用方式允許省略，直接對未聲明的變量賦值。按值傳遞中函數的形參是被調用時所傳實參的副本。 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解歸納于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文首先介紹 ES6 中常用的三種變量聲明方式，然后討論了...

snowLu 2019-08-21 11:55 評論0 收藏0
es6必會之let && const

摘要：副作用，無副作用可執行和關鍵詞。和不能像一樣同一個下聲明多次和不會像一樣變量聲明提升原因是，存在因此不能，賦值前使用變量。 showImg(https://segmentfault.com/img/bVbhPlD?w=1271&h=715); 關鍵詞： let ，const， blocking scope ，temporal dead zone，redeclaration，reassi...

ygyooo 2019-08-23 12:14 評論0 收藏0
JavaScript30秒，從入門到放棄

摘要：三元運算符遍歷過程中判斷遍歷數組值是否嚴格等于指定值，是，次數否，。三元運算符判斷是否是一個數組，是，返回遞歸運用后的值否，直接返回。秒，從入門到放棄博客地址秒，從入門到放棄微信公眾號地址秒，從入門到放棄有意思最近很火的github上的庫30-seconds-of-code，特別有意思，代碼也很優雅。能學es6 自己翻譯，能學英語代碼很美，很優雅，美即正義函數式表達，享受 ...

TNFE 2019-08-21 18:21 評論0 收藏0
React 深入系列３：Props 和 State

摘要：當真正執行狀態修改時，依賴的并不能保證是最新的，因為會把多次的修改合并成一次，這時，還是等于這幾次修改發生前的。下篇預告深入系列組件的生命周期新書推薦進階之路作者徐超畢業于浙江大學，碩士，資深前端工程師，長期就職于能源物聯網公司遠景智能。文：徐超，《React進階之路》作者授權發布，轉載請注明作者及出處 React 深入系列3：Props 和 State React 深入系列，深...

endiat 2019-08-22 16:21 評論0 收藏0