為了保證的可讀性，本文采用意譯而非直譯。

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)桃江,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

本文主要講解怎么提高展開運(yùn)算的性能，在此之前先簡單說說展開運(yùn)算在數(shù)組中的工作原理。

展開運(yùn)算符或三個(gè)點(diǎn)，接受一個(gè)數(shù)組數(shù)組或通常是可迭代的[... arrayOrIterable]并將數(shù)組元素分解，并使用這些分解部分構(gòu)造一個(gè)新數(shù)組。

展開運(yùn)算符可以放在數(shù)組中的任何位置：

const?numbers?=?[1,?2,?3];
[0,?...numbers];?//?=>?[0,?1,?2,?3][0,?...numbers,?4];?//?=>?[0,?1,?2,?3,?4][...numbers,?4];?//?=>?[1,?2,?3,?4]復(fù)制代碼

現(xiàn)在有一個(gè)有趣的問題，展開運(yùn)算符在數(shù)組中的位置是否可以提高性能?讓咱們來look look。

1. 附加到頭部和尾部函數(shù)

在開始對(duì)比性能之前，先定義兩個(gè)函數(shù)。

第一個(gè)函數(shù)：appendToTail()：

function?appendToTail(item,?array)?{?return?[...array,?item];
}const?numbers?=?[1,?2,?3];
appendToTail(10,?numbers);?//?=>?[1,?2,?3,?10]復(fù)制代碼

appendToTail()函數(shù)功能主要是將 item插入數(shù)組的末尾。

第二個(gè)函數(shù) appendToHead()：

function?appendToHead(item,?array)?{?return?[item,?...array];
}const?numbers?=?[1,?2,?3];
appendToHead(10,?numbers);?//?=>?[10,?1,?2,?3]復(fù)制代碼

appendToHead() 是一個(gè)純函數(shù)，它返回一個(gè)新數(shù)組，通過[item，... array]騷操作將 item 放到所傳入數(shù)組的后面。

乍一看，沒有理由認(rèn)為這些函數(shù)的性能會(huì)不同，但是，事實(shí)勝于熊辯，來 look look.

2. 性能測(cè)試

在MacBook Pro筆記本電腦上用以下3個(gè)瀏覽器的運(yùn)行[... array，item] 和 [item，... array]，來看看對(duì)應(yīng)的性能：

• Chrome 76

• Firefox 68

• Safari 12.1

測(cè)試結(jié)果：

如上面所看到，在Firefox和Safari瀏覽器中[... array，item]和[item，... array]的性能基本一樣。

但是，在Chrome中，[... array，item]的執(zhí)行速度比[item，... array]快兩倍。這個(gè)結(jié)果對(duì)咱們來說很有用。

要在Chrome中提高展開運(yùn)算符的性能，只需要將展開操作放到數(shù)組的開頭就哦了。

const?result?=?[...array,?item];
復(fù)制代碼

但這又是為啥，為什么會(huì)發(fā)生這種情況？

3.快速路徑優(yōu)化（ fast-path optimization）

啟動(dòng)V8引擎的 7.2版本（為Chrome中的JS執(zhí)行提供支持），可以對(duì)展開運(yùn)算符進(jìn)行新的優(yōu)化：快速路徑優(yōu)化。

簡單說，它的工作原理如下：

如果沒有這種優(yōu)化，當(dāng)引擎遇到一個(gè)展開操作符[...iterable, item]，它調(diào)用iterable對(duì)象的iterator (iterator.next())方法。在每次迭代中，最后返回的數(shù)組的內(nèi)存都會(huì)增加，并將迭代結(jié)果添加到其中。

但是快速路徑優(yōu)化檢測(cè)到一個(gè)已知的可迭代對(duì)象(就像一個(gè)整數(shù)數(shù)組)，并完全跳過iterator對(duì)象的創(chuàng)建。然后，引擎讀取擴(kuò)展數(shù)組的長度，只為結(jié)果數(shù)組分配一次內(nèi)存。然后傳遞展開數(shù)組的索引，將每個(gè)元素添加到結(jié)果數(shù)組中。

快速路徑優(yōu)化會(huì)跳過迭代對(duì)象的創(chuàng)建，只為結(jié)果分配一次內(nèi)存，從而性能提高。

4.支持?jǐn)?shù)據(jù)結(jié)構(gòu)

快速路徑優(yōu)化適用于以下標(biāo)準(zhǔn)JS數(shù)據(jù)結(jié)構(gòu)。

array

const?numbers?=?[1,?2,?3,?4];
[...numbers,?5];?//?=>?[1,?2,?3,?4,?5]復(fù)制代碼

string

const?message?=?'Hi';
[...message,?'!'];?//?=>?['H',?'i',?'!']
復(fù)制代碼

set

const?colors?=?new?Set(['blue',?'white']);
[...colors,?'green'];?//?=>?['blue',?'white',?'green']
[...colors.values(),?'green'];?//?=>?['blue',?'white',?'green']
[...colors.keys(),?'green'];?//?=>?['blue',?'white',?'green']
復(fù)制代碼

map

關(guān)于map，只支持map.keys()和map.values()方法

const?names?=?new?Map([[5,?'five'],?[7,?'seven']]);
[...names.values(),?'ten'];?//?=>?['five',?'seven',?'ten']
[...names.keys(),?10];?//?=>?[5,?7,?10]
復(fù)制代碼

總結(jié)

當(dāng)展開數(shù)組位于數(shù)組文本的開頭時(shí)，咱們可以通過快速路徑優(yōu)化獲得性能提升。該優(yōu)化在V8引擎v7.2中可用(在Chrome v72和NodeJS v12中提供)。

通過快速路徑優(yōu)化，[... array，item]的執(zhí)行速度至少比[item，... array]快兩倍。

請(qǐng)注意，雖然f快速路徑優(yōu)化確實(shí)很有用，但是在大多數(shù)情況下，可以不用強(qiáng)制進(jìn)行優(yōu)化，因?yàn)樽罱K用戶很可能不會(huì)感覺到差別，當(dāng)然，如果咱們?cè)谔幚泶笮蛿?shù)組，就可能些優(yōu)化方案。

分享名稱：JS中，如何提高展開運(yùn)算符的性能
文章路徑：http://www.chinadenli.net/article28/gcsjcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、微信小程序、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)