随着互联网的发展，二进制数据处理变得越来越重要。在前端开发中，我们经常需要处理二进制数据，比如图片、音频、视频等。ES10 中引入了 ArrayBuffer 和 TypedArray，使得在前端处理二进制数据变得更加方便和高效。本文将介绍如何使用这两个新特性来处理二进制数据，并提供示例代码。
什么是 ArrayBuffer 和 TypedArray
ArrayBuffer 是一种新的数据类型，可以用来存储二进制数据，它是一个固定长度的内存区域。与普通的 JavaScript 数组不同，ArrayBuffer 中的元素只能是整数或布尔值，而且不能直接访问或修改这些元素。要访问 ArrayBuffer 中的元素，需要使用 TypedArray。
TypedArray 是一种特殊的数组，它可以访问 ArrayBuffer 中的数据。TypedArray 有多种类型，包括 Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array 和 Float64Array。每种类型都对应着不同的数据类型，比如 Int8Array 对应的是有符号的 8 位整数，Uint8Array 对应的是无符号的 8 位整数，以此类推。
如何使用 ArrayBuffer 和 TypedArray
下面我们将介绍如何使用 ArrayBuffer 和 TypedArray。
创建 ArrayBuffer
创建 ArrayBuffer 的方法很简单，只需要使用 new 关键字即可：
let buffer = new ArrayBuffer(8); // 创建一个长度为 8 字节的 ArrayBuffer
创建 TypedArray
创建 TypedArray 也很简单，只需要将 ArrayBuffer 作为参数传入 TypedArray 的构造函数即可：
// javascriptcn.com 代码示例 let buffer = new ArrayBuffer(8); let int8Array = new Int8Array(buffer); // 创建一个 Int8Array let uint8Array = new Uint8Array(buffer); // 创建一个 Uint8Array let int16Array = new Int16Array(buffer); // 创建一个 Int16Array let uint16Array = new Uint16Array(buffer); // 创建一个 Uint16Array let int32Array = new Int32Array(buffer); // 创建一个 Int32Array let uint32Array = new Uint32Array(buffer); // 创建一个 Uint32Array let float32Array = new Float32Array(buffer); // 创建一个 Float32Array let float64Array = new Float64Array(buffer); // 创建一个 Float64Array
访问 TypedArray 中的元素
访问 TypedArray 中的元素也很简单，只需要使用下标即可：
let buffer = new ArrayBuffer(8); let int8Array = new Int8Array(buffer); int8Array[0] = 1; int8Array[1] = 2; console.log(int8Array[0]); // 输出 1 console.log(int8Array[1]); // 输出 2
将普通数组转换成 TypedArray
有时候我们需要将普通数组转换成 TypedArray，可以使用 TypedArray 的 from() 方法：
let array = [1, 2, 3, 4]; let uint8Array = Uint8Array.from(array); console.log(uint8Array); // 输出 [1, 2, 3, 4]
将 TypedArray 转换成普通数组
有时候我们需要将 TypedArray 转换成普通数组，可以使用 TypedArray 的 slice() 方法：
let uint8Array = new Uint8Array([1, 2, 3, 4]); let array = Array.prototype.slice.call(uint8Array); console.log(array); // 输出 [1, 2, 3, 4]
将字符串转换成 TypedArray
有时候我们需要将字符串转换成 TypedArray，可以使用 TextEncoder 对象：
let encoder = new TextEncoder();
let uint8Array = encoder.encode("hello world");
console.log(uint8Array); // 输出 [104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]将 TypedArray 转换成字符串
有时候我们需要将 TypedArray 转换成字符串，可以使用 TextDecoder 对象：
let decoder = new TextDecoder(); let uint8Array = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]); let str = decoder.decode(uint8Array); console.log(str); // 输出 "hello world"
示例代码
下面是一个完整的示例代码，演示了如何使用 ArrayBuffer 和 TypedArray：
// javascriptcn.com 代码示例
let buffer = new ArrayBuffer(8);
let int8Array = new Int8Array(buffer);
let uint8Array = new Uint8Array(buffer);
let int16Array = new Int16Array(buffer);
let uint16Array = new Uint16Array(buffer);
let int32Array = new Int32Array(buffer);
let uint32Array = new Uint32Array(buffer);
let float32Array = new Float32Array(buffer);
let float64Array = new Float64Array(buffer);
int8Array[0] = 1;
int8Array[1] = 2;
console.log(int8Array[0]); // 输出 1
console.log(int8Array[1]); // 输出 2
let array = [1, 2, 3, 4];
let uint8Array2 = Uint8Array.from(array);
console.log(uint8Array2); // 输出 [1, 2, 3, 4]
let uint8Array3 = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]);
let array2 = Array.prototype.slice.call(uint8Array3);
console.log(array2); // 输出 [104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
let encoder = new TextEncoder();
let uint8Array4 = encoder.encode("hello world");
console.log(uint8Array4); // 输出 [104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
let decoder = new TextDecoder();
let uint8Array5 = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]);
let str = decoder.decode(uint8Array5);
console.log(str); // 输出 "hello world"总结
本文介绍了如何使用 ES10 中的 ArrayBuffer 和 TypedArray 来处理二进制数据。ArrayBuffer 是一种新的数据类型，可以用来存储二进制数据，而 TypedArray 则是一种特殊的数组，可以访问 ArrayBuffer 中的数据。通过本文的介绍，相信读者已经掌握了如何使用这两个新特性来处理二进制数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65090a0995b1f8cacd3d416c