在前端开发中，经常需要处理二进制数据，而 ArrayBuffer 是一种用于表示二进制数据的数据类型。但是，在实际应用时，我们往往需要将 ArrayBuffer 转换为普通的数组，以便更好地进行处理和展示。ES12 中新增的 map() 方法提供了一种简单、高效的方式来进行这种转换。
ArrayBuffer 简介
在介绍 map() 方法之前，我们先对 ArrayBuffer 进行简单介绍。
ArrayBuffer 是一种用于表示二进制数据的数据类型，它可以存储不同类型的数据，包括数字、布尔值、字符串等。ArrayBuffer 对象的初始化需要指定一个字节数，这个字节数必须是正整数。
ArrayBuffer 对象只是一种存储二进制数据的容器，我们需要使用某种数据类型的视图（View）来读写 ArrayBuffer 对象中的数据。ES6 提供了以下几种视图类型：
DataView：用于读写任意字节序的数据Int8Array：8 位有符号整数Uint8Array：8 位无符号整数Uint8ClampedArray：8 位无符号整数（溢出时自动截断为 0~255）Int16Array：16 位有符号整数Uint16Array：16 位无符号整数Int32Array：32 位有符号整数Uint32Array：32 位无符号整数Float32Array：32 位浮点数Float64Array：64 位浮点数
使用 map() 方法将 ArrayBuffer 转换为普通数组
ES12 中新增的 map() 方法是一种高效、功能强大的方法，它可以方便地将 ArrayBuffer 转换为普通数组。下面是使用 map() 方法实现这种转换的示例代码：
const buffer = new ArrayBuffer(4);
const int16Array = new Int16Array(buffer);
int16Array[0] = 42;
int16Array[1] = 66;
const normalArray = Array.from({ length: int16Array.length }, (_, i) => int16Array[i]);
console.log(normalArray); // [42, 66]在这个示例中，我们首先创建了一个字节数为 4 的 ArrayBuffer 对象，并使用 Int16Array 类型的视图来读写其中的数据。我们将数据分别设为 42 和 66。
接着，我们使用 Array.from() 方法将 int16Array 转换为普通数组。Array.from() 方法从一个类数组对象或可迭代对象中创建一个新的数组实例。我们设置了 length 属性为 int16Array.length，然后使用箭头函数返回 int16Array[i]，最终得到了转换后的普通数组。
上面这种方法看起来有些冗长，我们可以使用更简洁的方式来实现相同的转换效果：
const buffer = new ArrayBuffer(4); const int16Array = new Int16Array(buffer); int16Array[0] = 42; int16Array[1] = 66; const normalArray = [...int16Array]; console.log(normalArray); // [42, 66]
在这个示例中，我们使用了扩展运算符（...）来将 int16Array 转换为普通数组。这种方法看起来更简洁，但需要注意的是，这种方式只能用于 TypedArray 类型的视图。
总结
在前端开发中，处理二进制数据是一项比较常见的任务，而 ArrayBuffer 是一种用于表示二进制数据的数据类型。ES12 中新增的 map() 方法提供了一种简单、高效的方式来将 ArrayBuffer 转换为普通数组。我们可以使用 Array.from() 方法或扩展运算符来实现这种转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1d64df6b2d6eab3d15290