JavaScript 是一门动态类型语言，但有时我们需要在数据结构中使用固定类型的值，以提高性能和减少内存占用。ECMAScript 2021 引入了类型化数组（Typed Arrays），是一种支持固定数据类型的数组，包括占用空间固定的基本数据类型和自定义复杂数据类型。
基本数据类型
类型化数组支持以下固定数据类型：
- Int8Array：有符号 8 位整型，范围为 -128 到 127。
- Uint8Array：无符号 8 位整型，范围为 0 到 255。
- Int16Array：有符号 16 位整型，范围为 -32768 到 32767。
- Uint16Array：无符号 16 位整型，范围为 0 到 65535。
- Int32Array：有符号 32 位整型，范围为 -2147483648 到 2147483647。
- Uint32Array：无符号 32 位整型，范围为 0 到 4294967295。
- Float32Array：32 位浮点型。
- Float64Array：64 位浮点型。
我们可以使用以下方式来创建类型化数组：
const int8Array = new Int8Array(10); // 创建一个长度为 10 的 Int8Array 数组 const uint8Array = new Uint8Array([1, 2, 3, 4, 5]); // 从数组 [1, 2, 3, 4, 5] 中创建一个 Uint8Array 数组 const float32Array = new Float32Array(buffer); // 创建一个使用给定的 ArrayBuffer 对象作为存储器的 Float32Array 数组
我们可以像普通数组一样遍历、修改和增删元素：
const uint8Array = new Uint8Array([1, 2, 3, 4, 5]);
for (let i = 0; i < uint8Array.length; i++) {
console.log(uint8Array[i]); // 依次输出 1，2，3，4，5
}
uint8Array[1] = 6; // 将第二个元素修改为 6
uint8Array.set([7, 8, 9], 2); // 在索引 2 处插入 [7, 8, 9]，替换掉 3 和 4
console.log(uint8Array); // Uint8Array [ 1, 6, 7, 8, 9 ]自定义数据类型
我们还可以使用 DataView 对象构建自定义数据类型的类型化数组。
const buffer = new ArrayBuffer(16); // 创建一个长度为 16 字节的 ArrayBuffer const view = new DataView(buffer); // 使用给定的 ArrayBuffer 对象创建一个 DataView 对象 view.setInt16(0, 42); // 在索引 0 处写入一个有符号 16 位整数 42 console.log(view.getInt16(0)); // 输出 42
可以看到 DataView 对象提供了一系列读取和写入不同类型数据的 API，包括 setInt8、getInt8、setUint8、getUint8 等。
我们可以通过别名类型来创建基于 DataView 的类型化数组：
const int16Array = new Int16Array(buffer); // 基于给定的 ArrayBuffer 对象创建 Int16Array 数组 int16Array[0] = 42; // 在索引 0 处写入一个有符号 16 位整数 42 console.log(int16Array[0]); // 输出 42
学习意义
类型化数组可以优化我们的代码，提高性能和减少内存占用。在处理底层数据结构、二进制数据和多媒体数据时，类型化数组非常方便。除此之外，掌握类型化数组也是在 JavaScript 面试中经常被问到的知识点。
需要注意的是，在使用类型化数组时，我们必须显式地声明使用哪种数据类型，否则可能会导致出现数据类型不匹配的错误。此外，类型化数组不像普通数组那样能够自由增删元素，因此在使用时需要注意数组的长度和内存占用。
指导意义
在实际工作中，我们可以使用类型化数组优化数据操作，例如使用 Uint8Array 替代字符串来传输字节数组。此外，我们也可以使用类型化数组进行数据加密和解密，或者用于处理图片和视频数据。在处理海量数据时，使用类型化数组也可以大幅提高程序的效率。
示例代码
下面是一个使用类型化数组计算向量点积的示例代码：
-- -------------------- ---- -------
-------- ------------- -- -
-- --------- --- --------- -
----- --- -----------------
-
--- --- - --
----- - - ---------
--- ---- - - -- - - -- ---- -
--- -- ---- - -----
-
------ ----
-
-------- ----------------------- -- -
-- -------------- --- -------------- -
----- --- -----------------
-
-- --------- --- --------- -
----- --- -----------------
-
--- --- - --
----- - - ---------
----- ----------- - --------------------
----- ------ - --- ------------- - -------------
----- ----- - --- ----------------------
----- ----- - --- ----------------------
--- ---- - - -- - - -- ---- -
-------- - -----
-------- - -----
-
--- ---- - - -- - - -- ---- -
--- -- -------- - ---------
-
------ ----
-
-- ----
----- - - --- -- -- -- ---
----- - - --- -- -- -- ----
------------------------- ---- -- -- ---
------------------------------------ -------------- --- ---------------- -- -- ---
------------------------------------ -------------- --- ---------------- -- -- ---
------------------------------------ ---------------- --- ------------------ -- -- ---该函数计算了两个向量的点积，分别使用了普通数组和类型化数组，可以看到计算结果一致。
结论
类型化数组是 ECMAScript 2021 新增功能之一，允许开发人员在数据结构中使用固定数据类型以提高性能和减少内存占用。同时也可以用于底层数据结构、二进制数据和多媒体数据的处理，以及数据加密和解密、海量数据处理等场景。掌握类型化数组的使用可以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e4b118be2a908450d587f