在 Web 前端开发中，JavaScript 是最常用的编程语言之一，而在 JavaScript 中，数据类型的处理一直是一个重要的问题。ES6 引入了一些新的类型（如 Set、Map 等），ES10 又新增了 TypedArray，它能够有效地处理数组数据。本文将详细介绍 ES10 的 TypedArray。
TypedArray 简介
TypedArray 是一个类型化数组，它可以存储特定的二进制类型数据，如 Uint8Array、Float64Array、Int16Array 等等。与普通的 JavaScript 数组不同，TypedArray 的元素是固定的，每个元素占用的字节数也是确定的，因此它更高效、更安全。
TypedArray 常见类型
在 ES10 中，TypedArray 一共有 9 种类型，它们的区别在于存储的二进制数据类型不同，具体如下：
Int8Array: 8 位有符号整数。Uint8Array: 8 位无符号整数。Uint8ClampedArray: 8 位无符号整数，但是溢出会被截断至 0 或 255。Int16Array: 16 位有符号整数。Uint16Array: 16 位无符号整数。Int32Array: 32 位有符号整数。Uint32Array: 32 位无符号整数。Float32Array: 32 位浮点数。Float64Array: 64 位浮点数。
TypedArray 用法
TypedArray 的用法类似于普通数组，可以使用下标访问其中的元素，也可以使用数组的一些方法，如 push、unshift、slice 等。但是，与普通数组不同的是，TypedArray 在创建时必须指定数组的长度，数组的元素类型也是固定的。
创建 TypedArray
创建 TypedArray 最常用的方法是使用构造函数：
const arr = new Int8Array(4); // 创建一个长度为 4，元素类型为 int8 的 TypedArray
如果你已经有了一个普通数组，也可以使用 TypedArray.from 方法来将其转化为 TypedArray：
const arr1 = [1, 2, 3, 4]; const typedArr = Int8Array.from(arr1); // 将 arr1 转化为 int8 类型的 TypedArray console.log(typedArr); // Int8Array [1, 2, 3, 4]
访问 TypedArray
TypedArray 的访问方式与普通数组一致，可以使用下标访问其中的元素。
const arr = new Int8Array(4); arr[0] = 10; arr[1] = 20; console.log(arr[1]); // 20
此外，TypedArray 也支持 forEach、reduce、map 等数组方法。
TypeArray 与 ArrayBuffer
在 TypedArray 中，最常用于存储和处理数据的是 ArrayBuffer 类型。ArrayBuffer 的实例表示一段内存区域，它不能直接存储数据，必须通过 TypedArray 类型的对象来操作。
下面是一个创建 ArrayBuffer 的例子：
const buffer = new ArrayBuffer(8);
数组缓冲区的大小在创建时一定要指定，否则无法进行操作。使用构造函数的参数为缓冲区大小（以字节为单位），上例创建的缓冲区大小为 8 字节。
在 ArrayBuffer 基础上，我们可以使用视图来读取或者写入数据。一个 DataView 视图或者一个 TypedArray 视图必须引用该缓冲区，并且以特定类型格式化其二进制数据。如：
const arr = new Int8Array(buffer);
这样，我们就可以通过 arr 对 ArrayBuffer 进行读写操作了。
常见操作
slice
TypedArray 中也有 slice 方法，用法和普通数组的 slice 是一致的：
const arr1 = new Int8Array([1, 2, 3, 4]); const arr2 = arr1.slice(1, 3); // arr2 的取值为 [2, 3], 因为下标 1-2 对应的值是 2 和 3
map
使用 map 方法时，TypedArray 会返回一个新的 TypedArray。如下例，我们将 int8 类型的 TypedArray 转换成了 int16 类型的 TypedArray：
const a = new Int8Array([1, 2, 3, 4]); const b = a.map(x => x * 2); console.log(b); // Int16Array [2, 4, 6, 8]
forEach 和 reduce
与普通数组一样，TypedArray 也支持 forEach 和 reduce 方法。
// javascriptcn.com 代码示例
const a = new Uint16Array([10, 20, 30, 40]);
a.forEach(function(value, index, array) {
console.log(value, index);
});
// 输出结果：
// 10 0
// 20 1
// 30 2
// 40 3
const b = new Int8Array([1, 2, 3, 4, 5]);
const sum = b.reduce(function(prev, curr, index, array) {
return prev + curr;
});
console.log(sum); // 15TypedArray 的各种应用
TypedArray 的使用可以进一步增强 Web 前端开发的功能，如数组合并、像素处理、身份验证等等。接下来，我们以图像处理为例，演示 TypedArray 的应用。
图像处理
在前端 Web 开发中，图像处理是非常常见的需求。使用 TypedArray，我们可以很方便地对图像进行处理。以将图片进行反色处理为例，我们首先需要使用 canvas 将图片绘制出来，然后再利用 TypedArray 将图片的数据读出，进行处理封装，再将处理后的数据写入到 canvas 中。
// javascriptcn.com 代码示例
// 将图片转化为 canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, width, height);
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
const len = data.length;
const step = 4;
// 对图片像素进行反色处理
for (let i = 0; i < len; i += step) {
data[i] = 255 - data[i];
data[i+1] = 255 - data[i+1];
data[i+2] = 255 - data[i+2];
}
// 将处理后的数据写入原图像
ctx.putImageData(imageData, 0, 0);本文总结
本文主要介绍了 ES10 中的 TypedArray，包括 TypedArray 的作用、常见类型及应用等内容。我们可以看到，TypedArray 对于 JavaScript 中的数组处理和 Web 开发中的图像处理等方面有着很好的指导意义。因此，对于学习和掌握 TypedArray，对于我们提升 Web 前端开发的技能和水平，都具有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7857af6b2d6eab3fe0828