在前端开发中，涉及到二进制数据处理的时候，我们通常使用 ArrayBuffer 和 TypedArray。这两个对象在ECMAScript 2017中得到了增强和改进，本文将对这些增强和改进进行详细探讨，并给出一些示例代码以帮助读者更好地理解。
什么是 ArrayBuffer？
ArrayBuffer 是描述一个二进制数据缓冲区的对象。它只能用来存储固定长度的二进制数据，且在声明时需要指定长度大小。例如，下面代码将创建一个长度为8字节（64位）的数组缓冲区：
const buffer = new ArrayBuffer(8);
什么是 TypedArray？
TypedArray 是一种特殊的数组类型，用来处理 ArrayBuffer 中的二进制数据。它支持多种数据类型，包括 uint8、int16、uint32、float32 等等，且在声明时需要指定数据类型和数组长度。例如，下面代码将创建一个包含8个浮点数的 TypedArray：
const floats = new Float32Array(buffer, 0, 8);
这里的第一个参数是 ArrayBuffer 对象，第二个参数是相对于 ArrayBuffer 开始位置的偏移量（单位为字节），第三个参数是数组长度。
新增的 TypedArray 增强和改进
到了 ECMAScript 2017，TypedArray 得到了一些增强和改进。下面将详细介绍其中的几个：
from 和 of 方法
TypedArray 新增了 from 和 of 两个静态方法。from 方法接受一个类数组对象或可迭代对象作为参数，并返回一个包含该对象内容的 TypedArray。of 方法接受一组值作为参数，并返回一个 TypedArray，每个值对应一个数组元素。
const arr = [1, 2, 3]; const typedArr1 = Float32Array.from(arr); console.log(typedArr1); // Float32Array [ 1, 2, 3 ] const typedArr2 = Float32Array.of(1, 2, 3); console.log(typedArr2); // Float32Array [ 1, 2, 3 ]
注意：from 方法会尝试将参数对象转换为 TypedArray 对象，因此可以传入任意类型的对象，包括字符串、Set 或 Map 对象等等。
slice 方法
在 ECMAScript 2017 中，TypedArray 新增了 slice 方法，用于从现有 TypedArray 创建一个新的 TypedArray 子集。
const arr = [1, 2, 3, 4, 5]; const typedArr1 = new Uint8Array(arr); console.log(typedArr1) // [1, 2, 3, 4, 5] const typedArr2 = typedArr1.slice(2, 4); console.log(typedArr2) // [3, 4]，从第2个元素开始，到第4个元素（不包括第4个元素）
set 方法
TypedArray 的 set 方法用于将一个 TypedArray 中的值赋值到另一个 TypedArray 对象中。这个方法的参数既可以是 TypedArray 对象，也可以是普通的数组。
const arr = [1, 2, 3, 4, 5]; const typedArr1 = new Uint8Array(arr); console.log(typedArr1) // [1, 2, 3, 4, 5] const typedArr2 = new Uint8Array(3); typedArr2.set(typedArr1.subarray(1, 4)); console.log(typedArr2) // [2, 3, 4]
示例代码
下面是一个示例代码，用于从二进制数组中解析出 BMP 图像的像素数据，并将其绘制到 HTML5 Canvas 上。
-- -------------------- ---- -------
----- --------- - --------------------------------------
----- ------ - ----------------------------------
----- --- - ------------------------
----- ------- - --------------------------------- ---------------
------------------------------------ -- -- -
----- ---- - -------------------
----- ------ - --- -------------
----- --- - --- --------
------------- - -- -- -
----- ------ - --------------
----- -------- - --- -----------------
----- ------------- - ---
----- -------- - ---------------------- ------ -- -----
----- --------- - ---------------------- ------ -- -----
----- ------- - ------------------ - - - -- - -- -- -----------
----- --------------- - ------------- - - - ---- -- -------
----- --------------- - ------- - ---------- -- ------
----- --------- - --- ------------------ ---------------- -----------------
-- --------- ---- -
--- ---- - - -- - - ---------- ---- -
--- ---- - - -- - - --------- ---- -
----- ------ - - - ------- - - - --
----- - - ------------------
----- - - ---------------- - ---
----- - - ---------------- - ---
--- - - ----
----------------------- - - - -- - -------- - - - - - -- - --
----------------------- - - - -- - -------- - - - - - - - -- - --
----------------------- - - - -- - -------- - - - - - - - -- - --
----------------------- - - - -- - -------- - - - - - - - -- - --
-
-
-- - ------ -----
------------ - ---------
------------- - ----------
------------------------- -- ---
--
-------------------------------
---总结
本文详细介绍了 ECMAScript 2017 中 ArrayBuffer 与 TypedArray 的增强和改进，以及给出了一些实例代码帮助读者更好地理解和应用这些特性。随着 Web 技术的不断发展，二进制数据处理在前端开发中将越来越普遍，因此了解和掌握这些特性显得尤为重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501865795b1f8cacdf3b051