爲何說JS數組不是「真正」的數組

前言

數組是咱們前端平常開發中最熟悉的一種數據類型，但你真的瞭解數組嗎？經過本文，你將瞭解：

• JS數組和傳統數組的區別
• V8引擎爲「傳統」數組作了哪些優化
• 快數組和慢數組
• ArrayBuffer

什麼是數組？

數組（Array）在維基百科上的解釋是：

數組是由 相同類型的元素（element）的集合所組成的數據結構，分配一塊 連續內存來存儲。

注意，這裏有兩個關鍵詞：相同類型、連續內存，這也是它的特徵！好，重點來了：

那我怎麼及得JS中的數組元素能夠是各類類型？？？好比下面這樣：

let arr = [100, 'foo', 1.1, {a: 1}];

這就有意思了，按理維基百科對於數組的描述應該是具備必定權威的，難道JS的數組不是真的「數組」？

這麼來看，咱們姑且推斷出一個結論，由於：不一樣數據類型存儲所需空間大小不一樣。
因此：用來存放數組的內存地址必定是連續的（除非類型相同）。
所以咱們大膽猜想，JS中的數組實現必定不是基礎的數據結構實現的。因此，如標題所說的，JS中本來沒有「真正」的數組！這就引發了個人好奇心了，那麼JS中是如何「實現」數組這個概念的呢？ 咱們來一探究竟！

數組中概念一：連續內存

在講連續內存前，先來了解下什麼是內存，知道的本節直接繞過。

1）什麼是內存？

通俗理解，在計算機中，CPU用於數據的運算，而數據來源於硬盤，但考慮到CPU直接從硬盤讀寫數據效率低，因此內存在其中扮演了「搬運工」的角色。

內存是由DRAM（動態隨機存儲器）芯片組成的。DRAM的內部結構能夠說是PC芯片中最簡單的，是由許多重複的「單元」——cell組成，每個cell由一個電容和一個晶體管（通常是N溝道MOSFET）構成，電容可儲存1bit數據量，充放電後電荷的多少（電勢高低）分別對應二進制數據0和1。

DRAM因爲結構簡單，能夠作到面積很小，存儲容量很大。用芯片短暫存儲數據，讀寫的效率要遠高於磁盤。因此內存的運行也決定了計算機的穩定運行。

2）內存和數組的故事

瞭解完什麼是內存後，回過頭再來看一下數組的概念：

數組是由相同類型的元素（element）的集合所組成的數據結構，分配一塊 連續內存來存儲。

那麼數組中的連續內存說的是，經過在內存中劃出一串連續且長度固定的空間，用來於存放一組有限且數據類型相同的數據結構。在C/C++、Java等編譯型語言中數組的實現都是這個。C++數組聲明示例代碼以下：

// 數據類型 數組名[元素數量]
double balance[10];

上述代碼中，須要指定元素類型和數量，這很是重要。細細品味其中的蘊含的內容，將其聯繫到內存以及計算機運行原理信息量很大！

數組中概念二：固定長度

從上面說的就很容易理解，計算機語言設計者爲何要讓C/C++、Java這類編譯型語言在數組的設計上要固定長度。由於數組空間數連續的，因此這就意味着內存中須要有一整塊的空間用來存放數組。若是長度不固定，那麼內存中位於數組以後的區域無法繼續往下分配了！內存不知道當前數組還要不要繼續存放，要多少空間了。畢竟數組後面的空間得要留出來給別人去用，不可能讓你（數組）一直霸佔着對吧。

數組中概念三：相同數據類型

爲何數組的定義須要每一個元素數據類型相同呢。其實比較容易理解了，若是數組容許各類類型的數據，那麼每存入一個元素都要進行裝箱操做，每讀取一個元素又要進行拆箱操做。統一數據類型就能夠省略裝箱和拆箱的步驟了，這樣能提升存儲和讀取的效率。

V8引擎下數組的實現

寫在前面

首先，咱們要了解JS代碼是如何在計算機上被執行的。和Python同樣，它做爲一門解釋型語言，須要宿主環境去對它進行「轉換」，而後再由機器運行機器碼，也就是二進制。咱們平時對JS的討論不少都是（默認）基於瀏覽器來說的，當前大多主流瀏覽器底層都是基於C++開發的，而且Node底層也是基於Chrome V8引擎的JS運行環境，而V8底層也是基於C++來開發的。因此會有開發者覺得JavaScript是用C++寫的，要知道這是不對的。

做爲一門解釋型語言，JS並不是只有C++才能去解析JS，其實還有：

• D：DMDScript
• Java：Rhino、Nashorn、DynJS、Truffle/JS 等
• C#：Managed JScript、SPUR 等等

還有最近熱度不減的Rust：deno（也是基於V8）。因此，咱們要來研究JS中數組的實現就要依賴「解釋」他JS引擎來說了。本文咱們用V8引擎來進行講解。

V8源碼中的JS數組

爲了追蹤JS究竟是如何實現數組的，咱們追蹤到V8中看看它是如何去「解析」JS數組的。下面截圖來自V8源碼：

能夠看到上面截圖1中能夠獲得兩個信息（V8源碼註釋寫的仍是比較詳細的）：

• 一、JSArray數組繼承於JSObject對象
• 二、數組有快慢兩種模式

下面咱們來具體講講。

JS數組就是「對象」

若是說JS中的數組底層是一個對象，那麼咱們就能夠解釋爲何JS中數組能夠放各類類型了。假設咱們猜想是對的，那麼如何來驗證這一點呢？爲此最近花了點時間探索了一番，在網上看了不少資料，也找了不少方法，最終鎖定使用經過觀察JS最終執行生產的字節碼來看最終代碼的轉換。最後選用了GoogleChromeLabs的jsvu，他能夠幫咱們安裝各類JS引擎，也能夠將JS轉爲字節碼。

