Javascript ArrayBuffer，二進(jìn)制數(shù)組

我們可以直接創(chuàng)建一個(gè) TypedArray，而無(wú)需提及 ArrayBuffer。但是，視圖離不開(kāi)底層的 ArrayBuffer，因此，除第一種情況（已提供 ArrayBuffer）外，其他所有情況都會(huì)自動(dòng)創(chuàng)建 ArrayBuffer。

如要訪問(wèn)底層的 ArrayBuffer，那么在 TypedArray 中有如下的屬性：

• ?arr.buffer? —— 引用 ?ArrayBuffer?。
• ?arr.byteLength? —— ?ArrayBuffer? 的長(zhǎng)度。

因此，我們總是可以從一個(gè)視圖轉(zhuǎn)到另一個(gè)視圖：

let arr8 = new Uint8Array([0, 1, 2, 3]);

// 同一數(shù)據(jù)的另一個(gè)視圖
let arr16 = new Uint16Array(arr8.buffer);

下面是類型化數(shù)組的列表：

• ?Uint8Array?，?Uint16Array?，?Uint32Array? —— 用于 8、16 和 32 位的整數(shù)。
• ?Uint8ClampedArray? —— 用于 8 位整數(shù)，在賦值時(shí)便“固定“其值（見(jiàn)下文）。
• ?Int8Array?，?Int16Array?，?Int32Array? —— 用于有符號(hào)整數(shù)（可以為負(fù)數(shù)）。
• ?Float32Array?，?Float64Array? —— 用于 32 位和 64 位的有符號(hào)浮點(diǎn)數(shù)。

沒(méi)有 ?int8? 或類似的單值類型

請(qǐng)注意，盡管有類似 Int8Array 這樣的名稱，但 JavaScript 中并沒(méi)有像 int，或 int8 這樣的單值類型。

這是合乎邏輯的，因?yàn)?nbsp;Int8Array 不是這些單值的數(shù)組，而是 ArrayBuffer 上的視圖。

越界行為

如果我們嘗試將越界值寫(xiě)入類型化數(shù)組會(huì)出現(xiàn)什么情況？不會(huì)報(bào)錯(cuò)。但是多余的位被切除。

例如，我們嘗試將 256 放入 Uint8Array。256 的二進(jìn)制格式是 100000000（9 位），但 Uint8Array 每個(gè)值只有 8 位，因此可用范圍為 0 到 255。

對(duì)于更大的數(shù)字，僅存儲(chǔ)最右邊的（低位有效）8 位，其余部分被切除：

因此結(jié)果是 0。

257 的二進(jìn)制格式是 100000001（9 位），最右邊的 8 位會(huì)被存儲(chǔ)，因此數(shù)組中會(huì)有 1：

換句話說(shuō)，該數(shù)字對(duì) 2⁸ 取模的結(jié)果被保存了下來(lái)。

示例如下：

let uint8array = new Uint8Array(16);

let num = 256;
alert(num.toString(2)); // 100000000（二進(jìn)制表示）

uint8array[0] = 256;
uint8array[1] = 257;

alert(uint8array[0]); // 0
alert(uint8array[1]); // 1

Uint8ClampedArray 在這方面比較特殊，它的表現(xiàn)不太一樣。對(duì)于大于 255 的任何數(shù)字，它將保存為 255，對(duì)于任何負(fù)數(shù)，它將保存為 0。此行為對(duì)于圖像處理很有用。

TypedArray 方法

TypedArray 具有常規(guī)的 Array 方法，但有個(gè)明顯的例外。

我們可以遍歷（iterate），map，slice，find 和 reduce 等。

但有幾件事我們做不了：

• 沒(méi)有 ?splice? —— 我們無(wú)法“刪除”一個(gè)值，因?yàn)轭愋突瘮?shù)組是緩沖區(qū)（buffer）上的視圖，并且緩沖區(qū)（buffer）是固定的、連續(xù)的內(nèi)存區(qū)域。我們所能做的就是分配一個(gè)零值。
• 無(wú) ?concat? 方法。

還有兩種其他方法：

• ?arr.set(fromArr, [offset])? 從 ?offset?（默認(rèn)為 0）開(kāi)始，將 ?fromArr? 中的所有元素復(fù)制到 ?arr?。
• ?arr.subarray([begin, end])? 創(chuàng)建一個(gè)從 ?begin? 到 ?end?（不包括）相同類型的新視圖。這類似于 ?slice? 方法（同樣也支持），但不復(fù)制任何內(nèi)容 —— 只是創(chuàng)建一個(gè)新視圖，以對(duì)給定片段的數(shù)據(jù)進(jìn)行操作。

有了這些方法，我們可以復(fù)制、混合類型化數(shù)組，從現(xiàn)有數(shù)組創(chuàng)建新數(shù)組等。

DataView

DataView 是在 ArrayBuffer 上的一種特殊的超靈活“未類型化”視圖。它允許以任何格式訪問(wèn)任何偏移量（offset）的數(shù)據(jù)。

