JavaScript中ArrayBuffer的详细介绍

相信每个javascript学习者都会知道JS的各种基础数据类型。数组是数据的组合，这是一个非常基础和简单的概念。他的内容不多，所以学好并不难。然而，本文关注的不是我们总是看到的数组，而是ArrayBuffer。

我写的很多东西都是刻意总结的，因为我想完成一些具体的功能，可以看作是备忘录，这篇文章也是！前段时间一直在学习Web Audio API和语音通信的知识，重点是AudioContext节点之间的音频流的流动。现在需要搞清楚从音频到流底是什么数据格式，所以研究ArrayBuffer就显得尤为重要。

内存中数组的堆栈模型

阵列的获取

如何在Javascript中生成Array:复制代码如下： [element0，element1，elementn]新数组(element0，element1，elementn)新数组(arraylength)

直接定义它，或者通过构造函数创建一个数组。当然，你也可以使用其他手段：

复制代码如下：“array”。拆分(“”)；数组。匹配(/a | r/g)；

等等，有很多方法。但是恐怕很多人还是不知道Array里面是什么样的结构。

堆栈模型

我们可以在数组中放很多不同数据类型的数据，比如复制代码如下：var arr=[21，‘李静’，new Date()，function(){}，null]；

在上面的数组中，数字、字符串、对象、函数、undefined和null被放一次。对于上面的数据接口，我们可以形象地描述一下：复制代码如下： stack-heap | 21 |-| | | ' Li Jing ' | |。- |对象| | -|-| |[引用]|-|-| |函数| ||未定义| | - | - | ||空|-由巴雷特李创建

JavaScript有两种数据类型，一种是值类型，一种是引用类型。常见的引用类型是对象和数组。在数组的存储模型中，Number、String等值类型的数据会直接推入栈中，而引用类型只会推入值的一个索引中。用C语言的概念来解释，它只保存数据的指针，数据以一定的间隔存储在堆中。栈不是独立的，栈也可以存储在其中。

好了，以上就是对Array的描述。下面我们来详细说说ArrayBuffer的相关知识。

ArrayBuffer

网络到底是什么，网络应该讨论的最基本的问题是什么？我觉得有两点，一是数据，二是数据传输。至于复杂的数据显示，这应该是web上层的东西。本文讨论的ArrayBuffer是最基本的数据类型，甚至不能称为数据类型。用其他方式读写数据很容易。

官方观点的定义：

ArrayBuffer是一种数据类型，用于表示通用的固定长度二进制数据缓冲区。您不能直接操作ArrayBuffer的内容；相反，您可以创建一个数组缓冲区视图对象，该对象以特定的格式表示缓冲区，并使用它来读写缓冲区的内容。ArrayBuffer不能直接读写，但可以根据需要传递给类型化数组或DataView对象来解释原始缓冲区。

它是二进制数据的原始缓冲区。尽管JavaScript是一种弱类型语言，但它对数据的类型和大小有限制。我们需要通过一些数据结构有序地读取(写入)缓冲区的内容。

创建原始缓冲区

ArrayBuffer构造函数可以创建一个原始缓冲区：复制代码如下： varbuffer=new ArrayBuffer(30)；

您可以从chrome控制台看到：

缓冲区实例有一个byteLength属性，用来获取缓冲区的大小，还有一个只有IE11和ios6支持的slice方法，用来截取缓冲区的长度。

复制代码如下：数组缓冲片(无符号长开始无符号长结束可选)；

您可以测试这个演示：

复制代码如下： varbuffer=new array buffer(12)；var x=new Int32Array(缓冲区)；x[1]=1234；var slice=buffer . slice(4)；var y=new Int32Array(切片)；console . log(x[1])；console . log(y[0])；x[1]=6789；console . log(x[1])；console . log(y[0])；

数据化数组

类型化数组类型表示可以被索引和操作的ArrayBuffer对象的各种视图。所有数组类型的长度都是固定的。复制代码代码如下：名称大小(以字节为单位)说明Int8Array 1 8位二进制补码有符号整数UInt8Array 1 8位无符号整数Int16Array 2 16位有符号整数Uint16Array 2 16位无符号整数Int32Array 4 32位二进制补码有符号整数Uint 32Array 4 32位无符号整数Float32Array 4 32位IEEE浮点数Float64Array 8 64位IEEE浮点数int为这些是C语言中的基本概念，我就不详细解释了。由于这些可视化结构相似，本文仅解释Float32Array类型，因此读者可以从其他类型中进行推断。

