成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6：spread syntax —— JavaScript 將元素應(yīng)用于數(shù)組和函數(shù)的優(yōu)雅方法

xuweijian / 1277人閱讀

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

編譯：胡子大哈 


翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f6b7b3a58c240ae35bb8e7  
英文連接：ES6: The spread syntax — A concise way of applying elements to arrays and functions in JavaScript

轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息

上一篇文章中，我介紹了一些關(guān)于 ES6 解構(gòu)方法的新特性。

本文中我們一起來看一下另外一個 JavaScript 新增語法 —— spread syntax（擴(kuò)展語法）。

spread syntax 實(shí)際上非常簡單，假設(shè)你的可遍歷對象中有一些元素（如數(shù)組），你想把這些元素應(yīng)用于另一個新的數(shù)組或者一個函數(shù)調(diào)用。通常的做法，你會從索引開始，利用循環(huán)訪問每個元素。但是通過 spread syntax 這個事情就變的很簡單了，你可以使用三個點(diǎn)作為前綴，即 ... 應(yīng)用于可遍歷對象上，問題就解決了。

為了更直觀，我們一起看幾個用例就明白了。

復(fù)制一個數(shù)組

假設(shè)有一個數(shù)組名字是 names。

    const names = ["Luke","Eva","Phil"];

如何把 names 里面的元素復(fù)制到一個新數(shù)組中呢？

傳統(tǒng)的做法是用循環(huán)來實(shí)現(xiàn)，但是使用 spread syntax，解決方法很簡潔。

    const copiedList = [...names]  
    console.log(copiedList); // ["Luke","Eva","Phil"]

可以看到比循環(huán)方法簡單的多。

這里值得一提的是，這里復(fù)制的是引用。也就是說如果一個數(shù)組中的元素發(fā)生改變，那么另一個數(shù)組中的元素也相應(yīng)地發(fā)生改變。

    var initialArray = [{name: "Luke"}];  
    var copiedArray = [...initialArray];
    
    initialArray[0]["name"] = "Mark";
    
    console.log(initialArray); //Array [{"name": "Mark"}]  
    console.log(copiedArray); //Array [{"name": "Mark"}]
連接數(shù)組

spread syntax 另一個用法是連接數(shù)組，做法是把你想要擴(kuò)展的數(shù)組放到一起。如下：

    const concatinated = [...names, ...names];  
    console.log(concatinated); // ["Luke","Eva","Phil", "Luke","Eva","Phil"]
把獨(dú)立變量擴(kuò)展到一起

除了把元素復(fù)制到一個新數(shù)組中，還可以把獨(dú)立變量一起擴(kuò)展到某數(shù)組中。下面舉個例子，把第一個元素和 names 數(shù)組擴(kuò)展到一起。

    const first = ["Emily", ...names];  
    console.log(first); // ["Emily","Luke","Eva","Phil"]

還可以把獨(dú)立變量放到 names 的后面。

    const last = [...names, "Emily"];  
    console.log(last); // ["Luke","Eva","Phil", "Emily"]
在函數(shù)調(diào)用中使用 spread syntax

你已經(jīng)掌握了如何在數(shù)組中運(yùn)用 spread syntax，現(xiàn)在我們來看一下如何在函數(shù)調(diào)用中使用。

假設(shè)我們有個簡單函數(shù) —— printer —— 接受三個參數(shù)，并且打印出來。

    const printer = (name1, name2, name3) => {  
        console.log(`Names: ${name1}, ${name2} and ${name3}`);
    };

依照 printer 函數(shù)定義，可以使用 spread syntax 把數(shù)組元素應(yīng)用于 printer 函數(shù)。

    printer(...names); // Names: Luke, Eva and Phil

和數(shù)組的用法一樣，可以把獨(dú)立變量一起輸出。我們添加 ‘Emily’ 作為 printer 函數(shù)的第一個參數(shù)，后面跟著 ...names。

    printer("Emily", ...names); // Names: Emily, Luke and Eva

如果傳遞給函數(shù)過多的參數(shù)，那么超過函數(shù)參數(shù)個數(shù)的元素將會被忽略掉。

Bonus：spread syntax 應(yīng)用于對象字面值！

這個特征是基于 ECMAScript 的附加特征。但是目前使用它需要 babel 插件，叫做： babel-plugin-transform-object-rest-spread。

通過 spread syntax 這種變體，你可以把兩個對象擴(kuò)展到一起。假設(shè)你有兩個對象包含了個人信息 —— 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 的用法。后面我們會繼續(xù)介紹 ES6 新特性，敬請繼續(xù)關(guān)注！

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點(diǎn)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82963.html

相關(guān)文章

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

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

    ZoomQuiet 評論0 收藏0

  • ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

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

    snowLu 評論0 收藏0

  • es6必會之let && const

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

    ygyooo 評論0 收藏0

  • JavaScript30秒， 從入門到放棄

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

    TNFE 評論0 收藏0

  • React 深入系列３：Props 和 State

    摘要：當(dāng)真正執(zhí)行狀態(tài)修改時，依賴的并不能保證是最新的，因?yàn)闀讯啻蔚男薷暮喜⒊梢淮?，這時，還是等于這幾次修改發(fā)生前的。下篇預(yù)告深入系列組件的生命周期新書推薦進(jìn)階之路作者徐超畢業(yè)于浙江大學(xué)，碩士，資深前端工程師，長期就職于能源物聯(lián)網(wǎng)公司遠(yuǎn)景智能。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請注明作者及出處 React 深入系列3：Props 和 State React 深入系列，深...

    endiat 評論0 收藏0

發(fā)表評論

0條評論

xuweijian

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<