javascript中怎么提高擴展運算符的性能

這篇“javascript中怎么提高擴展運算符的性能”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“javascript中怎么提高擴展運算符的性能”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

Java可以用來干什么

Java主要應用于：1. web開發(fā)；2. Android開發(fā)；3. 客戶端開發(fā)；4. 網(wǎng)頁開發(fā)；5. 企業(yè)級應用開發(fā)；6. Java大數(shù)據(jù)開發(fā)；7.游戲開發(fā)等。

讓我們首先簡要介紹一下擴展運算符在數(shù)組中的工作原理。

擴展運算符，也就是我們常用的三個，讓數(shù)組展開變成每個小塊。 然后使用中括號語法[]，重新組裝這些小塊構(gòu)造一個新數(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]

回答我們一開始提出的問題，擴展運算符在數(shù)組文字中的位置是否可以提高性能？讓我們往后繼續(xù)探究。

附加到頭部和尾部功能

在開始性能比較之前，讓我們定義兩個函數(shù)。

第一個是appendToTail()：

function appendToTail(item, array) {
  return [...array, item];
}

const numbers = [1, 2, 3];
appendToTail(10, numbers); // => [1, 2, 3, 10]

appendToTail()可以讓你在數(shù)組的末尾插入一個值。 此函數(shù)使用了以下寫法[...array, item]。

第二個是appendToHead()：

function appendToHead(item, array) {
  return [item, ...array];
}

const numbers = [1, 2, 3];
appendToHead(10, numbers); // => [10, 1, 2, 3]

appendToHead()是一個純函數(shù)，它返回一個新數(shù)組，其中添加的值是插入在原數(shù)組的頭部。它使用[item, ...array]。

講道理就上面這兩個函數(shù)的表現(xiàn)，沒有理由認為這些功能會有不一樣的效率。但是事實可能跟我們想象中不一樣，下面讓我們來繼續(xù)測試吧。

性能測試

我用MacBook Pro在以下3個瀏覽器的筆記本電腦上測試[... array, item]和[item, ...array]，對比兩者的性能：

• 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];

但另一個問題出現(xiàn)了：這種問題怎么引起的？

從V8引擎的7.2版本之后，為Chrome中的JavaScript執(zhí)行提供支持，可以對擴展運算符進行新的優(yōu)化：快速路徑優(yōu)化。

用幾句話描述它的工作原理，如下：

如果沒有這個優(yōu)化，當引擎遇到擴展運算符[...iterable, item]時，它會調(diào)用可迭代對象的迭代器iterator.next()。在每次迭代時，結(jié)果數(shù)組的內(nèi)存都會增加，迭代結(jié)果會被添加到結(jié)果數(shù)組中。

但是快速路徑優(yōu)化檢測到已知的可迭代（如整數(shù)數(shù)組）并完全跳過迭代器對象的創(chuàng)建。 然后引擎讀取擴展數(shù)組的長度，僅為結(jié)果數(shù)組分配一次內(nèi)存。 然后通過索引傳播數(shù)組，將每個項目添加到結(jié)果數(shù)組中。

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

支持的數(shù)據(jù)結(jié)構(gòu)

快速路徑優(yōu)化適用于以下標準JavaScript數(shù)據(jù)結(jié)構(gòu)。

數(shù)組

const numbers = [1, 2, 3, 4];

[...numbers, 5]; // => [1, 2, 3, 4, 5]

字符串

const message = 'Hi';

[...message, '!']; // => ['H', 'i', '!']

Sets

const colors = new Set(['blue', 'white']);

[...colors, 'green'];          // => ['blue', 'white', 'green']
[...colors.values(), 'green']; // => ['blue', 'white', 'green']
[...colors.keys(), 'green'];   // => ['blue', 'white', 'green']

Maps

在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]

以上是“javascript中怎么提高擴展運算符的性能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！