Float32Array与Array非常相似，只是每个元素都是32位(4字节)浮点数据。一旦创建了Float32Array，就不能修改其大小。

我们可以直接创建Float32Array:

复制代码如下： var x=new float 32 array(2)；x[0]=17；console . log(x[0])；//17 console . log(x[1])；//0 console . log(x . length)；//2

需要有一个概念，即它仍然是一个数组，只是数组中的每个元素都是浮点32位数据类型，例如：

复制代码如下：VAR x=newfloat32array ([17，-45.3])；console . log(x[0])；//17 console . log(x[1])；//-45.29999923706055 console . log(x . length)；//2

我们直接将数组的值赋给Float32Array对象x，然后在存储之前将它转换为32位浮点数。

因为这种数组的每个元素都是同一类型的，在栈模型中，它们都会被推入栈中，所以数据数组是值类型，而不是引用类型！这一点要注意，也可以从下面的例子反映出来：复制代码如下：VAR x=new float32Array ([17，-45.3])；var y=新float 32 array(x)；console . log(x[0])；//17 console . log(x[1])；//-45.29999923706055 console . log(x . length)；//2x[0]=-2；console . log(y[0])；//17、y的值没有变化

将x的值复制到y，修改x [0]，y [0]没有改变。

除了上述方法，我们还可以通过其他方式创建数据数组：复制代码如下： varbuffer=new arraybuffer(12)；var x=new Float32Array(缓冲区，0，2)；var y=new Float32Array(缓冲区，4，1)；x[1]=7；console . log(y[0])；//7

解释为什么在这里返回7。

复制代码如下： arraybuffer(12)-| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | |-\/x()

ArrayBuffer(12)--------------| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | |----------------------\/y

由巴雷特李创作

看完上图有什么问题吗？我想我不需要再解释了。数组Buffer的单位可以看作1，而Float32Array的单位是4。

数据视图对象

DataView对象对数据的操作比较细致，但我觉得没有什么意义。上面提到的各种数据数组基本上可以满足应用需求，这里我简单介绍一下。一个简单的例子：复制代码如下： varbuffer=New ArrayBuffer(12)；var x=新的DataView(缓冲区，0)；x.setInt8(0，22)；x.setFloat32(1，数学。PI)；console . log(x . GetInt8(0))；//22 con sole . log(x . GetFloat32(1))；//3.1415927410125732

如果你感兴趣，你可以步行去http://www.javascripture.com/DataView了解更多。

XHR2中的ArrayBuffer

ArrayBuffer的应用非常广泛，无论是WebSocket、WebAudio还是Ajax等。只要前端在处理大数据或者想要提升数据处理性能，就一定不可或缺。

XHR2并不是什么新鲜事。可能你用过相关的功能，但不知道这是XHR2的内容。最重要的是xhr.responseType，用来设置响应的数据格式。可选参数为：“text”、“arraybuffer”、“blob”或“document”。请注意，默认情况下，设置(或忽略)xhr.responseType=' '会将响应设置为“text”。这里有一个对应的关系：复制代码如下：请求响应文本DOM string array buffer array buffer Blob Document

举个栗子：

复制代码如下： var xhr=new XMLHttpRequest()；xhr.open('GET '，'/path/to/image.png '，true)；xhr . responsetype=' arraybuffer '；

xhr . onload=function(e){//this . response==uint 8 array . buffer var uint 8 array=new uint 8 array(this . response)；};

xhr . send()；

我们在xhr.responseType中将属性设置为arraybuffer，这样我们就可以接受带有数字化数组的数据了！

总结

本文主要介绍了Array在堆栈模型中的存储方式，并详细描述了ArrayBuffer的二进制数据类型，即原始缓冲区。在web开发中，数据和数据存储是很重要的一部分，希望大家关注！

这个叙述可能有些错误，请多指正！