正式開始前需要聲明，本文并不是要講解 JavaScript 數(shù)組基礎(chǔ)知識，也不會涉及語法和使用案例。本文講得更多的是內(nèi)存、優(yōu)化、語法差異、性能、近來的演進。

在使用 JavaScript 前，我對 C、C++、C# 這些已經(jīng)頗為熟悉。與許多 C/C++ 開發(fā)者一樣，JavaScript 給我的第一印象并不好。

Array 是主要原因之一。JavaScript 數(shù)組不是連續(xù)（contiguous）的，其實現(xiàn)類似哈希映射（hash-maps）或字典（dictionaries）。我覺得這有點像是一門 B 級語言，數(shù)組實現(xiàn)根本不恰當。自那以后，JavaScript 和我對它的理解都發(fā)生了變化，很多變化。

為什么說 JavaScript 數(shù)組不是真正的數(shù)組

在聊 JavaScript 之前，先講講 Array 是什么。

數(shù)組是一串連續(xù)的內(nèi)存位置，用來保存某些值。注意重點，“連續(xù)”（continuous，或 contiguous），這很重要。

上圖展示了數(shù)組在內(nèi)存中存儲方式。這個數(shù)組保存了 4 個元素，每個元素 4 字節(jié)。加起來總共占用了 16 字節(jié)的內(nèi)存區(qū)。

假設(shè)我們聲明了 tinyInt arr[4];，分配到的內(nèi)存區(qū)的地址從 1201 開始。一旦需要讀取 arr[2]，只需要通過數(shù)學計算拿到 arr[2] 的地址即可。計算 1201 + (2 X 4)，直接從 1209 開始讀取即可。

JavaScript 中的數(shù)據(jù)是哈希映射，可以使用不同的數(shù)據(jù)結(jié)構(gòu)來實現(xiàn)，如鏈表。所以，如果在 JavaScript 中聲明一個數(shù)組 var arr = new Array(4)，計算機將生成類似上圖的結(jié)構(gòu)。如果程序需要讀取 arr[2]，則需要從 1201 開始遍歷尋址。

以上急速 JavaScript 數(shù)組與真實數(shù)組的不同之處。顯而易見，數(shù)學計算比遍歷鏈表快。就長數(shù)組而言，情況尤其如此。

JavaScript 數(shù)組的進化

不知你是否記得我們對朋友入手的 256MB 內(nèi)存的電腦羨慕得要死的日子？而今天，8GB 內(nèi)存遍地都是。

與此類似，JavaScript 這門語言也進化了不少。從 V8、SpiderMonkey 到 TC39 和與日俱增的 Web 用戶，巨大的努力已經(jīng)使 JavaScript 成為世界級必需品。一旦有了龐大的用戶基礎(chǔ)，性能提升自然是硬需求。

實際上，現(xiàn)代 JavaScript 引擎是會給數(shù)組分配連續(xù)內(nèi)存的 —— 如果數(shù)組是同質(zhì)的（所有元素類型相同）。優(yōu)秀的程序員總會保證數(shù)組同質(zhì)，以便 JIT（即時編譯器）能夠使用 c 編譯器式的計算方法讀取元素。

不過，一旦你想要在某個同質(zhì)數(shù)組中插入一個其他類型的元素，JIT 將解構(gòu)整個數(shù)組，并按照舊有的方式重新創(chuàng)建。

因此，如果你的代碼寫得不太糟，JavaScript Array 對象在幕后依然保持著真正的數(shù)組形式，這對現(xiàn)代 JS 開發(fā)者來說極為重要。

此外，數(shù)組跟隨 ES2015/ES6 有了更多的演進。TC39 決定引入類型化數(shù)組（Typed Arrays），于是我們就有了 ArrayBuffer。

ArrayBuffer 提供一塊連續(xù)內(nèi)存供我們隨意操作。然而，直接操作內(nèi)存還是太復雜、偏底層。于是便有了處理 ArrayBuffer 的視圖（View）。目前已有一些可用視圖，未來還會有更多加入。

var buffer = new ArrayBuffer(8);
var view  = new Int32Array(buffer);
view[0] = 100;

