JavaScript TypedArray slice() 方法

什么是 JavaScript 中的 TypedArray？

在我们了解 slice() 方法之前，让我们先快速定义一下 TypedArray 这个术语。

JavaScript 通常使用灵活的数组，这些数组可以包含任何内容，如数字、字符串、对象等，但在处理二进制数据、图像、文件数据或 WebGL 时，我们需要固定类型的原始二进制数据数组。这就是 TypedArrays 的用武之地。

TypedArrays 的例子包括

• Int8Array：8 位有符号整数
• Uint8Array：8 位无符号整数
• Float32Array：32 位浮点数

TypedArray 中的 slice() 方法是什么？

TypedArray (Int8Array, Uint8Array, Float32Array 等) 的 slice() 方法将数组的一部分复制到一个新的 TypedArray 中，并且不会改变原始数组。

它与您在常规 JavaScript 数组 中已经熟悉的 slice() 方法 极其相似。

总而言之，

• 它提取 TypedArray 的一部分。
• 它返回一个具有相同类型的新 TypedArray。
• 原始 TypedArray 保持不变。

语法

• begin： 开始切片的索引（包含）。如果省略，则默认为 0。
• end： 停止切片的索引（不包含）。如果省略，则切片到数组末尾。
• 返回值： 返回一个新数组，其中包含数组的选定部分。

slice() 在 TypedArray 上如何工作？

slice() 方法从 TypedArray 中复制指定元素，并返回一个具有相同类型和选定元素的新 TypedArray。

slice() 方法在 TypedArray 上的工作方式如下：

• 分配新的内存空间来创建一个新的 TypedArray。
• 从起始索引开始，从原始 TypedArray 复制值。
• 在到达结束索引之前停止复制。
• 返回一个包含复制值的新 TypedArray。
• 原始 TypedArray 未被修改。

输出

Int16Array [ 200, 300, 400 ]

说明

• 从索引 1（值为 200）开始。
• 在索引 4（值为 500）之前停止。
• 复制的值：200、300、400 到一个新的 Int16Array 中。

TypedArrays 上 slice() 的示例

示例1：基本用法

输出

Int16Array [ 20, 30, 40 ]
Int16Array [ 10, 20, 30, 40, 50 ]

说明

• 我们从索引 1 开始切片，在索引 4 之前结束。
• 所以它选择了 20、30 和 40。

示例 2：省略 end

输出

Uint8Array [ 4, 5, 6 ]

说明

如果未提供 end，则切片直到末尾。

示例 3：使用负索引

就像数组一样，slice() 接受负索引。

输出

Float32Array [ 4.5, 6.5 ]

说明

• -3 从末尾开始计数（倒数第三个）。
• -1 在最后一个元素之前停止。

为什么要对 TypedArrays 使用 slice()？

TypedArrays（包括 Uint8Array、Int16Array、Float32Array 等）是在 JavaScript 中处理二进制数据的方式。您可以使用 TypedArrays 读取文件、图像、音频或来自 WebSockets 和 WebGL 的数据缓冲区。

使用 slice() 可以更方便地处理 TypedArrays，因为您可以：

1. 将部分数据放入另一个 TypedArray 中

想象一下，您有一个庞大的数据缓冲区，可能是 Float32Array 中的一段声音片段，包含数千个样本，而您只对处理一小部分数据感兴趣。

现在您有了一个新的 TypedArray，其中只包含该部分数据。

2. 保持原始数据完好无损

slice() 不会更改原始 TypedArray，它会创建一个新的。

因此，您可以进行切片、修改，或者对新切片进行切片和丢弃，而不会有潜在损坏原始数据的风险。

3. 轻松复制数据

slice() 是复制任何 TypedArray 的简单方法。

现在 copy 是一个具有相同数据的新 TypedArray。

4. 轻松处理协议和数据块

• 网络（WebSockets、蓝牙等）数据包是大型二进制有效载荷数据包，您需要从中提取头部、主体、校验和等。
• 您可以使用 slice() 轻松提取任何内容。

5. 使图形和音频处理更加容易

当处理以下内容时：

• WebGL 缓冲区
• Canvas 图像数据
• 音频流
• 机器学习张量

通常只处理数据的一部分。slice() 方法提供了一种有效且简洁的方式来获取所需的部分。

结论

JavaScript TypedArrays 中的 slice() 方法是获取特定数据部分并创建新的 TypedArray 进行处理，同时保持原始数据不变的绝佳方式。您可以将 slice() 用于图像、音频、文件或原始二进制数据。它非常易于使用，如果您想获取所需的数据部分，slice() 是一个很好的工具。

它类似于标准数组的 slice() 方法，但对于 Uint8Array、Float32Array、Int16Array 等 TypedArrays 非常易于使用。

总而言之，如果您想安全、恰当地操作二进制数据的部分，那么 slice() 是您 TypedArrays 工具箱中必备的工具。

常见问题解答 (FAQs)

1. 什么是 TypedArray 中的 slice()？

slice() 是一个方法，它允许您将 TypedArray（如 Uint8Array、Float32Array 等）的一部分复制到一个新的 TypedArray 中，而不会改变原始数组。

2. slice() 会改变原始 TypedArray 吗？

不会。原始 TypedArray 保持不变，因为 slice() 方法只返回所选部分的新副本。

3. slice(start, end) 的含义是什么？

它的意思是

• 从索引 start（包含）开始复制
• 在索引 end（不包含）之前停止

如果未给出 end，则切片到 TypedArray 的末尾。

4. 我可以在 slice() 中使用负值吗？

是的，就像常规数组一样，您可以使用负值从 Typed Array 的末尾开始计数。

示例

这会从倒数第 3 个元素切片到倒数第 2 个元素。

5. slice() 返回什么类型的数组？

它返回一个相同类型的新 TypedArray。例如，如果您对 Uint8Array 进行切片，您将得到另一个 Uint8Array。

6. 我可以使用 slice() 复制整个 TypedArray 吗？

是的，您可以不带任何参数调用它

这会得到原始数组的完整副本。

7. slice() 和 subarray() 有什么区别？

• slice() 返回一个带有复制数据的新 TypedArray。
• subarray() 返回对同一底层内存缓冲区的视图。如果您更改 subarray，原始 TypedArray 也会更改。