資訊專欄INFORMATION COLUMN
摘要：也就是說(shuō)如果一個(gè)數(shù)組中的元素發(fā)生改變，那么另一個(gè)數(shù)組中的元素也相應(yīng)地發(fā)生改變。依照函數(shù)定義，可以使用把數(shù)組元素應(yīng)用于函數(shù)。應(yīng)用于對(duì)象字面值這個(gè)特征是基于的附加特征。
編譯：胡子大哈
翻譯原文：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)載請(qǐng)注明出處，保留原文鏈接以及作者信息
上一篇文章中，我介紹了一些關(guān)于 ES6 解構(gòu)方法的新特性。
本文中我們一起來(lái)看一下另外一個(gè) JavaScript 新增語(yǔ)法 —— spread syntax（擴(kuò)展語(yǔ)法）。
spread syntax 實(shí)際上非常簡(jiǎn)單，假設(shè)你的可遍歷對(duì)象中有一些元素（如數(shù)組），你想把這些元素應(yīng)用于另一個(gè)新的數(shù)組或者一個(gè)函數(shù)調(diào)用。通常的做法，你會(huì)從索引開(kāi)始，利用循環(huán)訪問(wèn)每個(gè)元素。但是通過(guò) spread syntax 這個(gè)事情就變的很簡(jiǎn)單了，你可以使用三個(gè)點(diǎn)作為前綴，即 ... 應(yīng)用于可遍歷對(duì)象上，問(wèn)題就解決了。
為了更直觀，我們一起看幾個(gè)用例就明白了。
復(fù)制一個(gè)數(shù)組假設(shè)有一個(gè)數(shù)組名字是 names。
const names = ["Luke","Eva","Phil"];
如何把 names 里面的元素復(fù)制到一個(gè)新數(shù)組中呢？
傳統(tǒng)的做法是用循環(huán)來(lái)實(shí)現(xiàn)，但是使用 spread syntax，解決方法很簡(jiǎn)潔。
const copiedList = [...names]
console.log(copiedList); // ["Luke","Eva","Phil"]
可以看到比循環(huán)方法簡(jiǎn)單的多。
這里值得一提的是，這里復(fù)制的是引用。也就是說(shuō)如果一個(gè)數(shù)組中的元素發(fā)生改變，那么另一個(gè)數(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 另一個(gè)用法是連接數(shù)組，做法是把你想要擴(kuò)展的數(shù)組放到一起。如下：
const concatinated = [...names, ...names];
console.log(concatinated); // ["Luke","Eva","Phil", "Luke","Eva","Phil"]
把獨(dú)立變量擴(kuò)展到一起
除了把元素復(fù)制到一個(gè)新數(shù)組中，還可以把獨(dú)立變量一起擴(kuò)展到某數(shù)組中。下面舉個(gè)例子，把第一個(gè)元素和 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)在我們來(lái)看一下如何在函數(shù)調(diào)用中使用。
假設(shè)我們有個(gè)簡(jiǎn)單函數(shù) —— printer —— 接受三個(gè)參數(shù)，并且打印出來(lái)。
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ù)的第一個(gè)參數(shù)，后面跟著 ...names。
printer("Emily", ...names); // Names: Emily, Luke and Eva
如果傳遞給函數(shù)過(guò)多的參數(shù)，那么超過(guò)函數(shù)參數(shù)個(gè)數(shù)的元素將會(huì)被忽略掉。
Bonus：spread syntax 應(yīng)用于對(duì)象字面值！這個(gè)特征是基于 ECMAScript 的附加特征。但是目前使用它需要 babel 插件，叫做： babel-plugin-transform-object-rest-spread。
通過(guò) spread syntax 這種變體，你可以把兩個(gè)對(duì)象擴(kuò)展到一起。假設(shè)你有兩個(gè)對(duì)象包含了個(gè)人信息 —— nameAndAge 和 about。
const nameAndAge = {
name: "Luke",
age: 24,
}
const about = {
work: "Developer",
hobby: "Skydiving",
}
接下來(lái)用 spread syntax 把兩個(gè)對(duì)象合并到一起。
const person = {
...nameAndAge,
...about,
}
console.log(person);
//{
// "age": 24,
// "hobby": "Skydiving",
// "name": "Luke",
// "work": "Developer"
//}
OK，這篇文章介紹了 spread syntax 的用法。后面我們會(huì)繼續(xù)介紹 ES6 新特性，敬請(qǐng)繼續(xù)關(guān)注！
我最近正在寫(xiě)一本《React.js 小書(shū)》，對(duì) React.js 感興趣的童鞋，歡迎指點(diǎn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82963.html
摘要：我們先來(lái)看一看的官方定義展開(kāi)語(yǔ)法可以在函數(shù)調(diào)用數(shù)組構(gòu)造時(shí)將數(shù)組表達(dá)式或者在語(yǔ)法層面展開(kāi)還可以在構(gòu)造字面量對(duì)象時(shí)將對(duì)象表達(dá)式按的方式展開(kāi)。 我們先來(lái)看一看MDN的官方定義 展開(kāi)語(yǔ)法(Spread syntax), 可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時(shí), 將數(shù)組表達(dá)式或者string在語(yǔ)法層面展開(kāi)；還可以在構(gòu)造字面量對(duì)象時(shí), 將對(duì)象表達(dá)式按key-value的方式展開(kāi)。(譯者注: 字面量一般指 [1...
摘要：變量聲明與賦值值傳遞淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代開(kāi)發(fā)語(yǔ)法基礎(chǔ)與實(shí)踐技巧系列文章。變量聲明在中，基本的變量聲明可以用方式允許省略，直接對(duì)未聲明的變量賦值。按值傳遞中函數(shù)的形參是被調(diào)用時(shí)所傳實(shí)參的副本。 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代 JavaScript 開(kāi)發(fā)：語(yǔ)法基礎(chǔ)與實(shí)踐技巧系列文章。本文首先介紹 ES6 中常用的三種變量聲明方式，然后討論了...
摘要：副作用，無(wú)副作用可執(zhí)行和關(guān)鍵詞。和不能像一樣同一個(gè)下聲明多次和不會(huì)像一樣變量聲明提升原因是，存在因此不能，賦值前使用變量。 showImg(https://segmentfault.com/img/bVbhPlD?w=1271&h=715); 關(guān)鍵詞： let ，const， blocking scope ，temporal dead zone，redeclaration，reassi...
摘要：三元運(yùn)算符遍歷過(guò)程中判斷遍歷數(shù)組值是否嚴(yán)格等于指定值，是，次數(shù)否，。三元運(yùn)算符判斷是否是一個(gè)數(shù)組，是，返回遞歸運(yùn)用后的值否，直接返回。秒，從入門(mén)到放棄博客地址秒，從入門(mén)到放棄微信公眾號(hào)地址秒，從入門(mén)到放棄 有意思 最近很火的github上的庫(kù)30-seconds-of-code，特別有意思，代碼也很優(yōu)雅。 能學(xué)es6 自己翻譯，能學(xué)英語(yǔ) 代碼很美，很優(yōu)雅，美即正義 函數(shù)式表達(dá)，享受 ...
摘要：當(dāng)真正執(zhí)行狀態(tài)修改時(shí)，依賴的并不能保證是最新的，因?yàn)闀?huì)把多次的修改合并成一次，這時(shí)，還是等于這幾次修改發(fā)生前的。下篇預(yù)告深入系列組件的生命周期新書(shū)推薦進(jìn)階之路作者徐超畢業(yè)于浙江大學(xué)，碩士，資深前端工程師，長(zhǎng)期就職于能源物聯(lián)網(wǎng)公司遠(yuǎn)景智能。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請(qǐng)注明作者及出處 React 深入系列3：Props 和 State React 深入系列，深...
閱讀 975·2019-08-30 15:54
閱讀 499·2019-08-30 12:51
閱讀 2100·2019-08-29 16:28
閱讀 2897·2019-08-29 16:10
閱讀 2391·2019-08-29 14:21
閱讀 475·2019-08-29 14:09
閱讀 2201·2019-08-23 16:13
閱讀 1288·2019-08-23 13:59
