什么是 ArrayBuffer？

ArrayBuffer 是 JavaScript 中用于表示原始二进制数据缓冲区的对象。 它是一个固定长度的内存区域，可以用来存储各种类型的数据。 与 JavaScript 数组不同，ArrayBuffer 不能直接读取或写入数据。 它只是一个字节容器。

ArrayBuffer 的特点：

• 固定长度： 创建后长度不可变。
• 原始二进制数据： 存储的是字节数据，没有特定的数据类型。
• 不可直接访问： 需要通过 TypedArray 或 DataView 来访问和操作数据。

如何创建 ArrayBuffer？

// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);

console.log(buffer.byteLength); // 输出: 16

TypedArray：赋予 ArrayBuffer 数据类型

TypedArray 是一组用于操作 ArrayBuffer 的类型化数组。 它们允许你以特定的数据类型（例如：整数、浮点数）来读取和写入 ArrayBuffer 中的数据。

常见的 TypedArray 类型包括：

• Int8Array: 8 位有符号整数
• Uint8Array: 8 位无符号整数
• Int16Array: 16 位有符号整数
• Uint16Array: 16 位无符号整数
• Int32Array: 32 位有符号整数
• Uint32Array: 32 位无符号整数
• Float32Array: 32 位浮点数
• Float64Array: 64 位浮点数

示例：使用 Uint8Array 操作 ArrayBuffer

// 创建一个 8 字节的 ArrayBuffer
const buffer = new ArrayBuffer(8);

// 创建一个 Uint8Array 视图，指向 ArrayBuffer
const uint8Array = new Uint8Array(buffer);

// 设置 ArrayBuffer 中的值
uint8Array[0] = 10;
uint8Array[1] = 20;
uint8Array[2] = 30;

console.log(uint8Array); // 输出: Uint8Array(8) [10, 20, 30, 0, 0, 0, 0, 0]
console.log(buffer); // 输出: ArrayBuffer(8) { byteLength: 8 }

DataView：更灵活的数据访问

DataView 提供了更灵活的方式来读取和写入 ArrayBuffer 中的数据。 它可以让你以任意字节偏移量和数据类型来访问数据，而无需像 TypedArray 那样必须从缓冲区的开头开始。

示例：使用 DataView 操作 ArrayBuffer

// 创建一个 8 字节的 ArrayBuffer
const buffer = new ArrayBuffer(8);

// 创建一个 DataView 视图，指向 ArrayBuffer
const dataView = new DataView(buffer);

// 设置 ArrayBuffer 中的值 (以不同的数据类型)
dataView.setInt8(0, 10); // 从偏移量 0 开始，写入一个 8 位有符号整数
dataView.setUint16(1, 256, true); // 从偏移量 1 开始，写入一个 16 位无符号整数 (小端字节序)
dataView.setFloat32(3, 3.14, false); // 从偏移量 3 开始，写入一个 32 位浮点数 (大端字节序)

console.log(dataView.getInt8(0)); // 输出: 10
console.log(dataView.getUint16(1, true)); // 输出: 256
console.log(dataView.getFloat32(3, false)); // 输出: 3.140000104904175

希望这篇文章能够帮助你更好地理解和使用 ArrayBuffer！ 别忘了点赞、评论和分享哦！

什么是模块化？

模块化是将代码分割成独立的、可重用的部分（模块），每个模块负责特定的功能。这样做的好处包括：

• 提高可读性：将复杂的代码分解为小块，使其更易于理解。
• 增强可维护性：修改一个模块不会影响其他模块，降低了出错的概率。
• 促进重用性：可以在不同项目中重用相同的模块，减少重复代码。

Export：导出模块

在JavaScript中，使用export关键字可以将模块中的变量、函数或类导出，以便在其他模块中使用。export有两种主要形式：命名导出和默认导出。

1. 命名导出

命名导出允许你导出多个变量或函数。示例如下：

// math.js
export const PI = 3.14;
export function add(x, y) {
    return x + y;
}

在上面的代码中，我们导出了一个常量PI和一个函数add。在其他模块中，可以通过相同的名称导入这些导出：

// app.js
import { PI, add } from './math.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

2. 默认导出

默认导出允许你导出一个单一的值或对象。示例如下：

// calculator.js
export default function multiply(x, y) {
    return x * y;
}

在其他模块中，你可以使用任意名称导入默认导出：

// app.js
import multiply from './calculator.js';

console.log(multiply(2, 3)); // 6

Import：导入模块

使用import关键字可以引入其他模块的导出。根据导出的类型，import的语法也有所不同。

1. 导入命名导出

import { PI, add } from './math.js';

2. 导入默认导出

import multiply from './calculator.js';

3. 导入所有导出

如果你想导入一个模块的所有导出，可以使用* as语法：

import * as math from './math.js';

console.log(math.PI); // 3.14
console.log(math.add(2, 3)); // 5

注意事项：

• 文件扩展名：  在 import 语句中，通常需要指定文件的扩展名（例如 .js）。
• 模块解析：  JavaScript 运行时环境需要能够找到并加载模块。这通常涉及到模块解析算法，它会根据配置的规则查找模块文件。
• ES Modules vs. CommonJS：  import 和 export 是 ES Modules 的语法。CommonJS 使用 require() 和 module.exports。 现代 JavaScript 开发更倾向于使用 ES Modules。