JavaScript定型数组详解

定型数组的创建

定型数组是另一种形式的ArrayBuffer视图。虽然概念上与DataView接近，但定型数组的区别在于，它特定于一种ElementType且遵循系统原生的字节序。

相应地，定型数组提供了适用面更广的API和更高的性能。设计定型数组的目的就是提高与WebGL等原生库交换二进制数据的效率。由于定型数组的二进制表示对操作系统而言是一种容易使用的格式，JavaScript引擎可以重度优化算术运算、按位运算和其他对定型数组的常见操作，因此使用它们速度极快。

创建定型数组的方式包括读取已有的缓冲、使用自有缓冲、填充可迭代结构，以及填充基于任意类型的定型数组。另外，通过.from()和.of()也可以创建定型数组：

// 创建一个12 字节的缓冲
const buf = new ArrayBuffer(12);
// 创建一个引用该缓冲的Int32Array
const ints = new Int32Array(buf);
// 这个定型数组知道自己的每个元素需要4 字节
// 因此长度为3
alert(ints.length); // 3

// 创建一个长度为6 的Int32Array
const ints2 = new Int32Array(6);
// 每个数值使用4 字节，因此ArrayBuffer是24 字节
alert(ints2.length);  // 6

// 类似DataView，定型数组也有一个指向关联缓冲的引用
alert(ints2.buffer.byteLength);  // 24
// 创建一个包含[2, 4, 6, 8]的Int32Array
const ints3 = new Int32Array([2, 4, 6, 8]);
alert(ints3.length);   // 4
alert(ints3.buffer.byteLength); // 16
alert(ints3[2]);   // 6

// 通过复制ints3 的值创建一个Int16Array
const ints4 = new Int16Array(ints3);
// 这个新类型数组会分配自己的缓冲
// 对应索引的每个值会相应地转换为新格式
alert(ints4.length);  // 4
alert(ints4.buffer.byteLength); // 8
alert(ints4[2]);  // 6

// 基于普通数组来创建一个Int16Array
const ints5 = Int16Array.from([3, 5, 7, 9]);
alert(ints5.length);  // 4
alert(ints5.buffer.byteLength); // 8
alert(ints5[2]);  // 7

// 基于传入的参数创建一个Float32Array
const floats = Float32Array.of(3.14, 2.718, 1.618);
alert(floats.length);  // 3
alert(floats.buffer.byteLength); // 12
alert(floats[2]);  // 1.6180000305175781

定型数组的构造函数和实例都有一个BYTES_PER_ELEMENT属性，返回该类型数组中每个元素的大小：

alert(Int16Array.BYTES_PER_ELEMENT);   // 2
alert(Int32Array.BYTES_PER_ELEMENT);   // 4
const ints = new Int32Array(1),
floats = new Float64Array(1);
alert(ints.BYTES_PER_ELEMENT);  // 4
alert(floats.BYTES_PER_ELEMENT);  // 8

如果定型数组没有用任何值初始化，则其关联的缓冲会以0填充：

const ints = new Int32Array(4);
alert(ints[0]);   // 0
alert(ints[1]);   // 0
alert(ints[2]);   // 0
alert(ints[3]);   // 0

定型数组行为

从很多方面看，定型数组与普通数组都很相似。定型数组支持如下操作符、方法和属性：
**

❑ [] ❑ copyWithin() ❑ entries() ❑ every() ❑ fill() ❑ filter() ❑ find()
❑ findIndex() ❑ forEach() ❑ indexOf() ❑ join() ❑ keys() ❑
lastIndexOf() ❑ length ❑ map() ❑ reduce() ❑ reduceRight() ❑ reverse()
❑ slice() ❑ some() ❑ sort() ❑ toLocaleString() ❑ toString() ❑ values()

**

其中，返回新数组的方法也会返回包含同样元素类型（element type）的新定型数组：

const ints = new Int16Array([1, 2, 3]);
const doubleints = ints.map(x => 2＊x);
alert(doubleints instanceof Int16Array); // true

定型数组有一个Symbol.iterator符号属性，因此可以通过for…of循环和扩展操作符来操作：

const ints = new Int16Array([1, 2, 3]);
for (const int of ints) {
  alert(int);
}
// 1
// 2
// 3
alert(Math.max(...ints)); // 3

2．合并、复制和修改定型数组

定型数组同样使用数组缓冲来存储数据，而数组缓冲无法调整大小。因此，下列方法不适用于定型数组：

❑ concat() ❑ pop() ❑ push() ❑ shift() ❑ splice() ❑ unshift()