• 對(duì)于類型化的數(shù)組，構(gòu)造器決定了其格式。整個(gè)數(shù)組應(yīng)該是統(tǒng)一的。第 i 個(gè)數(shù)字是 ?arr[i]?。
• 通過(guò) ?DataView?，我們可以使用 ?.getUint8(i)? 或 ?.getUint16(i)? 之類的方法訪問(wèn)數(shù)據(jù)。我們?cè)谡{(diào)用方法時(shí)選擇格式，而不是在構(gòu)造的時(shí)候。

語(yǔ)法：

new DataView(buffer, [byteOffset], [byteLength])

• ?buffer? —— 底層的 ?ArrayBuffer?。與類型化數(shù)組不同，?DataView? 不會(huì)自行創(chuàng)建緩沖區(qū)（buffer）。我們需要事先準(zhǔn)備好。
• ?byteOffset? —— 視圖的起始字節(jié)位置（默認(rèn)為 0）。
• ?byteLength? —— 視圖的字節(jié)長(zhǎng)度（默認(rèn)至 ?buffer? 的末尾）。

例如，這里我們從同一個(gè) buffer 中提取不同格式的數(shù)字：

// 4 個(gè)字節(jié)的二進(jìn)制數(shù)組，每個(gè)都是最大值 255
let buffer = new Uint8Array([255, 255, 255, 255]).buffer;

let dataView = new DataView(buffer);

// 在偏移量為 0 處獲取 8 位數(shù)字
alert( dataView.getUint8(0) ); // 255

// 現(xiàn)在在偏移量為 0 處獲取 16 位數(shù)字，它由 2 個(gè)字節(jié)組成，一起解析為 65535
alert( dataView.getUint16(0) ); // 65535（最大的 16 位無(wú)符號(hào)整數(shù)）

// 在偏移量為 0 處獲取 32 位數(shù)字
alert( dataView.getUint32(0) ); // 4294967295（最大的 32 位無(wú)符號(hào)整數(shù)）

dataView.setUint32(0, 0); // 將 4 個(gè)字節(jié)的數(shù)字設(shè)為 0，即將所有字節(jié)都設(shè)為 0

當(dāng)我們將混合格式的數(shù)據(jù)存儲(chǔ)在同一緩沖區(qū)（buffer）中時(shí)，DataView 非常有用。例如，當(dāng)我們存儲(chǔ)一個(gè)成對(duì)序列（16 位整數(shù)，32 位浮點(diǎn)數(shù)）時(shí)，用 DataView 可以輕松訪問(wèn)它們。

總結(jié)

ArrayBuffer 是核心對(duì)象，是對(duì)固定長(zhǎng)度的連續(xù)內(nèi)存區(qū)域的引用。

幾乎任何對(duì) ArrayBuffer 的操作，都需要一個(gè)視圖。

• 它可以是 ?TypedArray?：
• ?Uint8Array?，?Uint16Array?，?Uint32Array? —— 用于 8 位、16 位和 32 位無(wú)符號(hào)整數(shù)。
• ?Uint8ClampedArray? —— 用于 8 位整數(shù)，在賦值時(shí)便“固定”其值。
• ?Int8Array?，?Int16Array?，?Int32Array? —— 用于有符號(hào)整數(shù)（可以為負(fù)數(shù)）。
• ?Float32Array?，?Float64Array? —— 用于 32 位和 64 位的有符號(hào)浮點(diǎn)數(shù)。
• 或 ?DataView? —— 使用方法來(lái)指定格式的視圖，例如，?getUint8(offset)?。

在大多數(shù)情況下，我們直接對(duì)類型化數(shù)組進(jìn)行創(chuàng)建和操作，而將 ArrayBuffer 作為“共同之處（common denominator）”隱藏起來(lái)。我們可以通過(guò) .buffer 來(lái)訪問(wèn)它，并在需要時(shí)創(chuàng)建另一個(gè)視圖。還有另外兩個(gè)術(shù)語(yǔ)，用于對(duì)二進(jìn)制數(shù)據(jù)進(jìn)行操作的方法的描述：

• ?ArrayBufferView? 是所有這些視圖的總稱。
• ?BufferSource? 是 ?ArrayBuffer? 或 ?ArrayBufferView? 的總稱。

我們將在下一章中學(xué)習(xí)這些術(shù)語(yǔ)。BufferSource 是最常用的術(shù)語(yǔ)之一，因?yàn)樗囊馑际恰叭魏晤愋偷亩M(jìn)制數(shù)據(jù)” —— ArrayBuffer 或其上的視圖。

這是一份備忘單：

任務(wù)

拼接類型化數(shù)組

給定一個(gè) Uint8Array 數(shù)組，請(qǐng)寫(xiě)一個(gè)函數(shù) concat(arrays)，將數(shù)組拼接成一個(gè)單一數(shù)組并返回。

打開(kāi)帶有測(cè)試的沙箱。

解決方案

function concat(arrays) {
  // sum of individual array lengths
  let totalLength = arrays.reduce((acc, value) => acc + value.length, 0);

  let result = new Uint8Array(totalLength);

  if (!arrays.length) return result;

  // for each array - copy it over result
  // next array is copied right after the previous one
  let length = 0;
  for(let array of arrays) {
    result.set(array, length);
    length += array.length;
  }

  return result;
}

使用沙箱的測(cè)試功能打開(kāi)解決方案。