Javascript數組與類數組對象

問題來由：

以前面試X公司的時候，問我關於原型鏈知道多少，因而我就開始說了一些有關於原型鏈的東西，面試官問Array的原型是什麼，我說是對象，畢竟Array.prototype===array.__proto__是同樣的嘛，可是我忽略了一個問題，就是這個對象是類數組對象，我想面試官可能要問我這個吧，總結一下。

什麼是數組：

JavaScript的基本數據類型，即Array。

判斷目標對象是否是Array：

(1)構造函數判斷

target.constructor === Array

(2)instanceof判斷

target instanceof Array

注：別用typeof。只能判斷爲Object

什麼是類數組：

與數組同樣具備length與index屬性，可是本質確實個Object，最多見的就是arguments

target.constructor === Object

擴展：類數組有什麼優勢

提供了一種用於訪問原始二進制數據的機制。 正如你可能已經知道，Array存儲的對象能動態增多和減小，而且能夠存儲任何JavaScript值。JavaScript引擎會作一些內部優化，以便對數組的操做能夠很快。然而，隨着Web應用程序變得愈來愈強大，尤爲一些新增長的功能例如：音頻視頻編輯，訪問WebSockets的原始數據等，很明顯有些時候若是使用JavaScript代碼能夠快速方便地經過類型化數組來操做原始的二進制數據將會很是有幫助(來自MDN)

類型數組架構（緩衝和視圖）：

（圖片來自於MDN）

緩衝：

用ArrayBuffer對象實現，不提供機制訪問內容，視圖提供了上下文 — 即數據類型、起始偏移量和元素數 — 將數據轉換爲實際有類型的數組。

 ArrayBuffer：一個通用的、固定長度的二進制數據緩衝區。

你不能直接操縱一個ArrayBuffer中的內容，你須要建立一個類型化數組的視圖或一個描述緩衝數據格式的DataView，使用它們來讀寫緩衝區中的內容。

視圖：

DataView是一種底層接口，它提供有能夠操做緩衝區中任意數據的讀寫接口。這對操做不一樣類型數據的場景頗有幫助，例如：類型化數組視圖都是運行在本地字節序模式(參考 Endianness)，能夠經過使用 DataView 來控制字節序。默認是大端字節序(Big-endian)，但能夠調用讀寫接口改成小端字節序(Little-endian)。

類型化數組視圖具備自描述性的名字和全部經常使用的數值類型像Int8，Uint32，Float64 等等。有一種特殊類型的數組Uint8ClampedArray。它僅操做0到255之間的數值。

例如，這對於Canvas數據很是有用。詳見：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays

栗子：

建立緩衝區

//首先，咱們建立一個16字節固定長度的緩衝
var buffer = new ArrayBuffer(16);

基於buffer建立視圖1

//視圖1,視圖將把緩衝內的數據格式化爲一個32位的有符號整數數組
var int32View = new Int32Array(buffer);

填充視圖1

//填充數組
for (var i = 0; i < int32View.length; i++) {
    int32View[i] = i * 2;
}

輸出結果

建立視圖2，這裏視圖是2字節整數視圖，與上面4字節整數視圖共享同一個緩衝區。

//視圖2
var int16View = new Int16Array(buffer);

輸出視圖2：

console.dir(int16View)

結果：

能夠看到兩個視圖對同一緩衝區的數據以不一樣格式展現出來

複雜的數據結構：

struct someStruct {
  unsigned long id;
  char username[16];
  float amountDue;
};

C語言結構體中包含複雜類型，用類結構體緩衝：

var buffer = new ArrayBuffer(24);
// ... read the data into the buffer ...
var idView = new Uint32Array(buffer, 0, 1);
var usernameView = new Uint8Array(buffer, 4, 16);
var amountDueView = new Float32Array(buffer, 20, 1);

轉化爲普通數組：

var typedArray = new Uint8Array([1, 2, 3, 4]),
    normalArray = Array.prototype.slice.call(typedArray);
normalArray.length === 4;
normalArray.constructor === Array;

注：該篇文章與MDN基本相似，這裏作個記錄，想了解更多MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays