JavaScript中的ArrayBuffer詳細(xì)介紹
相信每一個(gè) javascript 學(xué)習(xí)者，都會(huì)去了解 JS 的各種基本數(shù)據(jù)類型，數(shù)組就是數(shù)據(jù)的組合，這是一個(gè)很基本也十分簡(jiǎn)單的概念，他的內(nèi)容沒(méi)多少，學(xué)好它也不是件難事情。但是本文著重要介紹的并不是我們往常看到的 Array，而是 ArrayBuffer。
我寫(xiě)的很多東西都是因?yàn)橐瓿赡承┨囟ǖ墓δ芏桃饪偨Y(jié)的，可以算是備忘，本文也是如此！前段時(shí)間一直在研究 Web Audio API 以及語(yǔ)音通信相關(guān)的知識(shí)，內(nèi)容側(cè)重于音頻流在 AudioContext 各個(gè)節(jié)點(diǎn)之間的流動(dòng)情況，而現(xiàn)在要摸清楚音頻到流底是個(gè)什么樣的數(shù)據(jù)格式，所以對(duì) ArrayBuffer 的研究就顯得格外重要了。
Array 在內(nèi)存中的堆棧模型
Array 的獲取
Javascript 中如何產(chǎn)生 Array：
[element0, element1, ..., elementN]
new Array(element0, element1, ..., elementN)
new Array(arrayLength)
直接定義，或者通過(guò)構(gòu)造函數(shù)創(chuàng)建一個(gè) Array，當(dāng)然也可以使用其他的手段：
"array".split("");
"array".match(/a|r/g);
等等，方式有很多。但是 Array 內(nèi)部是個(gè)什么樣的結(jié)構(gòu)，恐怕很多人還不是很清楚。
堆棧模型
在數(shù)組中我們可以放很多不同數(shù)據(jù)類型的數(shù)據(jù)，如：
var arr = [21, "李靖", new Date(), function(){}, , null];
上面這個(gè)數(shù)組中一次放入了 數(shù)字、字符串、對(duì)象、函數(shù)、undefined 和 null，對(duì)于上面的數(shù)據(jù)接口我們可以具象的描述下：
棧
+---------+ 堆
| 21 | +-------------------+
+---------+ | |
| "李靖" | | |
+---------+ | +--------+ |
| [refer] |----------->| Object | |
+---------+ | +--------+ |
| [refer] |----------------->+--------+ |
+---------+ | |function| |
|undefined| | +--------+ |
+---------+ | |
| null | +-------------------+
+---------+ Created By Barret Lee
JavaScript 的數(shù)據(jù)類型分為兩種，一種是值類型，一種是引用類型，常見(jiàn)的引用類型有 Object 和 Array，數(shù)組的儲(chǔ)存模型中，如果是諸如 Number、String 之類的值類型數(shù)據(jù)會(huì)被直接壓入棧中，而引用類型只會(huì)壓入對(duì)該值的一個(gè)索引，用 C 語(yǔ)言的概念來(lái)解釋就是只保存了數(shù)據(jù)的指針，這些數(shù)據(jù)是儲(chǔ)存在堆中的某塊區(qū)間中。棧堆并不是獨(dú)立的，棧也可以在堆中存放。
好了，對(duì) Array 的說(shuō)明就到這里，下面具體說(shuō)說(shuō) ArrayBuffer 的相關(guān)知識(shí)。
ArrayBuffer
web 是個(gè)啥玩意兒，web 要討論的最基本問(wèn)題是什么？我覺(jué)得有兩點(diǎn)，一個(gè)是數(shù)據(jù)，一個(gè)是數(shù)據(jù)傳輸，至于數(shù)據(jù)的展示，紛繁復(fù)雜，這個(gè)應(yīng)該是 web 上層的東西。而本文要討論的 ArrayBuffer 就是最基礎(chǔ)的數(shù)據(jù)類型，甚至不能稱之為數(shù)據(jù)類型，它是一個(gè)數(shù)據(jù)容易，需要通過(guò)其他方式來(lái)讀寫(xiě)。
官方點(diǎn)的定義：
The ArrayBuffer is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an ArrayBuffer; instead, you create an ArrayBufferView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
表示二進(jìn)制數(shù)據(jù)的原始緩沖區(qū)，該緩沖區(qū)用于存儲(chǔ)各種類型化數(shù)組的數(shù)據(jù)。 無(wú)法直接讀取或?qū)懭?ArrayBuffer，但可根據(jù)需要將其傳遞到類型化數(shù)組或 DataView 對(duì)象 來(lái)解釋原始緩沖區(qū)。
他是一個(gè)二進(jìn)制數(shù)據(jù)的原始緩沖區(qū)，雖然 JavaScript 是弱類型語(yǔ)言，但是他本身是對(duì)數(shù)據(jù)的類型和大小都有限制的，我們需要通過(guò)某種數(shù)據(jù)結(jié)構(gòu)將緩沖區(qū)的內(nèi)容有序的讀取出來(lái)（寫(xiě)進(jìn)去）。
原始緩沖區(qū)的創(chuàng)建
通過(guò) ArrayBuffer 這個(gè)構(gòu)造函數(shù)可以創(chuàng)建一個(gè)原始緩沖區(qū)：
var buffer = new ArrayBuffer(30);
從 chrome 控制臺(tái)可以看到：
buffer 實(shí)例擁有一個(gè) byteLength 的屬性，用于獲取 buffer 的 size，一個(gè)只有 IE11+ 以及 ios6+ 支持的 slice 方法，用于對(duì) buffer 長(zhǎng)度進(jìn)行截取操作。
ArrayBuffer slice(
unsigned long begin
unsigned long end Optional
);
可以測(cè)試這個(gè) DEMO：
var buffer = new ArrayBuffer(12);
var x = new Int32Array(buffer);
x[1] = 1234;
var slice = buffer.slice(4);
var y = new Int32Array(slice);
console.log(x[1]);
console.log(y[0]);
x[1] = 6789;
console.log(x[1]);
console.log(y[0]);
數(shù)據(jù)化數(shù)組
類型化數(shù)組類型表示可編制索引和操縱的 ArrayBuffer 對(duì)象 的各種視圖。 所有數(shù)組類型的長(zhǎng)度均固定。
名稱 大小（以字節(jié)為單位） 描述
Int8Array 1 8 位二補(bǔ)碼有符號(hào)整數(shù)
Uint8Array 1 8 位無(wú)符號(hào)整數(shù)
Int16Array 2 16 位二補(bǔ)碼有符號(hào)整數(shù)
Uint16Array 2 16 位無(wú)符號(hào)整數(shù)
Int32Array 4 32 位二補(bǔ)碼有符號(hào)整數(shù)
Uint32Array 4 32 位無(wú)符號(hào)整數(shù)
Float32Array 4 32 位 IEEE 浮點(diǎn)數(shù)
Float64Array 8 64 位 IEEE 浮點(diǎn)數(shù)
Int 就是整型，Uint 為無(wú)符號(hào)整形，F(xiàn)loat 為浮點(diǎn)型，這些是 C 語(yǔ)言中的基本概念，我就不具體解釋了。由于這些視圖化結(jié)構(gòu)都是大同小異，本文只對(duì) Float32Array 類型作說(shuō)明，讀者可以舉一反三。
Float32Array 跟 Array 是十分類似的，只不過(guò)他每一個(gè)元素都是都是一個(gè) 32位（4字節(jié)） 的浮點(diǎn)型數(shù)據(jù)。Float32Array 一旦創(chuàng)建其大小不能再修改。
我們可以直接創(chuàng)建一個(gè) Float32Array:
var x = new Float32Array(2);
x[0] = 17;
console.log(x[0]); // 17
console.log(x[1]); // 0
console.log(x.length); // 2
需要有這么一個(gè)概念，他依然是一個(gè)數(shù)組，只不過(guò)該數(shù)組中的每個(gè)元素都是 Float 32 位的數(shù)據(jù)類型，再如：
var x = new Float32Array([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // -45.29999923706055
console.log(x.length); // 2
我們把一個(gè)數(shù)組的值直接賦給了 x 這個(gè) Float32Array 對(duì)象，那么在儲(chǔ)存之前會(huì)將它轉(zhuǎn)換成一個(gè) 32位浮點(diǎn)數(shù)。
由于該類數(shù)組的每個(gè)元素都是同一類型，所以在堆棧模型中，他們?nèi)繒?huì)被壓入到棧之中，因此數(shù)據(jù)化數(shù)組都是值類型，他并不是引用類型！這個(gè)要引起注意，從下面的例子中也可以反映出來(lái)：
var x = new Float32Array([17, -45.3]);
var y = new Float32Array(x);
console.log(x[0]); // 17
console.log(x[1]); //-45.29999923706055
console.log(x.length); // 2
x[0] = -2;
console.log(y[0]); // 17, y的值沒(méi)變
將 x 的值復(fù)制給 y，修改 x[0], y[0] 并沒(méi)有變化。
除了上面的方式，我們還可以通過(guò)其他方式來(lái)創(chuàng)建一個(gè)數(shù)據(jù)化數(shù)組：
var buffer = new ArrayBuffer(12);
var x = new Float32Array(buffer, 0, 2);
var y = new Float32Array(buffer, 4, 1);
x[1] = 7;
console.log(y[0]); // 7
解釋下這里為什么返回 7.
ArrayBuffer（12）
+-+-+-+-+-+-+-+-+-+-+-+-+-+
|0|1|2|3|4|5|6|7|8| | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+
\ /
x (Float32Array)
offset：0
byteLength：4
length:2
ArrayBuffer（12）
+-+-+-+-+-+-+-+-+-+-+-+-+-+
|0|1|2|3|4|5|6|7|8| | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+
\ /
y
Created By Barret Lee
看了上面的圖解還有疑問(wèn)么？我覺(jué)得我不用繼續(xù)解釋了。可以把 ArrayBuffer 的單位看成 1，而 Float32Array 的單位是 4.
DataView對(duì)象
DataView 對(duì)象對(duì)數(shù)據(jù)的操作更加細(xì)致，不過(guò)我覺(jué)得沒(méi)啥意思，上面提到的各種數(shù)據(jù)化數(shù)組已經(jīng)可以基本滿足應(yīng)用了，所以這里就一筆帶過(guò)，一個(gè)簡(jiǎn)單的示例：
var buffer = new ArrayBuffer(12);
var x = new DataView(buffer, 0);
x.setInt8(0, 22);
x.setFloat32(1, Math.PI);
console.log(x.getInt8(0)); // 22
console.log(x.getFloat32(1)); // 3.1415927410125732
如果感興趣，可以移步http://www.javascripture.com/DataView，作詳細(xì)了解。
XHR2 中的 ArrayBuffer
ArrayBuffer 的應(yīng)用特別廣泛，無(wú)論是 WebSocket、WebAudio 還是 Ajax等等，前端方面只要是處理大數(shù)據(jù)或者想提高數(shù)據(jù)處理性能，那一定是少不了 ArrayBuffer 。
XHR2 并不是什么新東西，可能你用到了相關(guān)的特性，卻不知這就是 XHR2 的內(nèi)容。最主要的一個(gè)東西就是 xhr.responseType，他的作用是設(shè)置響應(yīng)的數(shù)據(jù)格式，可選參數(shù)有："text"、"arraybuffer"、"blob"或"document"。請(qǐng)注意，設(shè)置（或忽略）xhr.responseType = '' 會(huì)默認(rèn)將響應(yīng)設(shè)為"text"。這里存在一個(gè)這樣的對(duì)應(yīng)關(guān)系：
請(qǐng)求 響應(yīng)
text DOMString
arraybuffer ArrayBuffer
blob Blob
document Document
舉個(gè)栗子：
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
// this.response == uInt8Array.buffer
var uInt8Array = new Uint8Array(this.response);
};
xhr.send();
我們?cè)?xhr.responseType 中設(shè)置了屬性為 arraybuffer，那么在拿到的數(shù)據(jù)中就可以用數(shù)據(jù)化數(shù)組來(lái)接受啦！
小結(jié)
本文主要介紹了 Array 在堆棧模型中的存放方式，也詳細(xì)描述了 ArrayBuffer 這個(gè)原始緩沖區(qū)的二進(jìn)制數(shù)據(jù)類型，在 web 開(kāi)發(fā)中，數(shù)據(jù)以及數(shù)據(jù)的儲(chǔ)存是一個(gè)重要的部分，希望引起注意！
本文敘述上可能存在錯(cuò)誤，請(qǐng)多多斧正！
- JS array 數(shù)組詳解
- JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法
- js刪除Array數(shù)組中指定元素的兩種方法
- JavaScript判斷變量是否為數(shù)組的方法(Array)
- JS中數(shù)組Array的用法示例介紹
- 以JSON形式將JS中Array對(duì)象數(shù)組傳至后臺(tái)的方法
- js中數(shù)組Array的一些常用方法總結(jié)
- Js判斷參數(shù)(String,Array,Object)是否為undefined或者值為空
- JavaScript中循環(huán)遍歷Array與Map的方法小結(jié)
- 實(shí)例分析Array.from(arr)與[...arr]到底有何不同
相關(guān)文章
模仿JQuery.extend函數(shù)擴(kuò)展自己對(duì)象的js代碼
最近打算寫(xiě)個(gè)自己的js工具集合，把自己平常經(jīng)常使用的方法很好的封裝起來(lái)，其中模仿了jq的結(jié)構(gòu)。2009-12-12
JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫(huà)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫(huà)效果,涉及javascript基于時(shí)間函數(shù)的頁(yè)面元素屬性動(dòng)態(tài)變換實(shí)現(xiàn)運(yùn)動(dòng)效果相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
本文主要介紹了JS原生雙欄穿梭選擇框的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼，感興趣的小伙伴們可以參考一下2016-04-04
本文主要介紹了移動(dòng)端頁(yè)面適配相關(guān)知識(shí)，用于解決在所有手機(jī)上看到字體的大小都一樣問(wèn)題。下面跟著小編一起來(lái)看下吧2017-01-01
js實(shí)現(xiàn)單一html頁(yè)面兩套css切換代碼
研究了一下JS的用setAttribute方法實(shí)現(xiàn)一個(gè)頁(yè)面兩份樣式表的效果與大家分享下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
微信web端后退強(qiáng)制刷新功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信web端后退強(qiáng)制刷新功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03
今天是相當(dāng)?shù)睦?，所以就點(diǎn)比較容易點(diǎn)的東西吧，講關(guān)于鼠標(biāo)移動(dòng)后出現(xiàn)提示信息的js代碼。能力有限，寫(xiě)得不好盡管提出來(lái)。2010-01-01
JavaScript結(jié)合AJAX_stream實(shí)現(xiàn)流式顯示
這篇文章主要介紹了JavaScript結(jié)合AJAX_stream實(shí)現(xiàn)流式顯示,需要的朋友可以參考下2015-01-01
關(guān)于__defineGetter__ 和__defineSetter__的說(shuō)明
關(guān)于__defineGetter__ 和__defineSetter__的說(shuō)明...2007-05-05