从0开始学习JavaScript--深入探究JavaScript类型化数组

JavaScript类型化数组是一种特殊的数组类型，引入了对二进制数据的更底层的操作。这种数组提供了对内存中的二进制数据直接进行读写的能力，为处理图形、音频、视频等大规模数据提供了高效的手段。本文将深入探讨JavaScript类型化数组的基本概念、常见类型、操作方法以及实际应用，通过丰富的示例代码，帮助大家更全面地理解和应用这一强大的特性。

1.基本概念

JavaScript类型化数组是一种特殊的数组对象，用于处理二进制数据。它通过使用底层的ArrayBuffer对象来分配内存，并通过视图（TypedArray）来解释这些内存。常见的TypedArray类型包括Int8Array、Uint8Array、Int16Array、Uint16Array等，每种类型占据不同的字节长度。

// 示例：创建和使用TypedArray
let buffer = new ArrayBuffer(8); // 分配一个包含8字节的内存
let intArray = new Int32Array(buffer); // 使用Int32Array视图解释这段内存intArray[0] = 42;
console.log(intArray[0]); // 输出：42

在这个例子中，首先创建了一个包含8字节内存的ArrayBuffer，然后通过Int32Array视图来解释这段内存，并将值42存储在该内存中。

2. TypedArray 类型

TypedArray 提供了多种不同的数据类型，每种类型都有其特定的用途。以下是一些常见的TypedArray类型：

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

// 示例：不同类型的TypedArray
let intArray = new Int32Array(4); // 32位整数数组
let floatArray = new Float32Array(4); // 32位浮点数数组intArray[0] = 42;
floatArray[0] = 3.14;console.log(intArray[0]); // 输出：42
console.log(floatArray[0]); // 输出：3.14

在这个例子中，创建了一个32位整数数组和一个32位浮点数数组，分别存储了整数和浮点数。

3. 操作和方法

TypedArray提供了丰富的方法来进行数据操作，包括读写、复制、切片等操作。以下是一些常见的方法：

读写操作：通过索引直接读写TypedArray中的元素。

let intArray = new Int32Array(4);
intArray[0] = 42;
console.log(intArray[0]); // 输出：42

复制和切片：使用.slice()方法创建TypedArray的子集，或者通过.set()方法复制另一个TypedArray的值。

let sourceArray = new Int32Array([1, 2, 3, 4]);
let subArray = sourceArray.slice(1, 3); // 切片，包含索引1和2的元素
let targetArray = new Int32Array(2);
targetArray.set(subArray); // 复制sourceArray的部分到targetArrayconsole.log(subArray); // 输出：[2, 3]
console.log(targetArray); // 输出：[2, 3]

迭代：使用for...of语句遍历TypedArray中的元素。

let intArray = new Int32Array([1, 2, 3, 4]);for (let value of intArray) {console.log(value); // 依次输出：1, 2, 3, 4
}

数组转换：可以通过Array.from()将TypedArray转换为普通数组。

let intArray = new Int32Array([1, 2, 3, 4]);
let normalArray = Array.from(intArray);console.log(normalArray); // 输出：[1, 2, 3, 4]

4. 实际应用场景

TypedArray在处理大规模二进制数据时特别有用，例如在图像处理、音频处理、网络传输等领域。以下是一个简单的例子，演示了如何使用TypedArray进行图像处理：

// 示例：使用TypedArray进行图像处理
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");// 画一张图像
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 2, 2);// 获取图像数据
let imageData = ctx.getImageData(0, 0, 2, 2);
let pixelArray = new Uint8Array(imageData.data);// 将红色改为蓝色
for (let i = 0; i < pixelArray.length; i += 4) {// RGBA格式，每个像素4个字节，依次是红、绿、蓝、透明度pixelArray[i + 2] = 255; // 将红色通道的值设为255，即变为蓝色
}// 将修改后的数据写回图像
ctx.putImageData(new ImageData(pixelArray, 2, 2), 0, 0);