JavaScript Spread Syntax (...)的十種使用方法
前言
擴(kuò)展語(yǔ)法—Spread Syntax(…) 是 ES6 中引入的一個(gè)新特性,它允許我們從可迭代對(duì)象中快速提取元素。使用這種語(yǔ)法,我們可以避免使用大量復(fù)雜的 API,編寫(xiě)更簡(jiǎn)潔的代碼??赐赀@篇文章,相信你會(huì)喜歡這個(gè)功能的。
1、復(fù)制一個(gè)數(shù)組
復(fù)制數(shù)組的傳統(tǒng)方法是使用數(shù)組的切片方法。
let arr = [1, 2, 3, [4, 5]]; let copy = arr.slice() console.log(copy) // [1, 2, 3, [4, 5]];;
但是, slice 方法最初是為了捕獲數(shù)組的片段,而不是復(fù)制它們。這個(gè) API 很容易忘記,但是使用擴(kuò)展語(yǔ)法非常簡(jiǎn)單明了:
2、復(fù)制一個(gè)對(duì)象
要復(fù)制對(duì)象,您可以使用 Object.assign() :
let user = { name: 'bytefish', url: 'https://bytefish.medium.com'} let copy = Object.assign({}, user) console.log(copy);
輸出:
Object {name: "bytefish", url: "https://bytefish.medium.com"}
使用擴(kuò)展語(yǔ)法:
let user = { name: 'bytefish', url: 'https://bytefish.medium.com'} let copy = {...user} console.log(copy);
輸出:
Object {name: "bytefish", url: "https://bytefish.medium.com"}
使用擴(kuò)展語(yǔ)法,您可以提取對(duì)象的所有可枚舉屬性并將它們添加到新對(duì)象中。
3、將元素添加到數(shù)組的開(kāi)頭或結(jié)尾
在數(shù)組的開(kāi)頭和結(jié)尾添加元素是一項(xiàng)頻繁的任務(wù),數(shù)組提供了 push 和 unshift 方法:
let arr = [3] arr.unshift(1, 2) arr.push(4, 5) console.log(arr);
輸出:
[1, 2, 3, 4, 5]
如果我們使用擴(kuò)展語(yǔ)法,代碼會(huì)更加簡(jiǎn)潔易懂:
let arr = [3] let copy = [1, 2, ...arr, 4, 5] console.log(copy);
輸出:
[1, 2, 3, 4, 5]
注意:arr.push 和 arr.unshift 修改當(dāng)前數(shù)組,而擴(kuò)展語(yǔ)法創(chuàng)建一個(gè)新數(shù)組。你應(yīng)該根據(jù)自己的需求選擇合適的方法。
4、合并數(shù)組
傳統(tǒng)方式:
let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let arr3 = arr1.concat( arr2 ) console.log(arr3);
使用擴(kuò)展語(yǔ)法:
let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let arr3 = [...arr1, ...arr2] console.log(arr3);
輸出:
[1, 2, 3, 4, 5, 6]
5、合并對(duì)象
傳統(tǒng)方式:
let p1 = { name: 'bytefish' } let p2 = { tag: 'JavaScript' } let p3 = Object.assign({}, p1, p2) console.log(p3) ;
輸出:
Object {name: "bytefish", tag: "JavaScript"}
使用擴(kuò)展語(yǔ)法:
let p1 = { name: 'bytefish' } let p2 = { tag: 'JavaScript' } let p3 = {...p1, ...p2} console.log(p3) ;
輸出:
Object {name: "bytefish", tag: "JavaScript"}
6、 將字符串轉(zhuǎn)換為數(shù)組
傳統(tǒng)方式:
let str = 'bytefish' let arr = str.split('') console.log(arr) ;
輸出:
["b", "y", "t", "e", "f", "i", "s", "h"]
使用擴(kuò)展語(yǔ)法:
let str = 'bytefish' let arr = [...str] console.log(arr) ;
輸出:
["b", "y", "t", "e", "f", "i", "s", "h"]
7、 將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組
JavaScript 中的一些數(shù)據(jù)結(jié)構(gòu)看起來(lái)像數(shù)組但不是數(shù)組,例如 NodeList、函數(shù)的參數(shù)對(duì)象等。
與數(shù)組一樣,它們是順序結(jié)構(gòu),其中的元素可以通過(guò)索引訪問(wèn)。但是它們沒(méi)有普通數(shù)組的一些屬性和方法。
function sum(){ console.log(arguments) console.log(arguments instanceof Array) } sum(1, 2, 3);
輸出:
Arguments {0: 1, 1: 2, 2: 3}
false
為了使用這些類似數(shù)組的對(duì)象,我們有時(shí)需要將它們轉(zhuǎn)換為數(shù)組。
傳統(tǒng)方式:
function foo(){ let argArray = Array.from(arguments) console.log(argArray instanceof Array) } foo();
輸出:
true
使用擴(kuò)展語(yǔ)法:
function sum(){ console.log(arguments) let argArray = [...arguments] console.log(argArray instanceof Array) } sum(1, 2, 3);
Arguments {0: 1, 1: 2, 2: 3} true
在 JavaScript 中,Rest Syntax 和 Spread Syntax 的表示法是相同的,都是用三個(gè)點(diǎn)(…)表示。
但它們也有一些微妙的區(qū)別:
- Rest 語(yǔ)法將所有剩余元素收集到一個(gè)數(shù)組或?qū)ο笾小?/li>
- 擴(kuò)展語(yǔ)法將收集的元素(例如數(shù)組)解壓縮為單個(gè)元素。
這里還有幾個(gè)同樣使用Spread Syntax (…)的例子,理論上應(yīng)該屬于 Rest Syntax。雖然Spread語(yǔ)法和Rest語(yǔ)法相似,但我認(rèn)為沒(méi)有必要關(guān)心這些概念上的細(xì)微差別。所以我也會(huì)在這里放幾個(gè) Rest Syntax 用法的例子。
8、提取對(duì)象
假設(shè)有一個(gè)對(duì)象:
let httpOptions = { method: 'POST', url: 'https://api.github.com', returnType: 'json', timeout: 2000, data: { name: 'bytefish' } }
我們想拿到這個(gè)對(duì)象的method和url,把其他字段放在一起,怎么辦呢?
使用擴(kuò)展語(yǔ)法,我們可以這樣寫(xiě):
提取這個(gè)對(duì)象的屬性只需要一行代碼,幾乎找不到更簡(jiǎn)潔的寫(xiě)法。
9、無(wú)限參數(shù)的函數(shù)
假設(shè)我們需要編寫(xiě)一個(gè)求和函數(shù),它可以接受任意數(shù)量的參數(shù)并將它們相加。我們?nèi)绾尉帉?xiě)這樣的函數(shù)?
新手程序員可能想知道一個(gè)函數(shù)如何可以接受無(wú)限數(shù)量的參數(shù)。他可能會(huì)使用一個(gè)數(shù)組作為參數(shù)并編寫(xiě)如下內(nèi)容:
function sum(arr){ return arr.reduce((acc, cur) => acc + cur) } console.log(sum([1, 2, 3, 4]));
不過(guò)這種寫(xiě)法需要我們把參數(shù)組合成一個(gè)數(shù)組來(lái)傳遞,不是很優(yōu)雅。一個(gè)更好的想法是使用函數(shù)的參數(shù)對(duì)象來(lái)動(dòng)態(tài)讀取參數(shù)。
function sum() { let argsArray = Array.from(arguments) return argsArray.reduce((acc, cur) => acc + cur) } console.log( sum(1, 2, 3, 4) ) // 10 console.log( sum(1, 3, 5, 7) ) // 16;
如果我們使用擴(kuò)展語(yǔ)法,我們可以直接將所有參數(shù)組合在一起:
function sum(...arr) { return arr.reduce((acc, cur) => acc + cur) } console.log( sum(1, 2, 3, 4) ) // 10 console.log( sum(1, 3, 5, 7) ) // 16;
這樣,無(wú)論我們傳遞多少個(gè)參數(shù),它們都會(huì)被放在 arr 中。這顯然比第一個(gè)更優(yōu)雅,也比第二個(gè)更方便。
Math.max
許多 JavaScript 內(nèi)置函數(shù)都使用這種技術(shù),例如 Math.max。
如您所見(jiàn),Math.max 可以接受任意數(shù)量的參數(shù)。
如果我們想獲得數(shù)組中的最大或最小數(shù)字,我們可以這樣寫(xiě):
let arr = [23, 34, 53, 3] console.log(Math.max(...arr)) console.log(Math.min(...arr));
輸出:
53
3
10、Rest Parameters
除了上面的用法,我們還可以使用rest參數(shù)。假設(shè)我們有一個(gè)函數(shù),它的前兩個(gè)參數(shù)是固定的,其余參數(shù)是不確定的,所以我們可以這樣寫(xiě):
function team(leader, viceLeader, ...members){ console.log('leader: ' + leader) console.log('vice leader: ' + viceLeader) members.forEach(member => console.log('member: ' + member)) } team('Jon', 'Jack', 'Bob', 'Alice');
輸出:
function team(leader, viceLeader, ...members){
console.log('leader: ' + leader)
console.log('vice leader: ' + viceLeader)
members.forEach(member => console.log('member: ' + member))
}
team('Jon', 'Jack', 'Bob', 'Alice');
結(jié)論
我們終于學(xué)會(huì)了它,在 JavaScript 中使用擴(kuò)展語(yǔ)法的 10 種方法。我希望你發(fā)現(xiàn)它對(duì)你很有用。如果是這樣,請(qǐng)務(wù)必在評(píng)論中告訴我。
到此這篇關(guān)于JavaScript Spread Syntax (...)的十種使用方法的文章就介紹到這了,更多相關(guān)JS 擴(kuò)展語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript函數(shù)緩存的實(shí)現(xiàn)及應(yīng)用場(chǎng)景
Javascript函數(shù)緩存是一種提高網(wǎng)頁(yè)性能的重要技術(shù),通過(guò)將函數(shù)結(jié)果存儲(chǔ)在緩存中,避免重復(fù)計(jì)算,從而提高頁(yè)面加載速度和響應(yīng)速度,本文主要介紹了Javascript函數(shù)緩存的實(shí)現(xiàn)及應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12javascript 漢字轉(zhuǎn)拼音實(shí)現(xiàn)代碼
主要是提前定義了很多文字,這樣的方法不是很是,如果庫(kù)中沒(méi)有這個(gè)詞,是看不到相關(guān)信息的。2009-12-12Javascript基礎(chǔ)之?dāng)?shù)組的使用
這篇文章主要介紹了Javascript基礎(chǔ)之?dāng)?shù)組的使用的相關(guān)資料,介紹的非常詳解,具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05js 實(shí)現(xiàn) input type="file" 文件上傳示例代碼
在開(kāi)發(fā)中,文件上傳必不可少但是它長(zhǎng)得又丑、瀏覽的字樣不能換,一般會(huì)讓其隱藏點(diǎn)其他的標(biāo)簽(圖片等)來(lái)時(shí)實(shí)現(xiàn)選擇文件上傳功能2013-08-08Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框(19)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之Popover提示框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12通過(guò)JavaScript下載文件到本地的方法(單文件)
這篇文章主要介紹了通過(guò)JavaScript下載文件到本地的方法(單文件),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03js遍歷詳解(forEach, map, for, for...in, for...of)
在本篇文章里小編給大家整理的是關(guān)于js中的各種遍歷(forEach, map, for, for...in, for...of)相關(guān)知識(shí)點(diǎn)用法總結(jié),需要的朋友們參考下。2019-08-08