📜  JavaScript 中 TypedArray 对象的用途是什么?(1)

📅  最后修改于: 2023-12-03 15:16:08.995000             🧑  作者: Mango

JavaScript 中 TypedArray 对象的用途

在 JavaScript 中,TypedArray 对象是封装了底层内存的数组对象。它们提供了一种快速、高效的方式来操作二进制数据,比如图片、音频和视频等。这些对象可以被用于处理原始二进制数据和数据缓冲区。

常见的 TypedArray 对象有以下几个:

  • Int8Array
  • Uint8Array
  • Uint8ClampedArray
  • Int16Array
  • Uint16Array
  • Int32Array
  • Uint32Array
  • Float32Array
  • Float64Array

它们都是视图(view)类型对象,即它们的对象内容只是对底层内存的引用,而不是拷贝数据到新对象中,因此,它们提供了一种高效的处理原始二进制数据的方式。

创建 TypedArray

可以使用 [TypedArray].from 方法来创建一个 TypedArray,也可以使用构造函数来创建一个 TypedArray。

以下是以 Uint8Array 为例的创建方式:

// 创建 TypedArray
const typedArrayFrom = Uint8Array.from([1, 2, 3]);
const typedArray = new Uint8Array([1, 2, 3]);

如上述示例,我们分别使用了 Uint8Array.fromnew Uint8Array 来创建了一个 Uint8Array

获取和修改数据

TypedArray 中获取数据通常使用索引,如下例:

// 从 TypedArray 获取数据
const typedArray = new Uint8Array([1, 2, 3]);
console.log(typedArray[0]); // 输出:1

修改 TypedArray 中的数据也是使用索引:

// 修改 TypedArray 中的数据
const typedArray = new Uint8Array([1, 2, 3]);
typedArray[0] = 4;
console.log(typedArray); // 输出:[4, 2, 3]
迭代 TypedArray

可以使用 forEach 方法迭代 TypedArray 中的数据。同样的,也可以使用 for...offor 来迭代:

// 迭代 TypedArray
const typedArray = new Uint8Array([1, 2, 3]);
// 使用 forEach 方法迭代
typedArray.forEach((value, index) => {
  console.log(`value: ${value}, index: ${index}`);
});
// 使用 for...of 迭代
for (const value of typedArray) {
  console.log(value);
}
// 使用 for 循环迭代
for (let i = 0; i < typedArray.length; i++) {
  console.log(typedArray[i]);
}

使用上述方式会输出以下结果:

value: 1, index: 0
value: 2, index: 1
value: 3, index: 2
1
2
3
1
2
3
操作 TypedArray

除上述迭代操作外,还有一些其他操作可以在 TypedArray 上执行。以下是一些较常见的操作。

slice

TypedArray 实例中的 slice 方法会返回一个新的 TypedArray 实例,其内容是原始实例中从指定起始索引开始复制的一段内容。例如:

const typedArray = new Uint8Array([1, 2, 3, 4, 5]);
const slicedTypedArray = typedArray.slice(2, 4); // [3, 4]

上述代码中,我们创建了一个 Uint8Array 并从中复制了一个从索引 2 开始的长度为 2 的片段。结果是一个新的 Uint8Array,其内容为 [3, 4]

subarray

TypedArray 实例中的 subarray 方法返回一个新的 TypedArray 实例,包含原始 TypedArray 中从起始索引到结束索引(但不包括结束索引)的元素。例如:

const typedArray = new Uint8Array([1, 2, 3, 4, 5]);
const subarrayTypedArray = typedArray.subarray(2, 4); // [3, 4]

slice 方法类似,但是该方法会返回原始 TypedArray 的一个视图。结果是一个新的 Uint8Array,其内容为 [3, 4]

set

TypedArray 实例中的 set 方法会从指定的开始位置开始,向 TypedArray 中复制另一个 TypedArray 或是普通数组中的值。例如:

const typedArray1 = new Uint8Array([1, 2, 3]);
const typedArray2 = new Uint8Array([4, 5, 6]);
typedArray1.set(typedArray2, 1);
console.log(typedArray1); // 输出:[1, 4, 5]

上述代码中,我们从索引 1 的位置开始,向 typedArray1 中插入了 typedArray2。结果是一个新的 Uint8Array,其内容为 [1, 4, 5]

sort

TypedArray 实例中的 sort 方法会按照指定的排序方法(默认为升序)排序 TypedArray 或是普通数组。例如:

const typedArray = new Uint8Array([3, 1, 2]);
typedArray.sort();
console.log(typedArray); // 输出:[1, 2, 3]

上述代码中,我们将 Uint8Array 中的元素按照升序排列。结果是一个新的 Uint8Array,其内容为 [1, 2, 3]

总结

在 JavaScript 中,TypedArray 是一种高效的操作二进制数据的方式。通过使用 TypedArray 可以快速地操作处理原始二进制数据和数据缓冲区。TypedArray 是视图类型的对象,它们提供了一种快速、高效的方式来操作二进制数据,通常情况下它们的操作速度比普通数组要快得多。不过,需要注意的是在原 TypedArray 实例上直接进行修改和操作时可能会影响到其他引用了同一个内存区域的实例,因此使用时需要谨慎。