不过，定型数组也提供了两个新方法，可以快速向外或向内复制数据：set()和subarray()。

set()从提供的数组或定型数组中把值复制到当前定型数组中指定的索引位置：

// 创建长度为8 的int16 数组
const container = new Int16Array(8);
// 把定型数组复制为前4 个值
// 偏移量默认为索引0
container.set(Int8Array.of(1, 2, 3, 4));
console.log(container);   // [1,2,3,4,0,0,0,0]

// 把普通数组复制为后4 个值
// 偏移量4 表示从索引4 开始插入
container.set([5,6,7,8], 4);
console.log(container);   // [1,2,3,4,5,6,7,8]
// 溢出会抛出错误
container.set([5,6,7,8], 7);
// RangeError

subarray()执行与set()相反的操作，它会基于从原始定型数组中复制的值返回一个新定型数组。复制值时的开始索引和结束索引是可选的：

const source = Int16Array.of(2, 4, 6, 8);
// 把整个数组复制为一个同类型的新数组
const fullCopy = source.subarray();
console.log(fullCopy);   // [2, 4, 6, 8]
// 从索引2 开始复制数组
const halfCopy = source.subarray(2);
console.log(halfCopy);   // [6, 8]
// 从索引1 开始复制到索引3
const partialCopy = source.subarray(1, 3);
console.log(partialCopy);   // [4, 6]

定型数组没有原生的拼接能力，但使用定型数组API提供的很多工具可以手动构建：

// 第一个参数是应该返回的数组类型
// 其余参数是应该拼接在一起的定型数组
function typedArrayConcat(typedArrayConstructor, ...typedArrays) {
	// 计算所有数组中包含的元素总数
	const numElements = typedArrays.reduce((x, y) => (x.length || x) + y.length);
	// 按照提供的类型创建一个数组，为所有元素留出空间
	const resultArray = new typedArrayConstructor(numElements);
	// 依次转移数组
	let currentOffset = 0;
	typedArrays.map(x => {
		resultArray.set(x, currentOffset);
		currentOffset += x.length;
	});
	return resultArray;
}
const concatArray = typedArrayConcat(Int32Array,
                                    Int8Array.of(1, 2, 3),
                                    Int16Array.of(4, 5, 6),
                                    Float32Array.of(7, 8, 9));
console.log(concatArray);   // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(concatArray instanceof Int32Array); // true

3．下溢和上溢

定型数组中值的下溢和上溢不会影响到其他索引，但仍然需要考虑数组的元素应该是什么类型。定型数组对于可以存储的每个索引只接受一个相关位，而不考虑它们对实际数值的影响。以下代码演示了如何处理下溢和上溢：

// 长度为2 的有符号整数数组
// 每个索引保存一个二补数形式的有符号整数
// 范围是-128（-1 ＊ 2^7）~127（2^7-1）
const ints = new Int8Array(2);
// 长度为2 的无符号整数数组
// 每个索引保存一个无符号整数
// 范围是0~255（2^7-1）
const unsignedInts = new Uint8Array(2);
// 上溢的位不会影响相邻索引
// 索引只取最低有效位上的8 位
unsignedInts[1] = 256;        // 0x100
console.log(unsignedInts);   // [0, 0]
unsignedInts[1] = 511;        // 0x1FF
console.log(unsignedInts);   // [0, 255]

// 下溢的位会被转换为其无符号的等价值
// 0xFF是以二补数形式表示的-1（截取到8 位）,
// 但255 是一个无符号整数
unsignedInts[1] = -1          // 0xFF (truncated to 8 bits)
console.log(unsignedInts);   // [0, 255]

// 上溢自动变成二补数形式
// 0x80 是无符号整数的128，是二补数形式的-128
ints[1] = 128;          // 0x80
console.log(ints);     // [0, -128]

// 下溢自动变成二补数形式
// 0xFF是无符号整数的255，是二补数形式的-1
ints[1] = 255;          // 0xFF
console.log(ints);     // [0, -1]

除了8种元素类型，还有一种“夹板”数组类型：Uint8ClampedArray，不允许任何方向溢出。超出最大值255的值会被向下舍入为255，而小于最小值0的值会被向上舍入为0。

const clampedInts = new Uint8ClampedArray([-1, 0, 255, 256]);
console.log(clampedInts); // [0, 0, 255, 255]

按照JavaScript之父Brendan Eich的说法：“Uint8ClampedArray完全是HTML5canvas元素的历史留存。除非真的做跟canvas相关的开发，否则不要使用它。”

上一篇文章：JavaScript定型数组详解

更多资源请关注公众号：【全面资源集】