ES10 中的 ArrayBuffer 和 TypedArray 对象-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常要处理二进制数据。ES6 中引入的 ArrayBuffer 和 TypedArray 对象为我们提供了更方便的操作方法。而在 ES10 中，这两个对象都得到了进一步的增强。

ArrayBuffer

ArrayBuffer 是一种用于在内存中储存二进制数据的缓存区。它的长度在创建时确定，之后就不能够改变。我们可以使用以下语法创建一个 ArrayBuffer：

const buffer = new ArrayBuffer(length);

其中 length 表示缓存区的长度，单位为字节（Byte）。创建之后，我们可以通过以下方法获取缓存区的长度：

const len = buffer.byteLength;
console.log(len); // 输出缓存区长度

TypedArray

TypedArray 是一种视图对象，可以从 ArrayBuffer 对象上面读写多种数值类型。在创建 TypedArray 时，我们需要指定数据类型、偏移量和元素个数：

const arr = new TypedArray(buffer, byteOffset, length);

其中 buffer 表示要读写的 ArrayBuffer 对象，byteOffset 表示偏移量（单位是字节），length 表示元素个数。这里的元素是我们设置的数值类型，比如 Int8Array 表示每个元素都是一个 8 位带符号整数。

常见的 TypedArray 包括：

Int8Array：8 位带符号整数
Uint8Array：8 位无符号整数
Int16Array：16 位带符号整数
Uint16Array：16 位无符号整数
Int32Array：32 位带符号整数
Uint32Array：32 位无符号整数
Float32Array：32 位浮点数
Float64Array：64 位浮点数

ES10 的 ArrayBuffer 和 TypedArray

在 ES10 中，ArrayBuffer 和 TypedArray 都得到了一些增强。

1. SharedArrayBuffer 和 Atomics

ES10 引入了 SharedArrayBuffer 和 Atomics 用于构建多线程应用。SharedArrayBuffer 是一种共享内存缓冲区，多个线程可以同时读写它。Atomics 可以确保多个线程在读写同一个 SharedArrayBuffer 时，能够保证同步和互斥。

SharedArrayBuffer 的使用方法和 ArrayBuffer 类似：

const sab = new SharedArrayBuffer(length);

Atomics 可以用于实现基本的原子操作，如获取/设置值、增加/减少值等：

// 获取索引 0 对应的值
const val = Atomics.load(arr, 0);

// 设置索引 0 的值为 1，并返回之前的值
const oldVal = Atomics.exchange(arr, 0, 1);

// 增加索引 0 的值，返回之前的值
const oldVal = Atomics.add(arr, 0, 1);

2. TypedArray.from 和 TypedArray.of

ES10 中，我们可以通过 TypedArray.from 方法，将任意可迭代对象转换为 TypedArray：

const arr = TypedArray.from(iterable);

另外，我们也可以使用 TypedArray.of 方法，将一组数值转换为 TypedArray：

const arr = TypedArray.of(1, 2, 3);

3. TypedArray.prototype.filter

ES10 中，TypedArray.prototype.filter 方法可以用于过滤 TypedArray 中的元素：

const arr = new Int32Array([1, 2, 3, 4, 5]);
const even = arr.filter(n => n % 2 === 0);

console.log(even); // 输出: Int32Array [ 2, 4 ]

4. TypedArray.prototype.reduce

ES10 中，TypedArray.prototype.reduce 方法可以用于对 TypedArray 中的元素进行累加、求平均数等操作：

const arr = new Uint8Array([1, 2, 3, 4, 5]);
const sum = arr.reduce((acc, cur) => acc + cur);

console.log(sum); // 输出: 15

示例代码

下面是一个简单的例子，演示了如何使用 ArrayBuffer 和 TypedArray 对象读写二进制数据：

// javascriptcn.com 代码示例
// 创建一个包含整数和浮点数的 ArrayBuffer
const buffer = new ArrayBuffer(16);
const intView = new Int32Array(buffer);
const floatView = new Float32Array(buffer);

// 对Int32Array进行赋值
intView[0] = 42;
intView[1] = -42;

// 输出Int32Array中的两个整数
console.log(intView[0]);
console.log(intView[1]);

// 输出Float32Array中的两个数，应该是42和-0.0
console.log(floatView[0]);
console.log(floatView[1]);

以上代码输出结果如下：

总结

ES10 中的 ArrayBuffer 和 TypedArray 对象为我们提供了处理二进制数据的便利工具。特别是在多线程应用中，SharedArrayBuffer 和 Atomics 的引入使得我们可以更方便地实现同步和互斥的操作。我们可以通过学习和使用这些 API，为我们的前端开发工作带来更多的便利和效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653df52d7d4982a6eb7915c6