測試代碼：

const arr = [1, true, 'foo'];

而後使用V8-debug引擎去debug打印他轉譯的字節碼，以下圖所示：


那麼這就能夠得出結論，其實arr就是一個map，它有key，有value，而key就是數組的索引，value就是數組中的元素。

快數組和慢數組

細心的同窗可能發現了，前面截圖的V8源碼註釋中有這樣一段描述：

Such an array can be in one of two modes:
- fast, backing storage is a FixedArray and length <= elements.length();
- slow, backing storage is a HashTable with numbers as keys.

翻譯一下，一個數組含有兩種模式：

• 快（模式）：後備存儲是一個FixedArray，長度 <= elements.length
• 慢（模式）：後備存儲是一個以數字爲鍵的HashTable

那麼來思考下爲何要V8要將數組這樣「設計」，動機是什麼？無非就是爲了提高性能，一說到性能，就不得不提內存，總之這一切無非就是：

犧牲 性能節省 內存，犧牲 內存提升 性能

這是時間換空間，空間換時間的博弈，最後看到底哪一個「划算」（合理）。

快數組

先看快數組，快數組是一種線性存儲，其長度是可變的，能夠動態調整存儲空間。其內部有擴容和收縮機制，來看一下V8中擴容的實現。
源碼（C++）：

./src/objects/js-objects.h

拓容時計算新容量是根據基於舊的容量來的:

新容量 = 舊容量 + 50% + 16

由於JS數組是動態可變的，因此這樣安排的固定空間勢必會形成內存空間的損耗。
而後擴容後會將數組拷貝到新的內存空間：

收縮的實現源碼（C++）:

它的判斷依據是：當前容量是否大於等於當前數組長度的2倍+16，此外的都填入Holes（空洞）對象。什麼是Holes，簡單理解就是數組分配了空間但沒有存入元素，這裏不展開。快數組就是空間換時間來提高JS數組在性能上的缺陷，也能夠說這是參照編譯型語言的設計的一種「數組」。

一句話總結：V8用快數組來實現內存空間的連續（增長內存來提高性能），但因爲JS是弱類型語言，空間沒法固定，因此使用數組的length來做爲依據，在底層進行內存的從新分配。

慢數組

慢數組底層實現使用的是 HashTable 哈希表，相比於快數組，他不用開闢大塊的連續空間，從而節省內存，但無疑執行效率是比快數組要低的（時間換空間）。相關代碼（C++）：

快慢數組之間的轉換

JS中長度不固定，類型不固定，因此咱們在適合的適合會作相應的轉換，以指望它能以最適合當前數組的方式去提高性能。對應源碼：

上面截圖代碼中，返回true就表示應該快數組轉慢數組。第一個紅框表示3*擴容後容量*2 <= 新容量這個對象就改成慢數組。kPreferFastElementsSizeFactor 源碼中聲明以下：

// 此處註釋翻譯：相比於快（模式）元素，若是字典元素能節省很是多的內存空間，那JSObjects更傾向於字典`dictionary`。
  static const uint32_t kPreferFastElementsSizeFactor = 3;

第二個紅框表示索引-當前容量 >= 1024(kMaxGap的值)時，也會從快數組轉爲慢數組。其中 kMaxGap 是一個用於控制快慢數組轉換的試探性常量，源碼中聲明以下：

// 此處註釋翻譯：kMaxGap 是「試探法」常量，用於控制快慢數組的轉換
  static const uint32_t kMaxGap = 1024;

也就是說當前數組在從新賦值要遠超其所需的容量+1024的時候，就會形成內從的浪費，因而改成慢數組。咱們來驗證下：

示例代碼一：

let arr = [1];

%DebugPrint(arr) 後截圖以下：

而後將arr數組從新賦值:

arr[1024] = 2;

%DebugPrint(arr) 後截圖以下：

ok，驗證成功。接下來咱們來看如何從慢數組到快數組。

從上面源碼註釋能夠知道，快數組到慢數組的條件就是：
快數組節省僅爲50％的空間時，就採用慢數組（Dictionary）。
咱們繼續來驗證:

let arr = [1];
arr[1025] = 1;

上面代碼聲明的數組使用的是慢數組（Dictionary），截圖以下

接下來讓索引從500開始填充數字1，讓其知足快數組節省空間小於50％：

for(let i=500;i<1024;i++){
    arr[i]=1;
}

獲得結果以下：

最終咱們獲得結果，讓arr數組從慢數組（Dictionary）轉爲了快數組（HOLEY_SMI_ELEMENTS就是Fast Holey Elements）

new ArrayBuffer

講了真麼多，無非就是在說JS中因爲語言「特點」而在數組的實現上有一些性能問題，那麼爲了解決這個問題V8引擎中引入了連續數組的概念，這是在JS代碼轉譯層作的優化，那麼還有其餘方式嗎？

固然有，那就是ES6中ArrayBuffer。ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩衝區，它是一個字節數組。使用ArrayBuffer能在操做系統內存中獲得一塊連續的二進制區域。而後這塊區域供JS去使用。

// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(8); // 入參8爲length

console.log(buffer.byteLength);

但須要注意的是ArrayBuffer自己不具有操做字節能力，須要經過視圖去操做。好比：

let buffer = new ArrayBuffer(3);
let view = new DataView(buffer);
view.setInt8(0, 8)

更多細節本文再也不展開，請讀者自行探索。

完結。