理解 JavaScript 中的 Float32Array：属性与方法全解析

ttod_qzstudio

于 2025-02-17 16:06:33 发布

阅读量933

点赞数 16

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/ttod/article/details/145685111

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

在 JavaScript 的数据处理领域，Float32Array 是一个强大且实用的类型化数组，它专为处理 32 位浮点数数据而设计。在 WebGL 图形编程、音频处理等对数值处理有高性能要求的场景中，Float32Array 发挥着至关重要的作用。接下来，我们将全面介绍 Float32Array 的属性和方法。

Float32Array 的属性

1. `length`：元素数量的标识

length 属性返回 Float32Array 中元素的数量。这个数量在数组创建时就已确定，并且在数组的整个生命周期内保持不变。例如：

const floatArray = new Float32Array([1.1, 2.2, 3.3]);
console.log(floatArray.length); // 输出: 3

2. `BYTES_PER_ELEMENT`：固定的字节大小

BYTES_PER_ELEMENT 表示数组中每个元素所占的字节数。对于 Float32Array 而言，每个元素是一个 32 位浮点数，即 4 个字节，所以该属性的值始终为 4。示例如下：

const floatArray = new Float32Array([1.1, 2.2, 3.3]);
console.log(floatArray.BYTES_PER_ELEMENT); // 输出: 4

3. `buffer`：底层数据存储

buffer 属性返回一个 ArrayBuffer 对象，它是 Float32Array 实际存储数据的底层缓冲区。Float32Array 只是一个视图，用于以 32 位浮点数的形式访问和操作这个缓冲区中的数据。代码示例：

const buffer = new ArrayBuffer(12);
const floatArray = new Float32Array(buffer);
console.log(floatArray.buffer === buffer); // 输出: true

4. `byteLength`：数组字节长度

byteLength 属性返回 Float32Array 所占用的字节长度，其值等于 length 乘以 BYTES_PER_ELEMENT。示例：

const floatArray = new Float32Array([1.1, 2.2, 3.3]);
console.log(floatArray.byteLength); // 输出: 12 (3 * 4)

5. `byteOffset`：字节偏移量

byteOffset 属性返回 Float32Array 在其底层 ArrayBuffer 中的字节偏移量。如果在创建 Float32Array 时指定了偏移量，该属性将返回此偏移量的值；若未指定，默认偏移量为 0。示例：

const buffer = new ArrayBuffer(16);
const floatArray = new Float32Array(buffer, 4); // 从偏移量 4 开始
console.log(floatArray.byteOffset); // 输出: 4

Float32Array 的方法

1. `set(array [, offset])`：数据复制

set 方法用于将另一个数组中的元素复制到当前 Float32Array 中。array 可以是普通数组或其他类型化数组，offset 是可选参数，指定从当前数组的哪个位置开始复制，默认值为 0。示例：

const floatArray1 = new Float32Array(5);
const floatArray2 = new Float32Array([1.1, 2.2, 3.3]);
floatArray1.set(floatArray2, 1);
console.log(floatArray1); // 输出: [0, 1.1, 2.2, 3.3, 0]

2. `subarray(begin [, end])`：数组切片视图

subarray 方法返回一个新的 Float32Array，它是当前数组的一个切片。begin 是切片的起始位置，end 是可选参数，指定切片的结束位置（不包含该位置的元素）。若省略 end，切片将包含从 begin 到数组末尾的所有元素。示例：

const floatArray = new Float32Array([1.1, 2.2, 3.3, 4.4, 5.5]);
const subArray = floatArray.subarray(1, 3);
console.log(subArray); // 输出: [2.2, 3.3]

3. `slice(begin [, end])`：数组切片副本

slice 方法与 subarray 类似，返回一个新的 Float32Array，包含从 begin 到 end（不包含 end）的元素。不同的是，slice 会创建一个新的 ArrayBuffer，而 subarray 只是创建一个新的视图，共享相同的底层 ArrayBuffer。示例：

