巧用 JavaScript 二进制操作，解决浏览器数据处理难题

2023-11-10 01:45:15

JavaScript 的二进制操作

在浏览器中处理二进制数据，需要使用 Typed Array、ArrayBuffer、DataView。

Typed Array（类型数组）：它和普通的数组很像，只不过里面的成员类型是严格要求，并且长度固定的。常用的类型包括 Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array 和 Float64Array。
ArrayBuffer：它是二进制数据的缓冲区，它不提供任何操作方法，只是单纯的内存块。
DataView：它允许您以不同格式（如二进制补码整数、浮点数等）读取和写入 ArrayBuffer 中的数据。

1. 使用 Typed Array 处理二进制数据

Typed Array 可以直接创建，也可以通过 ArrayBuffer 创建。

// 直接创建 Typed Array
const int8Array = new Int8Array(10);

// 通过 ArrayBuffer 创建 Typed Array
const arrayBuffer = new ArrayBuffer(10);
const int8Array2 = new Int8Array(arrayBuffer);

Typed Array 提供了多种方法来操作数据，包括：

set()：将数据复制到 Typed Array 中。
get()：从 Typed Array 中读取数据。
slice()：从 Typed Array 中截取一段数据。
fill()：用某个值填充 Typed Array。

2. 使用 ArrayBuffer 处理二进制数据

ArrayBuffer 可以直接创建，也可以通过 DataView 创建。

// 直接创建 ArrayBuffer
const arrayBuffer = new ArrayBuffer(10);

// 通过 DataView 创建 ArrayBuffer
const dataView = new DataView(arrayBuffer);

ArrayBuffer 提供了多种方法来操作数据，包括：

byteLength：返回 ArrayBuffer 的长度（以字节为单位）。
slice()：从 ArrayBuffer 中截取一段数据。

3. 使用 DataView 处理二进制数据

DataView 可以直接创建，也可以通过 ArrayBuffer 创建。

// 直接创建 DataView
const dataView = new DataView(arrayBuffer);

// 通过 ArrayBuffer 创建 DataView
const arrayBuffer = new ArrayBuffer(10);
const dataView2 = new DataView(arrayBuffer);

DataView 提供了多种方法来操作数据，包括：

getInt8()：从 DataView 中读取一个 8 位有符号整数。
getUint8()：从 DataView 中读取一个 8 位无符号整数。
getInt16()：从 DataView 中读取一个 16 位有符号整数。
getUint16()：从 DataView 中读取一个 16 位无符号整数。
getInt32()：从 DataView 中读取一个 32 位有符号整数。
getUint32()：从 DataView 中读取一个 32 位无符号整数。
getFloat32()：从 DataView 中读取一个 32 位浮点数。
getFloat64()：从 DataView 中读取一个 64 位浮点数。
setInt8()：将一个 8 位有符号整数写入 DataView。
setUint8()：将一个 8 位无符号整数写入 DataView。
setInt16()：将一个 16 位有符号整数写入 DataView。
setUint16()：将一个 16 位无符号整数写入 DataView。
setInt32()：将一个 32 位有符号整数写入 DataView。
setUint32()：将一个 32 位无符号整数写入 DataView。
setFloat32()：将一个 32 位浮点数写入 DataView。
setFloat64()：将一个 64 位浮点数写入 DataView。

实际示例

1. 读取图像文件

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', function() {
  const file = this.files[0];

  const reader = new FileReader();

  reader.onload = function() {
    const arrayBuffer = reader.result;
    const dataView = new DataView(arrayBuffer);

    // 读取图像的宽度和高度
    const width = dataView.getUint16(0);
    const height = dataView.getUint16(2);

    // 读取图像的数据
    const data = new Uint8Array(arrayBuffer, 4);

    // 处理图像数据
    // ...
  };

  reader.readAsArrayBuffer(file);
});

2. 发送二进制数据到服务器

const data = new Uint8Array([1, 2, 3, 4, 5]);

const xhr = new XMLHttpRequest();

xhr.open('POST', 'http://example.com/upload');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');

xhr.send(data);

3. 使用 WebSocket 发送二进制数据

const socket = new WebSocket('ws://example.com/chat');

socket.onopen = function() {
  const data = new Uint8Array([1, 2, 3, 4, 5]);

  socket.send(data);
};