JavaScript - TypedArray 对象
你好，未来的编程巨星们！? 今天，我们将踏上一段激动人心的旅程，探索 JavaScript 中的 TypedArrays。如果你是编程新手，不用担心——我会成为你的友好向导，我们会一步步来。所以，拿起你最喜欢的饮料，舒服地坐好，让我们开始吧！
什么是 TypedArray？
想象你在组织一个大派对（因为谁不喜欢一个好的派对呢？）。你需要跟踪你有多少杯子、盘子和餐具。这就是 JavaScript 中的 TypedArray 做的事情——它帮助我们高效地组织和存储特定类型的数据。
TypedArray 是 JavaScript 中的一种特殊数组，只能包含特定类型的数字。这就像为你的叉子、勺子和刀子分别准备不同的盒子，而不是把它们全部扔进一个大抽屉。
// 创建一个包含 8 位整数的 TypedArray
const myArray = new Int8Array(5);
console.log(myArray); // 输出: Int8Array(5) [0, 0, 0, 0, 0]在这个例子中，我们创建了一个可以容纳五个 8 位整数的 TypedArray。这就像设置了五个小盒子，每个盒子都能容纳一个介于 -128 和 127 之间的数字。
为什么使用 TypedArray？
你可能会想，“我们已经有普通数组了，为什么还要麻烦用 TypedArrays？”问得好！TypedArrays 有一些超级能力，使它们在特定情况下非常完美：
- 速度：它们在数值操作上更快。
- 内存效率：它们使用固定数量的内存。
- 兼容性：它们与二进制数据和其他语言配合得很好。
这就好比使用一种专用工具而不是瑞士军刀——有时，你需要那个完美的匹配！
TypedArray 对象
JavaScript 提供了多种类型的 TypedArrays，每种都设计用于不同的数字类型和大小。让我们用一张整齐的表格来看一下：
| TypedArray | 描述 | 范围 |
|---|---|---|
| Int8Array | 8位有符号整数 | -128 到 127 |
| Uint8Array | 8位无符号整数 | 0 到 255 |
| Int16Array | 16位有符号整数 | -32,768 到 32,767 |
| Uint16Array | 16位无符号整数 | 0 到 65,535 |
| Int32Array | 32位有符号整数 | -2,147,483,648 到 2,147,483,647 |
| Uint32Array | 32位无符号整数 | 0 到 4,294,967,295 |
| Float32Array | 32位浮点数 | 约1.2E-38 到 约3.4E+38 |
| Float64Array | 64位浮点数 | 约5.0E-324 到 约1.8E+308 |
哇，这真是一长串！如果这看起来令人不知所措，别担心——我们会用例子来让这一切都清晰起来。
TypedArray 属性
TypedArrays附带一些方便的属性。让我们来探索它们：
1. length
这告诉我们我们的 TypedArray 中有多少个元素。
const myArray = new Int16Array(3);
console.log(myArray.length); // 输出: 32. BYTES_PER_ELEMENT
这个属性告诉我们数组中的每个元素占据多少字节。
console.log(Int8Array.BYTES_PER_ELEMENT); // 输出: 1
console.log(Int16Array.BYTES_PER_ELEMENT); // 输出: 2这就好比知道我们的存储系统中每个盒子有多大！
TypedArray 静态方法
TypedArrays附带一些我们可以不创建实例就使用的方法。让我们来看两个：
1. TypedArray.from()
这个方法从一个类数组对象创建一个新的 TypedArray。
const regularArray = [1, 2, 3, 4];
const typedArray = Int8Array.from(regularArray);
console.log(typedArray); // 输出: Int8Array(4) [1, 2, 3, 4]这就好比把我们的混合餐具抽屉转换成整齐的盒子！
2. TypedArray.of()
这个方法创建一个新的 TypedArray，带有可变数量的参数。
const myArray = Int16Array.of(1, 2, 3, 4, 5);
console.log(myArray); // 输出: Int16Array(5) [1, 2, 3, 4, 5]这就好比说，“这里有物品，请为我组织它们！”
TypedArray 实例方法
现在，让我们看看我们可以在我们的 TypedArray 实例上使用的一些方法：
1. set()
这个方法允许我们将值复制到我们的 TypedArray 中。
const myArray = new Int8Array(5);
myArray.set([1, 2, 3]);
console.log(myArray); // 输出: Int8Array(5) [1, 2, 3, 0, 0]这就好比把物品放到我们组织好的盒子里。
2. subarray()
这个方法返回一个新的 TypedArray，它是原始数组的一部分。
const originalArray = new Int8Array([1, 2, 3, 4, 5]);
const subArray = originalArray.subarray(1, 4);
console.log(subArray); // 输出: Int8Array(3) [2, 3, 4]这就好比从我们的存储系统中取出几个盒子用于特定任务。
示例
让我们把这些知识结合起来，用一些实际的示例！
示例 1：创建和修改一个 TypedArray
// 创建一个包含 8 位无符号整数的 TypedArray
const pixelData = new Uint8Array(4);
// 设置一个像素的 RGB 值（红色: 255，绿色: 128，蓝色: 64，透明度: 255）
pixelData[0] = 255; // 红色
pixelData[1] = 128; // 绿色
pixelData[2] = 64; // 蓝色
pixelData[3] = 255; // 透明度（完全不透明）
console.log(pixelData); // 输出: Uint8Array(4) [255, 128, 64, 255]在这个示例中，我们使用 Uint8Array 来表示一个像素的颜色值。每个值都在 0 到 255 之间，非常适合 8 位无符号整数！
示例 2：使用 TypedArrays 提高性能
const size = 1000000;
// 使用普通数组
console.time('Regular Array');
const regularArray = new Array(size);
for (let i = 0; i < size; i++) {
regularArray[i] = i;
}
console.timeEnd('Regular Array');
// 使用 TypedArray
console.time('TypedArray');
const typedArray = new Int32Array(size);
for (let i = 0; i < size; i++) {
typedArray[i] = i;
}
console.timeEnd('TypedArray');运行这段代码，你可能会发现 TypedArray 更快！这就好比有一个组织良好的存储系统，而不是把所有东西扔进一个大堆。
就这样，朋友们！我们已经穿越了 TypedArrays 的领域，从理解它们是什么到看到它们在实际中的应用。记住，熟能生巧，所以不要害怕尝试这些概念。
在你意识到之前，你将变成 TypedArray 的魔法师，优化你的代码，并给你的开发伙伴留下深刻印象。下次见，快乐编码！?????
Credits: Image by storyset