Binary Data In Frontend

Introduction

在日常的前端开发中，涉及到的工作内容大多和 UI 有关，比如说页面样式调整之类的基础工作。但是随着前端的发展，很多业务逻辑都放到了前端，例如文件生成和下载，图片处理等功能，这时候就涉及到了前端的二进制相关的内容，这篇文章从二进制相关内容和 API 出发，探究前端二进制相关的用途。

ArrayBuffer

ArrayBuffer 是一段基础的，固定长度的二进制数据，类似于其他语言的byte array。不能直接修改相关的内容，但是可以通过TypedArray和DataView进行读写。

const buffer = new ArrayBuffer(8);

const slicedBuffer = buffer.slice(0, 3);

console.log(buffer.byteLength, slicedBuffer.byteLength); // 8 3

如上所示，可以通过 new ArrayBuffer 创建新的 buffer, slice 截取 buffer 内容，slice 的操作类似于Array.prototype.slice

TypedArray

TypedArray 提供了多种类型用来处理和操作二进制数据,如下所示[1]：

Uint8Array vs Uint8ClampedArray

Uint8Array 在处理小数位的时候采用的是向下取整，Uint8ClampedArray 则是采用四舍五入的形式取整，举个例子:

Uint8Array([0.9]); // 0
Uint8ClampedArray([0.9]); // 1

Uint8ClampedArray 当赋值在区间[0,255]之外，则只有取值为 0 或者 255 的两种情况，所以更多的运用于防止溢出的情况,例如增加图片的亮度[2]