在 JavaScript 中，我们经常会遇到一些数据类型转换的问题，尤其是在处理二进制数据时。因为 JavaScript 中的数据类型转换是隐式的，所以很容易出现数据丢失的问题。本文将讨论如何使用 ES7 中的 ArrayBuffer 和 TypedArray 解决这个问题。
问题背景
假设我们需要将一个整数转换为二进制字符串，并存储到一个数组中，代码如下所示：
const num = 123;
const binaryArray = num.toString(2).split('').map(Number);
console.log(binaryArray); // [1, 1, 1, 1, 0, 1, 1]这段代码看起来没有问题，输出也符合预期。但是，如果我们希望将这个数组转换为一个 8 位的二进制数，代码就会出现问题：
const binary8 = binaryArray.join('').slice(0, 8);
console.log(binary8); // '11110110'我们期望的结果是 '11111011'，但是输出的结果却是 '11110110'。这是因为在转换过程中，JavaScript 将这个数组视为了一个 32 位的整数，因此在数组之前添加了 24 个 0，导致了数据的丢失。
解决方案
为了解决这个问题，ES7 中引入了 ArrayBuffer 和 TypedArray。ArrayBuffer 是一种特殊的对象，用于存储二进制数据；TypedArray 则是一组特定类型的 view，可以访问连续的二进制数据。
使用 ArrayBuffer
下面的代码演示了如何使用 ArrayBuffer 存储二进制数据：
const buffer = new ArrayBuffer(4); // 4 bytes const float32 = new Float32Array(buffer); float32[0] = 1.23; console.log(float32); // Float32Array [ 1.2300000190734863 ]
这段代码创建了一个 4 字节的 ArrayBuffer，并使用 Float32Array 访问这个 buffer。我们将 1.23 存储到了这个 buffer 的第一个位置，然后用 console.log 打印出了这个 Float32Array 对象。可以看到，这个对象成功地将存储在 buffer 中的二进制数据解析为了 1.23。
使用 TypedArray
在上面的例子中，我们使用了 Float32Array，它是使用 32 位 IEEE 浮点数存储数据的 TypedArray 之一。ES7 还支持以下 TypedArray：
- Int8Array/Uint8Array
- Int16Array/Uint16Array
- Int32Array/Uint32Array
- Float32Array/Float64Array
这些类型中的每一个都支持从 ArrayBuffer 中读取和写入连续的二进制数据，而且它们之间可以互相转换。下面的代码演示了如何将一个整数转换为二进制字符串，并存储到一个 Uint8Array 中：
const num = 123;
const binaryArray = num.toString(2).split('').map(Number);
const binaryBuffer = new ArrayBuffer(8); // 8 bits
const binaryArray8 = new Uint8Array(binaryBuffer);
binaryArray8.set(binaryArray, 0);
console.log(binaryArray8); // Uint8Array(8) [ 0, 0, 0, 0, 1, 1, 1, 1 ]这段代码的逻辑和之前的例子类似，不过我们用 Uint8Array 替换了之前的数组，并使用 ArrayBuffer 来存储数据。接着，我们使用 set 方法将 binaryArray 写入 binaryArray8 中。可以看到，这个 Uint8Array 成功地将存储在 buffer 中的二进制数据解析为了 123 的二进制表示。
最后，我们可以使用 slice 方法将这个数组转换为一个 8 位的二进制数：
const binary8 = binaryArray8.slice(0, 8).join('');
console.log(binary8); // '01111011'这次，输出结果符合预期，我们成功地解决了数据丢失的问题。
总结
在处理二进制数据时，JavaScript 很容易出现数据丢失的问题。ES7 中的 ArrayBuffer 和 TypedArray 可以帮助我们解决这个问题。使用 ArrayBuffer 可以存储二进制数据，使用 TypedArray 可以访问连续的二进制数据。在实际开发中，我们可以使用这些技术来处理网络数据、图像数据等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c5393968c7c53b076a051