本文同步自我的博客园：http://www.cnblogs.com/hustskyking/

置信每一个 javascript 学习者，都邑去相识 JS 的种种基本数据范例，数组就是数据的组合，这是一个很基本也非常简朴的观点，他的内容没多少，学好它也不是件难事变。然则本文着重要引见的并非我们平常看到的 Array，而是 ArrayBuffer。

我写的许多东西都是因为要完成某些特定的功用而锐意总结的，能够算是备忘，本文也是云云！前段时间一直在研讨 Web Audio API 以及语音通讯相干的学问，内容侧重于音频流在 AudioContext 各个节点之间的活动状况，而现在要摸清晰音频到流底是个什么样的数据格式，所以对 ArrayBuffer 的研讨就显得分外重要了。

一、Array 在内存中的客栈模子

1. Array 的猎取

Javascript 中怎样发生 Array：

[element0, element1, ..., elementN]
new Array(element0, element1, ..., elementN)
new Array(arrayLength)

直接定义，或许经由过程组织函数建立一个 Array，固然也能够运用其他的手腕：

"array".split("");
"array".match(/a|r/g);

等等，体式格局有许多。然则 Array 内部是个什么样的构造，生怕许多人还不是很清晰。

2. 客栈模子

在数组中我们能够放许多差别数据范例的数据，如：

var arr = [21, "李靖", new Date(), function(){}, , null];

上面这个数组中一次放入了 数字、字符串、对象、函数、undefined 和 null，关于上面的数据接口我们能够具象的形貌下：

    栈
+---------+                  堆
|   21    |         +-------------------+
+---------+         |                   |
|  "李靖" |         |                   |
+---------+         |  +--------+       |
| [refer] |----------->| Object |       |
+---------+         |  +--------+       |
| [refer] |----------------->+--------+ |
+---------+         |        |function| |
|undefined|         |        +--------+ |
+---------+         |                   |
|   null  |         +-------------------+
+---------+         Created By Barret Lee

JavaScript 的数据范例分为两种，一种是值范例，一种是援用范例，罕见的援用范例有 Object 和 Array，数组的贮存模子中，假如是诸如 Number、String 之类的值范例数据会被直接压入栈中，而援用范例只会压入对该值的一个索引，用 C 言语的观点来诠释就是只保留了数据的指针，这些数据是贮存在堆中的某块区间中。栈堆并非自力的，栈也能够在堆中寄存。

好了，对 Array 的申明就到这里，下面细致说说 ArrayBuffer 的相干学问。

二、ArrayBuffer

web 是个啥玩艺儿，web 要议论的最基本题目是什么？我以为有两点，一个是数据，一个是数据传输，至于数据的展现，纷繁复杂，这个应该是 web 上层的东西。而本文要议论的 ArrayBuffer 就是最基本的数据范例，以至不能称之为数据范例，它是一个数据轻易，须要经由过程其他体式格局来读写。

官方点的定义：

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.
示意二进制数据的原始缓冲区，该缓冲区用于存储种种范例化数组的数据。 没法直接读取或写入 ArrayBuffer，但可根据须要将其通报到范例化数组或 DataView 对象 来诠释原始缓冲区。

他是一个二进制数据的原始缓冲区，虽然 JavaScript 是弱范例言语，然则他自身是对数据的范例和大小都有限定的，我们须要经由过程某种数据构造将缓冲区的内容有序的读取出来（写进去）。

1. 原始缓冲区的建立

经由过程 ArrayBuffer 这个组织函数能够建立一个原始缓冲区：

var buffer  = new ArrayBuffer(30);

从 chrome 控制台能够看到：

[]({{ site.repo }}/images/blog-article-images/blog/audio/arraybuffer.jpg)

buffer 实例具有一个 byteLength 的属性，用于猎取 buffer 的 size，一个只要 IE11+ 以及 ios6+ 支撑的 slice 要领，用于对 buffer 长度举行截取支配。

ArrayBuffer slice(
    unsigned long begin
    unsigned long end Optional
);

能够测试这个 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]);

2. 范例化数组

范例化数组范例示意可编制索引和支配的 ArrayBuffer 对象 的种种视图。 一切数组范例的长度均牢固。

Int 就是整型，Uint 为无标记整形，Float 为浮点型，这些是 C 言语中的基本观点，我就不细致诠释了。因为这些视图化构造都是迥然差别，本文只对 Float32Array 范例作申明，读者能够闻一知十。

Float32Array 跟 Array 是非常类似的，只不过他每一个元素都是都是一个 32位（4字节） 的浮点型数据。Float32Array 一旦建立其大小不能再修正。

我们能够直接建立一个 Float32Array:

var x = new Float32Array(2);
x[0] = 17;
console.log(x[0]); // 17
console.log(x[1]); // 0
console.log(x.length); // 2

须要有这么一个观点，他依然是一个数组，只不过该数组中的每一个元素都是 Float 32 位的数据范例，再如：

var x = new Float32Array([17, -45.3]);
console.log(x[0]);  // 17
console.log(x[1]);  // -45.29999923706055
console.log(x.length); // 2

我们把一个数组的值直接赋给了 x 这个 Float32Array 对象，那末在贮存之前会将它转换成一个 32位浮点数。

因为该类数组的每一个元素都是统一范例，所以在客栈模子中，他们悉数会被压入到栈当中，因而范例化数组都是值范例，他并非援用范例！这个要引发注重，从下面的例子中也能够反应出来：

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的值没变

将 x 的值复制给 y，修正 x[0], y[0] 并没有变化。

除了上面的体式格局，我们还能够经由过程其他体式格局来建立一个范例化数组：

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

看了上面的图解另有疑问么？我以为我不必继承诠释了。能够把 ArrayBuffer 的单元算作 1，而 Float32Array 的单元是 4.

3. DataView对象

DataView 对象对数据的支配越发仔细，不过我以为没啥意义，上面提到的种种范例化数组已能够基本满足运用了，所以这里就一笔带过，一个简朴的示例：

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，作细致相识。

三、XHR2 中的 ArrayBuffer

ArrayBuffer 的运用迥殊普遍，无论是 WebSocket、WebAudio 照样 Ajax等等，前端方面只如果处置惩罚大数据或许想进步数据处置惩罚机能，那一定是少不了 ArrayBuffer 。

XHR2 并非什么新东西，能够你用到了相干的特征，却不知这就是 XHR2 的内容。最重要的一个东西就是 xhr.responseType，他的作用是设置相应的数据格式，可选参数有：”text”、”arraybuffer”、”blob”或”document”。请注重，设置（或疏忽）xhr.responseType = ” 会默许将相应设为”text”。这里存在一个如许的对应关联：

要求            相应
text            DOMString
arraybuffer     ArrayBuffer
blob            Blob
document        Document

举个栗子：

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();

我们在 xhr.responseType 中设置了属性为 arraybuffer，那末在拿到的数据中就能够用范例化数组来接收啦！

四、小结

本文重要引见了 Array 在客栈模子中的寄存体式格局，也细致形貌了 ArrayBuffer 这个原始缓冲区的二进制数据范例，在 web 开辟中，数据以及数据的贮存是一个重要的部份，愿望引发注重！

本文叙说上能够存在毛病，请多多指正！

五、参考资料

• http://www.javascripture.com/ArrayBuffer
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array MDN Array
• http://www.html5rocks.com/zh/tutorials/file/xhr2/ html5rocks
• http://technet.microsoft.com/zh-cn/ie/br212485 MSDN