JavaScript类型数组详解

发布时间: 2025-03-22 11:53

↑

# JavaScript类型数组详解

本文将深入讲解JavaScript中的类型数组(TypedArray),包括其实现原理、使用场景和最佳实践。

## 类型数组基础

### 1. 类型数组概述

```javascript
class TypedArrayBasics {
  static demonstrate() {
    // 创建类型数组
    const int8Array = new Int8Array(4);              // 8位有符号整数
    const uint8Array = new Uint8Array(4);            // 8位无符号整数
    const uint8ClampedArray = new Uint8ClampedArray(4); // 8位无符号整数(钳位)
    const int16Array = new Int16Array(4);            // 16位有符号整数
    const uint16Array = new Uint16Array(4);          // 16位无符号整数
    const int32Array = new Int32Array(4);            // 32位有符号整数
    const uint32Array = new Uint32Array(4);          // 32位无符号整数
    const float32Array = new Float32Array(4);        // 32位浮点数
    const float64Array = new Float64Array(4);        // 64位浮点数
    const bigInt64Array = new BigInt64Array(4);      // 64位有符号整数
    const bigUint64Array = new BigUint64Array(4);    // 64位无符号整数
    
    // 查看数组信息
    console.log(int8Array.BYTES_PER_ELEMENT);       // 1 (每个元素的字节数)
    console.log(int8Array.byteLength);               // 4 (总字节数)
    console.log(int8Array.length);                   // 4 (元素个数)
  }
}
```

### 2. 创建方式

```javascript
class TypedArrayCreation {
  static demonstrate() {
    // 1. 指定长度
    const arr1 = new Int32Array(3);
    
    // 2. 从数组创建
    const arr2 = new Int32Array([1, 2, 3]);
    
    // 3. 从ArrayBuffer创建
    const buffer = new ArrayBuffer(12);  // 12字节
    const arr3 = new Int32Array(buffer); // 3个32位整数
    
    // 4. 从另一个TypedArray创建
    const arr4 = new Int32Array(arr2);
    
    // 5. 指定视图范围
    const arr5 = new Int32Array(buffer, 4, 2); // 从第4个字节开始,2个元素
  }
}
```

## ArrayBuffer

### 1. ArrayBuffer基础

```javascript
class ArrayBufferBasics {
  static demonstrate() {
    // 创建ArrayBuffer
    const buffer = new ArrayBuffer(16); // 16字节
    
    // 检查大小
    console.log(buffer.byteLength);     // 16
    
    // 创建视图
    const int32View = new Int32Array(buffer);
    const int16View = new Int16Array(buffer);
    const int8View = new Int8Array(buffer);
    
    console.log(int32View.length);      // 4 (16/4)
    console.log(int16View.length);      // 8 (16/2)
    console.log(int8View.length);       // 16 (16/1)
  }
}
```

### 2. DataView

```javascript
class DataViewDemo {
  static demonstrate() {
    const buffer = new ArrayBuffer(16);
    const view = new DataView(buffer);
    
    // 写入数据
    view.setInt32(0, 42, true);        // 写入32位整数,小端序
    view.setInt16(4, 43, false);       // 写入16位整数,大端序
    view.setInt8(6, 44);               // 写入8位整数
    
    // 读取数据
    console.log(view.getInt32(0, true));  // 42
    console.log(view.getInt16(4, false)); // 43
    console.log(view.getInt8(6));         // 44
  }
}
```

## 操作方法

### 1. 数据操作

```javascript
class DataOperations {
  static demonstrate() {
    const arr = new Int32Array(4);
    
    // 设置值
    arr.set([1, 2, 3, 4]);
    console.log(arr);                   // Int32Array [1, 2, 3, 4]
    
    // 子数组
    const subarray = arr.subarray(1, 3);
    console.log(subarray);              // Int32Array [2, 3]
    
    // 复制
    const copy = arr.slice();
    console.log(copy);                  // Int32Array [1, 2, 3, 4]
    
    // 迭代
    arr.forEach((value, index) => {
      console.log(`arr[${index}] = ${value}`);
    });
  }
}
```

### 2. 字节序操作

```javascript
class ByteOrderOperations {
  static demonstrate() {
    const buffer = new ArrayBuffer(4);
    const view = new DataView(buffer);
    
    // 大端序写入
    view.setInt32(0, 0x12345678, false);
    
    // 按字节读取
    const bytes = new Uint8Array(buffer);
    console.log(bytes); // Uint8Array [18, 52, 86, 120]
    
    // 小端序写入
    view.setInt32(0, 0x12345678, true);
    
    // 再次读取
    console.log(new Uint8Array(buffer)); // Uint8Array [120, 86, 52, 18]
  }
}
```

## 应用场景

### 1. 二进制数据处理

```javascript
class BinaryDataProcessing {
  static demonstrate() {
    // 处理文件数据
    async function readFile(file) {
      const buffer = await file.arrayBuffer();
      const view = new DataView(buffer);
      
      // 读取文件头
      const magic = view.getUint32(0, true);
      const version = view.getUint16(4, true);
      const dataSize = view.getUint32(6, true);
      
      // 读取数据部分
      const data = new Uint8Array(buffer, 10, dataSize);
      return { magic, version, data };
    }
    
    // 创建二进制文件
    function createBinaryFile(data) {
      const buffer = new ArrayBuffer(data.length + 10);
      const view = new DataView(buffer);
      
      // 写入文件头
      view.setUint32(0, 0x12345678, true); // magic number
      view.setUint16(4, 1, true);          // version
      view.setUint32(6, data.length, true); // data size
      
      // 写入数据
      new Uint8Array(buffer).set(data, 10);
      return buffer;
    }
  }
}
```

