JavaScript类型化数组是一种类似数组的对象,并提供了一种用于访问原始二进制数据的机制。 正如你可能已经知道,Array
存储的对象能动态增多和减少,并且可以存储任何JavaScript值。JavaScript引擎会做一些内部优化,以便对数组的操作可以很快。然而,随着Web应用程序变得越来越强大,尤其一些新增加的功能例如:音频视频编辑,访问WebSockets的原始数据等,很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组来操作原始的二进制数据将会非常有帮助。
但是,不要把类型化数组与正常数组混淆,因为在类型数组上调用 Array.isArray()
会返回false
。此外,并不是所有可用于正常数组的方法都能被类型化数组所支持(如 push 和 pop)。
缓冲和视图:类型数组架构
为了达到最大的灵活性和效率,JavaScript 类型数组(ArrayBuffer
对象实现)描述的是一个数据块。缓冲没有格式可言,并且不提供机制访问其内容。为了访问在缓冲对象中包含的内存,你需要使用视图。视图提供了上下文 — 即数据类型、起始偏移量和元素数 — 将数据转换为实际有类型的数组。
ArrayBuffer
DataView
,使用它们来读写缓冲区中的内容.
类型数组视图
类型化数组视图具有自描述性的名字和所有常用的数值类型像Int8
,Uint32
,Float64
等等。有一种特殊类型的数组Uint8ClampedArray
。它仅操作0到255之间的数值。例如,这对于Canvas数据处理非常有用。
Type | Value Range | Size in bytes | Description | Web IDL type | Equivalent C type |
Int8Array |
-128 to 127 | 1 | 8-bit two's complement signed integer | byte |
int8_t |
Uint8Array |
0 to 255 | 1 | 8-bit unsigned integer | octet |
uint8_t |
Uint8ClampedArray |
0 to 255 | 1 | 8-bit unsigned integer (clamped) | octet |
uint8_t |
Int16Array |
-32768 to 32767 | 2 | 16-bit two's complement signed integer | short |
int16_t |
Uint16Array |
0 to 65535 | 2 | 16-bit unsigned integer | unsigned short |
uint16_t |
Int32Array |
-2147483648 to 2147483647 | 4 | 32-bit two's complement signed integer | long |
int32_t |
Uint32Array |
0 to 4294967295 | 4 | 32-bit unsigned integer | unsigned long |
uint32_t |
Float32Array |
1.2x10-38 to 3.4x1038 | 4 | 32-bit IEEE floating point number ( 7 significant digits e.g. 1.1234567) | unrestricted float |
float |
Float64Array |
5.0x10-324 to 1.8x10308 | 8 | 64-bit IEEE floating point number (16 significant digits e.g. 1.123...15) | unrestricted double |
double |
BigInt64Array |
-263 to 263-1 | 8 | 64-bit two's complement signed integer | bigint |
int64_t (signed long long) |
BigUint64Array |
0 to 264-1 | 8 | 64-bit unsigned integer | bigint |
uint64_t (unsigned long long) |
数据视图
Endianness),可以通过使用 DataView
来控制字节序。默认是大端字节序(Big-endian),但可以调用读写接口改为小端字节序(Little-endian)。
使用类型数组的Web API
-
FileReader.prototype.readAsArrayBuffer()
-
FileReader.prototype.readAsArrayBuffer()
读取对应的Blob
或File
的内容 -
XMLHttpRequest.prototype.send()
-
XMLHttpRequest
实例的send()
方法现在使用支持类型化数组和ArrayBuffer
对象作为参数。 -
ImageData.data
-
是一个
Uint8ClampedArray
对象,用来描述包含按照RGBA序列的颜色数据的一维数组,其值的范围在0
到255
(包含255)之间。
示例
使用视图和缓冲
首先,我们创建一个16字节固定长度的缓冲:
var buffer = new ArrayBuffer(16);
现在我们有了一段初始化为0的内存,目前还做不了什么太多操作。让我们确认一下数据的字节长度:
if (buffer.byteLength === 16) { console.log("Yes, it's 16 bytes."); } else { console.log("Oh no, it's the wrong size!"); }
在实际开始操作这个缓冲之前,需要创建一个视图。我们将创建一个视图,此视图将把缓冲内的数据格式化为一个32位的有符号整数数组:
var int32View = new Int32Array(buffer);
现在我们可以像普通数组一样访问该数组中的元素:
for (var i = 0; i < int32View.length; i++) { int32View[i] = i * 2; }
该代码会将数组以0, 2, 4和6填充 (一共4个4字节元素,所以总长度为16字节)。
同一数据的多个视图
更有意思的是,你可以在同一数据上创建多个视图。例如:基于上文的代码,我们可以添加如下代码处理:
var int16View = new Int16Array(buffer); for (var i = 0; i < int16View.length; i++) { console.log("Entry " + i + ": " + int16View[i]); }
这里我们创建了一个2字节整数视图,该视图共享上文的4字节整数视图的缓冲,然后以2字节整数打印出缓冲里的数据,这次我们会得到0, 0, 2, 0, 4, 0, 6, 0这样的输出。
那么,这样呢?
int16View[0] = 32; console.log("Entry 0 in the 32-bit array is now " + int32View[0]);
这次的输出是"Entry 0 in the 32-bit array is now 32"。也就是,这2个数组都是同一数据的以不同格式展示出来的视图。你可以使用任何一种 view types 中的定义的视图。
使用复杂的数据结构
通过将缓冲与不同类型视图组合,以及修改内存访问的偏移位置,你可以操作包含更多更复杂数据结构的数据。你可以使用js-ctypes操作诸如WebGL,数据文件或C语言结构体这些复杂的数据结构。
请看如下的C语言结构:
struct someStruct { unsigned long id; char username[16]; float amountDue; };
你可以采用如下代码访问一个包含此类结构体的缓冲:
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);
现在你就可以通过amountDueView[0]
的方式访问数量。
提示:C语言结构体的数据对齐与平台相关。因此需要防范和考虑不同平台的字节填充对齐。
转换为普通数组
在处理完一个类型化数组后,有时需要把它转为普通数组,以便可以可以像普通数据一种操作访问。可以调用 Array.from
实现这种转换,如果 Array.from
不支持的话,也可以通过如下代码实现:
var typedArray = new Uint8Array([1, 2, 3, 4]), normalArray = Array.prototype.slice.call(typedArray); normalArray.length === 4; normalArray.constructor === Array;
规范
Specification | Status | Comment |
---|---|---|
Typed Array Specification | Obsolete | Superseded by ECMAScript 2015. |
ECMAScript 2015 (6th Edition, ECMA-262) TypedArray Objects |
Standard | Initial definition in an ECMA standard. |
ECMAScript Latest Draft (ECMA-262) TypedArray Objects |
Draft |
浏览器兼容
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
TypedArray |
Chrome Full support 7 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
BYTES_PER_ELEMENT |
Chrome Full support 7 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
buffer |
Chrome Full support 7 | Edge Full support 14 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
byteLength |
Chrome Full support 7 | Edge Full support 14 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
byteOffset |
Chrome Full support 7 | Edge Full support 14 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
Constructor without arguments | Chrome Full support 7 | Edge Full support 12 | Firefox Full support 55 | IE Full support 10 | Opera Full support Yes | Safari Full support 5.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 55 | Opera Android Full support Yes | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 | nodejs ? |
copyWithin |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 34 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 34 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No | nodejs Full support 4.0.0 |
entries |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android No support No | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support Yes | nodejs Full support 0.12 |
every |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android No support No | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support Yes | nodejs Full support 4.0.0 |
fill |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 36 | Safari No support No | WebView Android No support No | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support Yes | nodejs Full support 4.0.0 |
filter |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 38 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android Full support 45 | Firefox Android Full support 38 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support Yes | nodejs Full support 4.0.0 |
find |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 32 | Safari No support No | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android Full support 32 | Safari iOS No support No | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
findIndex |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 32 | Safari No support No | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android Full support 32 | Safari iOS No support No | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
forEach |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 38 | IE No support No | Opera Full support 32 | Safari Full support 10 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 38 | Opera Android Full support 32 | Safari iOS ? | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
from |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 38 | IE No support No | Opera No support No | Safari Full support 10 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 38 | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android No support No | nodejs Full support 4.0.0 |
includes |
Chrome Full support 47 | Edge Full support 14 | Firefox Full support 43 | IE No support No | Opera Full support 34 | Safari Full support 10 | WebView Android No support No | Chrome Android Full support 47 | Firefox Android Full support 43 | Opera Android Full support 34 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 6.0.0
|
Indexed properties not consulting prototype | Chrome Full support 7
|
Edge Full support 12
|
Firefox Full support 25 | IE Full support 10
|
Opera Full support Yes
|
Safari Full support 5.1
|
WebView Android Full support ≤37
|
Chrome Android Full support 18
|
Firefox Android Full support 25 | Opera Android Full support Yes
|
Safari iOS Full support 5
|
Samsung Internet Android Full support 1.0
|
nodejs ?
|
indexOf |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37
|
IE No support No | Opera Full support 32 | Safari No support No | WebView Android No support No | Chrome Android Full support 45 | Firefox Android Full support 37
|
Opera Android Full support 32 | Safari iOS No support No | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
Iterable in constructor | Chrome Full support 39 | Edge Full support 14 | Firefox Full support 52 | IE No support No | Opera Full support 26 | Safari ? | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android Full support 52 | Opera Android Full support 26 | Safari iOS ? | Samsung Internet Android Full support 4.0 | nodejs Full support 4.0.0 |
join |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 32 | Safari No support No | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android Full support 32 | Safari iOS No support No | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
keys |
Chrome Full support 38 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 25 | Safari Full support 10 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 37 | Opera Android Full support 25 | Safari iOS Full support 10 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
lastIndexOf |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37
|
IE No support No | Opera Full support 32 | Safari Full support 10 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37
|
Opera Android Full support 32 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
length |
Chrome Full support 7 | Edge Full support 14 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
map |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 38 | IE No support No | Opera Full support 32 | Safari No support No | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 38 | Opera Android Full support 32 | Safari iOS No support No | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
move
|
Chrome No support No | Edge No support No | Firefox No support 16 — 34
|
IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support 16 — 34
|
Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No | nodejs No support No |
name |
Chrome Full support 7 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
Named properties | Chrome Full support 7 | Edge Full support 12 | Firefox Full support 30 | IE Full support 10 | Opera Full support Yes | Safari Full support 5.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 30 | Opera Android Full support Yes | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 | nodejs ? |
TypedArray() without new throws |
Chrome Full support 7 | Edge Full support 14 | Firefox Full support 44 | IE No support No | Opera Full support Yes | Safari Full support 5.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 44 | Opera Android Full support Yes | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 | nodejs Full support 0.12 |
of |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 38 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 38 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No | nodejs Full support 4.0.0 |
prototype |
Chrome Full support 7 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
reduce |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 32 | Safari Full support 10 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
reduceRight |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 32 | Safari Full support 10 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
reverse |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 32 | Safari Full support 10 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
set |
Chrome Full support 7 | Edge Full support 14 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs ? |
slice |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 38 | IE No support No | Opera Full support 32 | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 38 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
some |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 32 | Safari Full support 10 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 37 | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
sort |
Chrome Full support 45 | Edge Full support 14 | Firefox Full support 46 | IE No support No | Opera Full support 32 | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android Full support 46 | Opera Android Full support 32 | Safari iOS ? | Samsung Internet Android Full support 5.0 | nodejs Full support 4.0.0 |
subarray |
Chrome Full support 7 | Edge Full support 14 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11.6 | Safari Full support 5.1 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes | nodejs Full support 0.12 |
toLocaleString |
Chrome Full support 7 | Edge Full support 12 | Firefox Full support 51 | IE Full support 10 | Opera Full support Yes | Safari Full support 5.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 51 | Opera Android Full support Yes | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 | nodejs ? |
toString |
Chrome Full support 7 | Edge Full support 12 | Firefox Full support 51 | IE Full support 10 | Opera Full support Yes | Safari Full support 5.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 51 | Opera Android Full support Yes | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 | nodejs ? |
values |
Chrome Full support 38 | Edge Full support 14 | Firefox Full support 37 | IE No support No | Opera Full support 25 | Safari Full support 10 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 37 | Opera Android Full support 25 | Safari iOS Full support 10 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
@@iterator |
Chrome Full support 38 | Edge Full support 12 | Firefox Full support 36
|
IE No support No | Opera Full support 25 | Safari Full support Yes | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 36
|
Opera Android Full support 25 | Safari iOS Full support Yes | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
@@species |
Chrome Full support 51 | Edge Full support 13 | Firefox Full support 48 | IE No support No | Opera Full support 38 | Safari ? | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android Full support 48 | Opera Android Full support 41 | Safari iOS ? | Samsung Internet Android Full support 5.0 | nodejs Full support 6.5.0
|
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
了解更多
- Getting
ArrayBuffer
s or typed arrays from Base64-encoded strings StringView
– a C-like representation of strings based on typed arrays- Faster Canvas Pixel Manipulation with Typed Arrays
- Typed Arrays: Binary Data in the Browser
- Endianness