JS二进制数据及其互相转化实现详解

什么是二进制数据

二进制数据，就是以二进制的形式保存的数据。计算机可以读取和理解二进制数据，因为计算机内部的运作机制就是二进制的。在JS中，可以通过两种方式来处理二进制数据，一种是通过ArrayBuffer对象，另一种是通过TypedArray视图。

ArrayBuffer对象

ArrayBuffer对象是JS中处理二进制数据的基础。它表示一个动态分配的内存区域，可以在这个内存区域中存储任意类型的数据。例如，我们可以创建一个长度为10字节的ArrayBuffer对象：

let buffer = new ArrayBuffer(10);

DataView视图

要操作ArrayBuffer对象中的数据，可以使用DataView视图。DataView视图提供了一系列方法，可以向ArrayBuffer对象中读写数据。

// 以字符串形式创建一个ArrayBuffer对象
let buffer = new ArrayBuffer(10);
// 创建一个DataView视图
let dataView = new DataView(buffer);
// 向DataView视图写入数据
dataView.setInt8(0, 1);
dataView.setInt16(2, 256);
// 从DataView视图读取数据
console.log(dataView.getInt8(0)); // 1
console.log(dataView.getInt16(2)); // 256

TypedArray视图

TypedArray视图是用来处理ArrayBuffer对象中特定类型的数据。JS提供了9种TypedArray视图，包括Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array和BigInt64Array。

// 把一个ArrayBuffer对象转化成TypedArray视图
let buffer = new ArrayBuffer(10);
let int8Array = new Int8Array(buffer);
let uint32Array = new Uint32Array(buffer);
// 向TypedArray视图写入数据
int8Array.set([1, 2, 3]);
uint32Array[1] = 256;
// 从TypedArray视图读取数据
console.log(int8Array[0]); // 1
console.log(uint32Array[1]); // 256

二进制数据和其他数据类型的相互转化

字符串和二进制数据的相互转化

字符串可以通过TextEncoder和TextDecoder对象和二进制数据相互转化。TextEncoder对象可以把字符串转化成二进制数据，TextDecoder对象可以把二进制数据转化成字符串。

let text = 'hello world';
let encoder = new TextEncoder();
let decoder = new TextDecoder();
let binaryData = encoder.encode(text);
let textData = decoder.decode(binaryData);
console.log(binaryData);
console.log(textData);

数组和二进制数据的相互转化

在TypedArray视图中，提供了两个方法buffer和from，可以用来把TypedArray视图和ArrayBuffer对象相互转化。

let int8Array = new Int8Array([1,2,3]);
let buffer = int8Array.buffer;
let array = Array.from(int8Array);
let newInt8Array = new Int8Array(buffer);
console.log(buffer);
console.log(array);
console.log(newInt8Array);

示例

示例1：使用AES算法加密二进制数据和解密二进制数据

const key = 'abcdefghijklmnop'.split('').map(c => c.charCodeAt(0));
const iv = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]);
//加密
function encryptAES(password, iv, data) {
  const cipher = new AES(key, iv);
  return cipher.encrypt(data);
}
//解密
function decryptAES(password, iv, data) {
  const cipher = new AES(key, iv);
  return cipher.decrypt(data);
}
const data = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]);
const encryptedData = encryptAES(key, iv, data);
console.log(encryptedData);
const decryptedData = decryptAES(key, iv, encryptedData);
console.log(decryptedData);

示例2：使用Base64编码和解码二进制数据

const text = 'hello, world!';
const encoder = new TextEncoder();
const decoder = new TextDecoder();
const binaryData = encoder.encode(text);
const base64Data = btoa(String.fromCharCode.apply(null, binaryData));
const decodedBinaryData = new Uint8Array(Array.prototype.map.call(atob(base64Data), c => c.charCodeAt(0)));
const decodedText = decoder.decode(decodedBinaryData);
console.log(base64Data);
console.log(decodedBinaryData);
console.log(decodedText);