3.10 ArrayBuffer：类型化数组 · JavaScript 标准参考教程

相关文章推荐

爱看书的竹笋 · 3.10 ...· 昨天 ·

千杯不醉的豆腐 · Butterworth ...· 3 月前 ·

曾深爱过的消炎药 · PHP curl ...· 3 月前 ·

腼腆的皮带 · jupyter ...· 1 年前 ·

腼腆的土豆 · Delphi ...· 1 年前 ·

强悍的牛肉面 · js通过getElementById或get ...· 1 年前 ·

类型化数组是JavaScript操作二进制数据的一个接口。这要从WebGL项目的诞生说起，所谓WebGL，就是指浏览器与显卡之间的通信接口，为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。比如，以文本格式传递一个32位整数，两端的JavaScript脚本与显卡都要进行格式转化，将非常耗时。这时要是存在一种机制，可以像C语言那样，直接操作字节，然后将4个字节的32位整数，以二进制形式原封不动地送入显卡，脚本的性能就会大幅提升。类型化数组（Typed Array）就是在这种背景下诞生的。它很像C语言的数组，允许开发者以数组下标的形式，直接操作内存。有了类型化数组以后，JavaScript的二进制数据处理功能增强了很多，接口之间完全可以用二进制数据通信。 ## 分配内存类型化数组是建立在ArrayBuffer对象的基础上的。它的作用是，分配一段可以存放数据的连续内存区域。 var buf = new ArrayBuffer(32); 上面代码生成了一段32字节的内存区域。 ArrayBuffer对象的byteLength属性，返回所分配的内存区域的字节长度。 var buffer = new ArrayBuffer(32); buffer.byteLength // 32 如果要分配的内存区域很大，有可能分配失败（因为没有那么多的连续空余内存），所以有必要检查是否分配成功。 if (buffer.byteLength === n) { // 成功 } else { // 失败 ArrayBuffer对象有一个slice方法，允许将内存区域的一部分，拷贝生成一个新的ArrayBuffer对象。 var buffer = new ArrayBuffer(8); var newBuffer = buffer.slice(0,3); 上面代码拷贝buffer对象的前3个字节，生成一个新的ArrayBuffer对象。slice方法其实包含两步，第一步是先分配一段新内存，第二步是将原来那个ArrayBuffer对象拷贝过去。 slice方法接受两个参数，第一个参数表示拷贝开始的字节序号，第二个参数表示拷贝截止的字节序号。如果省略第二个参数，则默认到原ArrayBuffer对象的结尾。除了slice方法，ArrayBuffer对象不提供任何直接读写内存的方法，只允许在其上方建立视图，然后通过视图读写。 ## 视图 ### 视图的生成 ArrayBuffer作为内存区域，可以存放多种类型的数据。不同数据有不同的存储方式，这就叫做“视图”。目前，JavaScript提供以下类型的视图： * Int8Array：8位有符号整数，长度1个字节。 * Uint8Array：8位无符号整数，长度1个字节。 * Int16Array：16位有符号整数，长度2个字节。 * Uint16Array：16位无符号整数，长度2个字节。 * Int32Array：32位有符号整数，长度4个字节。 * Uint32Array：32位无符号整数，长度4个字节。 * Float32Array：32位浮点数，长度4个字节。 * Float64Array：64位浮点数，长度8个字节。每一种视图都有一个BYTES_PER_ELEMENT常数，表示这种数据类型占据的字节数。 Int8Array.BYTES_PER_ELEMENT // 1 Uint8Array.BYTES_PER_ELEMENT // 1 Int16Array.BYTES_PER_ELEMENT // 2 Uint16Array.BYTES_PER_ELEMENT // 2 Int32Array.BYTES_PER_ELEMENT // 4 Uint32Array.BYTES_PER_ELEMENT // 4 Float32Array.BYTES_PER_ELEMENT // 4 Float64Array.BYTES_PER_ELEMENT // 8 每一种视图都是一个构造函数，有多种方法可以生成：（1）在ArrayBuffer对象之上生成视图。同一个ArrayBuffer对象之上，可以根据不同的数据类型，建立多个视图。 // 创建一个8字节的ArrayBuffer var b = new ArrayBuffer(8); // 创建一个指向b的Int32视图，开始于字节0，直到缓冲区的末尾 var v1 = new Int32Array(b); // 创建一个指向b的Uint8视图，开始于字节2，直到缓冲区的末尾 var v2 = new Uint8Array(b, 2); // 创建一个指向b的Int16视图，开始于字节2，长度为2 var v3 = new Int16Array(b, 2, 2); 上面代码在一段长度为8个字节的内存（b）之上，生成了三个视图：v1、v2和v3。视图的构造函数可以接受三个参数： * 第一个参数：视图对应的底层ArrayBuffer对象，该参数是必需的。 * 第二个参数：视图开始的字节序号，默认从0开始。 * 第三个参数：视图包含的数据个数，默认直到本段内存区域结束。因此，v1、v2和v3是重叠：v1[0]是一个32位整数，指向字节0～字节3；v2[0]是一个8位无符号整数，指向字节2；v3[0]是一个16位整数，指向字节2～字节3。只要任何一个视图对内存有所修改，就会在另外两个视图上反应出来。（2）直接生成。视图还可以不通过ArrayBuffer对象，直接分配内存而生成。 var f64a = new Float64Array(8); f64a[0] = 10; f64a[1] = 20; f64a[2] = f64a[0] + f64a[1]; 上面代码生成一个8个成员的Float64Array数组（共64字节），然后依次对每个成员赋值。这时，视图构造函数的参数就是成员的个数。可以看到，视图数组的赋值操作与普通数组的操作毫无两样。（3）将普通数组转为视图数组。将一个数据类型符合要求的普通数组，传入构造函数，也能直接生成视图。 var typedArray = new Uint8Array( [ 1, 2, 3, 4 ] ); 上面代码将一个普通的数组，赋值给一个新生成的8位无符号整数的视图数组。视图数组也可以转换回普通数组。 var normalArray = Array.apply( [], typedArray ); ### 视图的操作建立了视图以后，就可以进行各种操作了。这里需要明确的是，视图其实就是普通数组，语法完全没有什么不同，只不过它直接针对内存进行操作，而且每个成员都有确定的数据类型。所以，视图就被叫做“类型化数组”。（1）数组操作普通数组的操作方法和属性，对类型化数组完全适用。 var buffer = new ArrayBuffer(16); var int32View = new Int32Array(buffer); for (var i=0; i 第一章导论

1.1 前言

1.2 为什么学习JavaScript？

1.3 JavaScript的历史

第二章基本语法

2.1 语法概述

2.2 数值

2.3 字符串

2.4 对象

2.5 数组

2.6 函数

2.7 运算符

2.8 数据类型转换