用ArrayBuffer解锁前端新技能：二进制数据操作神器-CSDN博客

本文链接：https://blog.csdn.net/y158392613/article/details/147778618

焦头烂额的小张

凌晨两点，程序员小张正在为一个图片滤镜功能焦头烂额。他尝试用传统数组处理图片的像素数据，但页面卡顿严重，甚至导致浏览器崩溃。正当他绝望时，同事老王拍了拍他肩膀：“试试用ArrayBuffer吧，它可是处理二进制数据的‘高速公路’！”半信半疑的小张打开了文档，从此打开了新世界的大门……

ArrayBuffer是什么？

ArrayBuffer 是JavaScript中用于表示原始二进制数据的底层对象，相当于一块“固定大小的内存区域”

特点

不可直接操作：需通过视图（如TypedArray或DataView）读写数据。
高效内存管理：适合处理图像、音频、网络数据流等大规模二进制场景。

创建方式

// 分配16字节的内存
const buffer = new ArrayBuffer(16);
// 输出：16
console.log(buffer.byteLength);

为什么需要ArrayBuffer？

传统JavaScript数组在处理二进制数据时效率低下，而ArrayBuffer的优势在于：

性能优化：直接操作内存，避免类型转换开销（如处理WebGL图形数据）。
跨平台兼容：与浏览器API（如File API、WebSocket）无缝对接。
精细控制：支持按字节读写，适合加密、压缩等复杂操作。

操作ArrayBuffer的两大视图

1. TypedArray：类型化数组

将ArrayBuffer按特定数据类型（如整数、浮点数）解析。

类型	说明
`Uint8Array`	8位无符号整数（0-255）
`Float32Array`	32位浮点数

const buffer = new ArrayBuffer(8);
const uint8View = new Uint8Array(buffer);
uint8View[0] = 255; // 写入数据

2. DataView：灵活视图

支持混合数据类型和自定义字节序（如处理网络协议包）

const view = new DataView(buffer);
// 在小端序下写入16位整数
view.setInt16(0, 42, true);

实战案例：用ArrayBuffer处理图片

1. 从文件读取图片

const fileInput = document.querySelector('input[type="file"]');
const reader = new FileReader();
reader.onload = (e) => {
  const buffer = e.target.result; // 获取ArrayBuffer
  const dataView = new DataView(buffer);
  // 处理像素数据...
};
reader.readAsArrayBuffer(fileInput.files[0]);

2. 处理用户上传的PNG文件头（前8字节）

fileInput.onchange = e => {
  const file = e.target.files[0]
  const reader = new FileReader()
  
  reader.onload = function() {
    const buffer = this.result
    const header = new Uint8Array(buffer, 0, 8)
    
    // 校验PNG文件签名
    if (header[0] === 0x89 && header[1] === 0x50) {
      console.log("合法PNG文件")
    }
  }
  
  reader.readAsArrayBuffer(file)
}

3. WebSocket传输二进制数据

const socket = new WebSocket('ws://example.com');
socket.binaryType = 'arraybuffer';
socket.onmessage = (e) => {
  const buffer = e.data; // 接收ArrayBuffer
};