了解更多關(guān)于類型化數(shù)組（Typed Arrays）的知識，請訪問 MDN 文檔。

高性能、高效率的類型化數(shù)組在 WebGL 之后被引入。WebGL 工作者遇到了極大的性能問題，即如何高效處理二進制數(shù)據(jù)。另外，你也可以使用 SharedArrayBuffer 在多個 Web Worker 進程之間共享數(shù)據(jù)，以提升性能。

從簡單的哈希映射到現(xiàn)在的 SharedArrayBuffer，這相當棒吧？

舊式數(shù)組 vs 類型化數(shù)組：性能

前面已經(jīng)討論了 JavaScript 數(shù)組的演進，現(xiàn)在來測試現(xiàn)代數(shù)組到底能給我們帶來多大收益。下面是我在 Mac 上使用 Node.js 8.4.0 進行的一些微型測試結(jié)果。

舊式數(shù)組：插入

var LIMIT = 10000000;
var arr = new Array(LIMIT);
console.time("Array insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.timeEnd("Array insertion time");

用時：55ms

Typed Array：插入
var LIMIT = 10000000;
var buffer = new ArrayBuffer(LIMIT * 4);
var arr = new Int32Array(buffer);
console.time("ArrayBuffer insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.timeEnd("ArrayBuffer insertion time");

用時：52ms

擦，我看到了什么？舊式數(shù)組和 ArrayBuffer 的性能不相上下？不不不。請記住，前面提到過，現(xiàn)代編譯器已經(jīng)智能化，能夠?qū)⒃仡愋拖嗤膫鹘y(tǒng)數(shù)組在內(nèi)部轉(zhuǎn)換成內(nèi)存連續(xù)的數(shù)組。第一個例子正是如此。盡管使用了 new Array(LIMIT)，數(shù)組實際依然以現(xiàn)代數(shù)組形式存在。

接著修改第一例子，將數(shù)組改成異構(gòu)型（元素類型不完全一致）的，來看看是否存在性能差異。

舊式數(shù)組：插入（異構(gòu)）
var LIMIT = 10000000;
var arr = new Array(LIMIT);
arr.push({a: 22});
console.time("Array insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.timeEnd("Array insertion time");

用時：1207ms

改變發(fā)生在第 3 行，添加一條語句，將數(shù)組變?yōu)楫悩?gòu)類型。其余代碼保持不變。性能差異表現(xiàn)出來了，慢了 22 倍。

舊式數(shù)組：讀取

var LIMIT = 10000000;
var arr = new Array(LIMIT);
arr.push({a: 22});
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
var p;
console.time("Array read time");
for (var i = 0; i < LIMIT; i++) {
//arr[i] = i;
p = arr[i];
}
console.timeEnd("Array read time");

用時：196ms

Typed Array：讀取
var LIMIT = 10000000;
var buffer = new ArrayBuffer(LIMIT * 4);
var arr = new Int32Array(buffer);
console.time("ArrayBuffer insertion time");
for (var i = 0; i < LIMIT; i++) {
arr[i] = i;
}
console.time("ArrayBuffer read time");
for (var i = 0; i < LIMIT; i++) {
var p = arr[i];
}
console.timeEnd("ArrayBuffer read time");

用時：27ms

結(jié)論

類型化數(shù)組的引入是 JavaScript 發(fā)展歷程中的一大步。Int8Array，Uint8Array，Uint8ClampedArray，Int16Array，Uint16Array，Int32Array，Uint32Array，F(xiàn)loat32Array，F(xiàn)loat64Array，這些是類型化數(shù)組視圖，使用原生字節(jié)序（與本機相同）。我們還可以使用 DataView 創(chuàng)建自定義視圖窗口。希望未來會有更多幫助我們輕松操作 ArrayBuffer 的 DataView 庫。

JavaScript 數(shù)組的演進非常 nice?，F(xiàn)在它們速度快、效率高、健壯，在內(nèi)存分配時也足夠智能。

總結(jié)

以上所述是小編給大家介紹的JavaScript 數(shù)組的進化與性能分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論