从0开始学习JavaScript--JavaScript类型化数组进阶

news2024/9/25 23:14:20

前面的文章，已经介绍了JavaScript类型化数组的基本概念、常见类型和基本操作。在本文中，我们将深入探讨类型化数组的一些进阶特性，包括共享内存、大端小端字节序、以及类型化数组与普通数组之间的转换，通过更丰富的示例代码，帮助大家更好地理解和应用这些高级功能。

1. 共享内存

类型化数组可以通过共享内存的方式，实现不同TypedArray之间的数据共享。这种共享内存的方式能够在不拷贝底层二进制数据的情况下，让不同的TypedArray共享相同的数据。

// 示例：共享内存
let buffer = new ArrayBuffer(16); // 创建一个包含16字节的内存

// 创建两个视图，共享同一块内存
let intArray = new Int32Array(buffer);
let uintArray = new Uint8Array(buffer);

intArray[0] = 42;
uintArray[4] = 255;

console.log(intArray[0]); // 输出：42
console.log(uintArray[4]); // 输出：255

在这个例子中，创建了一个包含16字节的ArrayBuffer，然后通过Int32Array和Uint8Array两个视图，分别以32位整数和8位无符号整数的方式解释这段内存。通过共享同一块内存，它们可以互相影响。

2. 大端小端字节序

在计算机中，多字节数据的存储顺序有两种：大端字节序（Big Endian）和小端字节序（Little Endian）。大端字节序是将高位字节存储在低地址，小端字节序则相反。在处理二进制数据时，了解字节序很重要，因为不同平台可能使用不同的字节序。

// 示例：大端小端字节序
let buffer = new ArrayBuffer(4); // 创建一个包含4字节的内存

// 创建两个视图，一个使用大端字节序，一个使用小端字节序
let viewBigEndian = new DataView(buffer);
let viewLittleEndian = new DataView(buffer);

viewBigEndian.setInt32(0, 42, false); // 使用大端字节序存储32位整数
viewLittleEndian.setInt32(0, 42, true); // 使用小端字节序存储32位整数

console.log(viewBigEndian.getInt32(0, false)); // 输出：42
console.log(viewLittleEndian.getInt32(0, true)); // 输出：42

在这个例子中，创建了一个包含4字节的ArrayBuffer，并使用DataView创建了两个视图，一个使用大端字节序，一个使用小端字节序。通过设置不同的字节序进行存储和读取，我们可以看到相同的值在不同的字节序下的表示。

3. TypedArray与普通数组转换

TypedArray与普通数组之间可以相互转换，这在一些场景下很有用。TypedArray提供了from()和of()方法，使得转换更为方便。

// 示例：TypedArray与普通数组转换
let normalArray = [1, 2, 3, 4];

// 从普通数组创建TypedArray
let intArray = Int32Array.from(normalArray);
let floatArray = Float32Array.from(normalArray);

console.log(intArray); // 输出：Int32Array [1, 2, 3, 4]
console.log(floatArray); // 输出：Float32Array [1, 2, 3, 4]

// 将TypedArray转换为普通数组
let backToNormalArray1 = Array.from(intArray);
let backToNormalArray2 = Array.of(...floatArray);

console.log(backToNormalArray1); // 输出：[1, 2, 3, 4]
console.log(backToNormalArray2); // 输出：[1, 2, 3, 4]

在这个例子中，使用from()方法从普通数组创建了两个TypedArray，然后使用Array.from()和Array.of()方法将TypedArray转换为普通数组。

4. 实际应用场景

共享内存和字节序的处理在一些高性能计算和网络通信的场景中非常有用。在处理复杂数据结构时，共享内存能够避免不必要的内存拷贝，提高性能。而在进行跨平台数据交互时，了解和处理字节序能够确保数据的正确解释。

// 示例：实际应用场景 - 简单的网络通信
let socket = new WebSocket("wss://example.com");

socket.addEventListener("message", (event) => {
  let data = new Uint8Array(event.data); // 接收到的数据以Uint8Array的形式解释
  // 处理接收到的数据...
});

let sendData = new Uint32Array([42, 87, 123]);
socket.send(sendData.buffer); // 发送数据，使用共享内存