### 2. WebGL应用

```javascript
class WebGLApplication {
  static demonstrate() {
    // 创建顶点数据
    const vertices = new Float32Array([
      -1.0, -1.0,  1.0,  // v0
       1.0, -1.0,  1.0,  // v1
       1.0,  1.0,  1.0,  // v2
      -1.0,  1.0,  1.0   // v3
    ]);
    
    // 创建颜色数据
    const colors = new Uint8Array([
      255, 0, 0, 255,    // v0
      0, 255, 0, 255,    // v1
      0, 0, 255, 255,    // v2
      255, 255, 0, 255   // v3
    ]);
    
    // WebGL缓冲区操作
    function initBuffers(gl) {
      // 顶点缓冲区
      const vertexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      
      // 颜色缓冲区
      const colorBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
      
      return { vertexBuffer, colorBuffer };
    }
  }
}
```

## 性能优化

### 1. 内存管理

```javascript
class MemoryManagement {
  static demonstrate() {
    // 重用ArrayBuffer
    class AudioProcessor {
      constructor(bufferSize) {
        this.buffer = new ArrayBuffer(bufferSize);
        this.float32Array = new Float32Array(this.buffer);
        this.int16Array = new Int16Array(this.buffer);
      }
      
      processAudio(data) {
        // 使用Float32Array处理音频数据
        this.float32Array.set(data);
        
        // 处理逻辑...
        
        // 转换为Int16格式输出
        return this.int16Array;
      }
    }
    
    // 内存池
    class BufferPool {
      constructor(bufferSize, poolSize) {
        this.pool = Array(poolSize).fill(null)
          .map(() => new ArrayBuffer(bufferSize));
        this.available = [...this.pool];
      }
      
      acquire() {
        return this.available.pop() || new ArrayBuffer(this.bufferSize);
      }
      
      release(buffer) {
        if (this.pool.includes(buffer)) {
          this.available.push(buffer);
        }
      }
    }
  }
}
```

### 2. 数据传输优化

```javascript
class DataTransferOptimization {
  static demonstrate() {
    // Web Worker数据传输
    function createWorker() {
      const worker = new Worker('worker.js');
      
      // 传输ArrayBuffer所有权
      const buffer = new ArrayBuffer(1024);
      worker.postMessage(buffer, [buffer]);
      
      // 共享内存
      const sharedBuffer = new SharedArrayBuffer(1024);
      const sharedArray = new Int32Array(sharedBuffer);
      worker.postMessage({ sharedArray });
    }
    
    // 网络传输优化
    async function fetchBinaryData() {
      const response = await fetch('data.bin');
      const buffer = await response.arrayBuffer();
      
      // 直接使用ArrayBuffer
      const view = new DataView(buffer);
      // 处理数据...
      
      // 或转换为适当的TypedArray
      const int32Array = new Int32Array(buffer);
      // 处理数据...
    }
  }
}
```

## 最佳实践

### 1. 类型选择

```javascript
class TypeSelection {
  static demonstrate() {
    // 1. 根据数据范围选择类型
    function selectIntegerType(min, max) {
      if (min >= 0) {
        if (max <= 255) return Uint8Array;
        if (max <= 65535) return Uint16Array;
        if (max <= 4294967295) return Uint32Array;
        return BigUint64Array;
      } else {
        if (min >= -128 && max <= 127) return Int8Array;
        if (min >= -32768 && max <= 32767) return Int16Array;
        if (min >= -2147483648 && max <= 2147483647) return Int32Array;
        return BigInt64Array;
      }
    }
    
    // 2. 根据精度要求选择类型
    function selectFloatType(precision) {
      return precision <= 7 ? Float32Array : Float64Array;
    }
  }
}
```

### 2. 错误处理

```javascript
class ErrorHandling {
  static demonstrate() {
    class TypedArrayWrapper {
      constructor(type, length) {
        try {
          this.array = new type(length);
        } catch(e) {
          if (e instanceof RangeError) {
            throw new Error('内存分配失败: ' + e.message);
          }
          throw e;
        }
      }
      
      set(index, value) {
        if (index < 0 || index >= this.array.length) {
          throw new RangeError('索引越界');
        }
        this.array[index] = value;
      }
      
      get(index) {
        if (index < 0 || index >= this.array.length) {
          throw new RangeError('索引越界');
        }
        return this.array[index];
      }
    }
  }
}
```

## 总结

类型数组的主要特性包括:

1. 固定类型
   - 每个元素都是相同的数据类型
   - 支持多种数值类型
   - 内存布局连续

2. ArrayBuffer
   - 表示原始二进制数据
   - 可以创建多个视图
   - 支持字节序操作

3. 应用场景
   - 二进制数据处理
   - WebGL应用
   - 音频处理
   - 网

元素码农