建站
咨詢
售后
建站咨詢
新聞中心
為了保證的可讀性，本文采用意譯而非直譯。
我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、礦區(qū)ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的礦區(qū)網(wǎng)站制作公司
本文主要講解怎么提高展開運算的性能，在此之前先簡單說說展開運算在數(shù)組中的工作原理。
展開運算符或三個點，接受一個數(shù)組數(shù)組或通常是可迭代的[... arrayOrIterable]并將數(shù)組元素分解，并使用這些分解部分構(gòu)造一個新數(shù)組。
展開運算符可以放在數(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)在有一個有趣的問題，展開運算符在數(shù)組中的位置是否可以提高性能?讓咱們來look look。
1. 附加到頭部和尾部函數(shù)
在開始對比性能之前，先定義兩個函數(shù)。
第一個函數(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ù)組的末尾。
第二個函數(shù) appendToHead()：
function?appendToHead(item,?array)?{?return?[item,?...array];
}const?numbers?=?[1,?2,?3];
appendToHead(10,?numbers);?//?=>?[10,?1,?2,?3]復(fù)制代碼appendToHead() 是一個純函數(shù)，它返回一個新數(shù)組，通過[item，... array]騷操作將 item 放到所傳入數(shù)組的后面。
乍一看，沒有理由認為這些函數(shù)的性能會不同，但是，事實勝于熊辯，來 look look.
2. 性能測試
在MacBook Pro筆記本電腦上用以下3個瀏覽器的運行[... array，item] 和 [item，... array]，來看看對應(yīng)的性能：
Chrome 76
Firefox 68
Safari 12.1
測試結(jié)果：
如上面所看到，在Firefox和Safari瀏覽器中[... array，item]和[item，... array]的性能基本一樣。
但是，在Chrome中，[... array，item]的執(zhí)行速度比[item，... array]快兩倍。這個結(jié)果對咱們來說很有用。
要在Chrome中提高展開運算符的性能，只需要將展開操作放到數(shù)組的開頭就哦了。
const?result?=?[...array,?item]; 復(fù)制代碼
但這又是為啥，為什么會發(fā)生這種情況？
3.快速路徑優(yōu)化（ fast-path optimization）
啟動V8引擎的 7.2版本（為Chrome中的JS執(zhí)行提供支持），可以對展開運算符進行新的優(yōu)化：快速路徑優(yōu)化。
簡單說，它的工作原理如下：
如果沒有這種優(yōu)化，當(dāng)引擎遇到一個展開操作符[...iterable, item]，它調(diào)用iterable對象的iterator (iterator.next())方法。在每次迭代中，最后返回的數(shù)組的內(nèi)存都會增加，并將迭代結(jié)果添加到其中。
但是快速路徑優(yōu)化檢測到一個已知的可迭代對象(就像一個整數(shù)數(shù)組)，并完全跳過iterator對象的創(chuàng)建。然后，引擎讀取擴展數(shù)組的長度，只為結(jié)果數(shù)組分配一次內(nèi)存。然后傳遞展開數(shù)組的索引，將每個元素添加到結(jié)果數(shù)組中。
快速路徑優(yōu)化會跳過迭代對象的創(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ù)組文本的開頭時，咱們可以通過快速路徑優(yōu)化獲得性能提升。該優(yōu)化在V8引擎v7.2中可用(在Chrome v72和NodeJS v12中提供)。
通過快速路徑優(yōu)化，[... array，item]的執(zhí)行速度至少比[item，... array]快兩倍。
請注意，雖然f快速路徑優(yōu)化確實很有用，但是在大多數(shù)情況下，可以不用強制進行優(yōu)化，因為最終用戶很可能不會感覺到差別，當(dāng)然，如果咱們在處理大型數(shù)組，就可能些優(yōu)化方案。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前名稱：JS中，如何提高展開運算符的性能-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://www.dlmjj.cn/article/disjoi.html