const floatArray = new Float32Array([1.1, 2.2, 3.3, 4.4, 5.5]);
const slicedArray = floatArray.slice(1, 3);
console.log(slicedArray); // 输出: [2.2, 3.3]

4. 迭代器方法：`entries()`、`keys()` 和 `values()`

entries() 方法返回一个新的迭代器对象，包含数组中每个索引和对应元素的键值对。
keys() 方法返回一个新的迭代器对象，包含数组中每个元素的索引。
values() 方法返回一个新的迭代器对象，包含数组中每个元素的值。

示例代码如下：

const floatArray = new Float32Array([1.1, 2.2, 3.3]);
// entries() 示例
const entryIterator = floatArray.entries();
for (const [index, value] of entryIterator) {
    console.log(index, value);
}
// keys() 示例
const keyIterator = floatArray.keys();
for (const index of keyIterator) {
    console.log(index);
}
// values() 示例
const valueIterator = floatArray.values();
for (const value of valueIterator) {
    console.log(value);
}

5. 遍历与转换方法：`forEach()`、`map()`、`filter()`

forEach(callbackFn [, thisArg])：对数组中的每个元素执行一次提供的回调函数。
map(callbackFn [, thisArg])：创建一个新的 Float32Array，其元素是对当前数组中的每个元素执行回调函数后的结果。
filter(callbackFn [, thisArg])：创建一个新的 Float32Array，包含当前数组中满足回调函数条件的所有元素。

示例代码：

const floatArray = new Float32Array([1.1, 2.2, 3.3]);
// forEach() 示例
floatArray.forEach((value, index) => {
    console.log(`Index ${index}: ${value}`);
});
// map() 示例
const newArray = floatArray.map(value => value * 2);
console.log(newArray);
// filter() 示例
const filteredArray = floatArray.filter(value => value > 2);
console.log(filteredArray);

6. 查找方法：`find()`、`findIndex()`、`includes()`、`indexOf()`、`lastIndexOf()`

这些方法用于在数组中查找元素，各有不同的功能和返回值。例如：

const floatArray = new Float32Array([1.1, 2.2, 3.3]);
// find() 示例
const foundValue = floatArray.find(value => value > 2);
console.log(foundValue);
// findIndex() 示例
const foundIndex = floatArray.findIndex(value => value > 2);
console.log(foundIndex);
// includes() 示例
console.log(floatArray.includes(2.2));
// indexOf() 示例
console.log(floatArray.indexOf(2.2));
// lastIndexOf() 示例
const anotherArray = new Float32Array([1.1, 2.2, 3.3, 2.2]);
console.log(anotherArray.lastIndexOf(2.2));

7. 其他方法：`join()`、`reverse()`、`sort()`、`reduce()`、`reduceRight()`

join(separator)：将数组中的所有元素连接成一个字符串，元素之间用指定的分隔符分隔。
reverse()：反转数组中元素的顺序，会修改原数组。
sort(compareFn)：对数组中的元素进行排序，可通过比较函数指定排序规则。
reduce(callbackFn [, initialValue])：对数组中的每个元素执行一次回调函数，并将结果累积为一个单一的值。
reduceRight(callbackFn [, initialValue])：与 reduce 方法类似，但从数组的最后一个元素开始向前累积。

示例代码：

const floatArray = new Float32Array([1.1, 2.2, 3.3]);
// join() 示例
console.log(floatArray.join('-'));
// reverse() 示例
floatArray.reverse();
console.log(floatArray);
// sort() 示例
const unsortedArray = new Float32Array([3.3, 1.1, 2.2]);
unsortedArray.sort((a, b) => a - b);
console.log(unsortedArray);
// reduce() 示例
const sum = floatArray.reduce((accumulator, value) => accumulator + value, 0);
console.log(sum);
// reduceRight() 示例
const result = floatArray.reduceRight((accumulator, value) => accumulator - value, 0);
console.log(result);

通过对 Float32Array 的属性和方法的深入了解，开发者可以更加高效地处理 32 位浮点数数据，充分发挥 JavaScript 在数值计算和数据处理方面的能力。