JavaScript 二进制数据处理详解#

1
// 创建一个 16 字节的缓冲区
2
const buffer = new ArrayBuffer(16);
3

4
console.log(buffer.byteLength);  // 16
5
console.log(buffer instanceof ArrayBuffer);  // true

1
ArrayBuffer (16 bytes)
2
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
3
│ 0 │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │10 │11 │12 │13 │14 │15 │
4
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘
5
  ↑                                                           ↑
6
字节索引 0                                               字节索引 15

1
const buffer = new ArrayBuffer(4);
2
const uint8 = new Uint8Array(buffer);
3

4
// 写入数据
5
uint8[0] = 0x48;  // 'H'
6
uint8[1] = 0x65;  // 'e'
7
uint8[2] = 0x6C;  // 'l'
8
uint8[3] = 0x6F;  // 'o'
9

10
console.log(uint8);  // Uint8Array(4) [72, 101, 108, 111]
11

12
// 溢出行为：取低8位
13
uint8[0] = 300;      // 300 = 0x12C → 取低8位 0x2C = 44
14
console.log(uint8[0]);  // 44
15

16
uint8[0] = -1;       // -1 → 0xFF = 255
17
console.log(uint8[0]);  // 255

1
const clamped = new Uint8ClampedArray(4);
2
const normal = new Uint8Array(4);
3

4
clamped[0] = 300;   // 超出上限 → 钳制到 255
5
normal[0] = 300;    // 取模 → 44
6

7
clamped[1] = -10;   // 低于下限 → 钳制到 0
8
normal[1] = -10;    // 取模 → 246
9

10
console.log(clamped[0], normal[0]);  // 255, 44
11
console.log(clamped[1], normal[1]);  // 0, 246

1
const int8 = new Int8Array(4);
2

3
int8[0] = 127;   // 最大值
4
int8[1] = -128;  // 最小值
5
int8[2] = 255;   // 255 作为有符号数 → -1
6

7
console.log(int8);  // Int8Array(4) [127, -128, -1, 0]

1
正数：直接表示
2
  127 = 0111 1111
3

4
负数：补码表示
5
  -1  = 1111 1111  (255 的无符号表示)
6
  -128 = 1000 0000 (128 的无符号表示)

1
const buffer = new ArrayBuffer(4);
2
const uint16 = new Uint16Array(buffer);
3
const uint8 = new Uint8Array(buffer);
4

5
// 写入一个 16 位整数
6
uint16[0] = 0x1234;
7

8
// 查看字节表示（小端序）
9
console.log(uint8[0], uint8[1]);  // 52, 18  → 0x34, 0x12

1
数值 0x12345678 在内存中的存储：
2

3
小端序：78 56 34 12  （低地址存低位字节）
4
大端序：12 34 56 78  （低地址存高位字节）

1
const buffer = new ArrayBuffer(8);
2
const uint32 = new Uint32Array(buffer);
3
const uint8 = new Uint8Array(buffer);
4

5
uint32[0] = 0xDEADBEEF;
6

7
// 小端序存储
8
console.log(uint8[0].toString(16));  // 'ef'
9
console.log(uint8[1].toString(16));  // 'be'
10
console.log(uint8[2].toString(16));  // 'ad'
11
console.log(uint8[3].toString(16));  // 'de'

1
const buffer = new ArrayBuffer(8);
2
const float32 = new Float32Array(buffer);
3
const float64 = new Float64Array(buffer);
4
const uint8 = new Uint8Array(buffer);
5

6
// 32位浮点数
7
float32[0] = 3.14159;
8
console.log(uint8.slice(0, 4));  // 查看字节表示
9

10
// 64位浮点数（JavaScript Number 的内部表示）
11
float64[0] = 3.14159;
12
console.log(uint8.slice(0, 8));  // 查看字节表示

1
Float32（32位单精度）：
2
┌─┬────────┬───────────────────────┐
3
│S│ Exp(8) │    Mantissa(23)       │
4
└─┴────────┴───────────────────────┘
5

6
Float64（64位双精度）：
7
┌─┬──────────┬─────────────────────────────────┐
8
│S│ Exp(11)  │        Mantissa(52)             │
9
└─┴──────────┴─────────────────────────────────┘
10

11
S = 符号位 (0正1负)
12
Exp = 指数（偏移表示）
13
Mantissa = 尾数（隐含前导1）

1
const buffer = new ArrayBuffer(16);
2
const bigInt64 = new BigInt64Array(buffer);
3
const bigUint64 = new BigUint64Array(buffer);
4

5
bigInt64[0] = 9223372036854775807n;   // 最大正数 (2^63 - 1)
6
bigInt64[1] = -9223372036854775808n;  // 最小负数 (-2^63)
7

8
bigUint64[0] = 18446744073709551615n; // 最大值 (2^64 - 1)
9

10
console.log(bigInt64[0]);   // 9223372036854775807n
11
console.log(bigUint64[0]);  // 18446744073709551615n

1
const buffer = new ArrayBuffer(8);
2

3
const uint8 = new Uint8Array(buffer);
4
const uint32 = new Uint32Array(buffer);
5
const float64 = new Float64Array(buffer);
6

7
// 通过 uint32 写入
8
uint32[0] = 0x41424344;
9

10
// 通过 uint8 读取（查看字节）
11
console.log(String.fromCharCode(uint8[0], uint8[1], uint8[2], uint8[3]));
12
// 小端序：'DCBA' 或 'ABCD'（取决于字节序）
13

14
// 通过 float64 读取（无意义的浮点数）
15
console.log(float64[0]);  // 一个很小的数

1
const buffer = new ArrayBuffer(16);
2
const view = new DataView(buffer);
3

4
// 在偏移 0 处写入 32 位整数（大端序）
5
view.setInt32(0, 0x12345678, false);  // false = 大端序
6

7
// 在偏移 4 处写入 32 位整数（小端序）
8
view.setInt32(4, 0x12345678, true);   // true = 小端序
9

10
// 在偏移 8 处写入 64 位浮点数
11
view.setFloat64(8, 3.14159, true);
12

13
// 读取
14
console.log(view.getInt32(0, false).toString(16));  // '12345678'
15
console.log(view.getInt32(4, true).toString(16));   // '12345678'

1
// 模拟一个二进制协议头
2
// 格式：magic(4) + version(2) + flags(2) + length(4) + timestamp(8)
3
const buffer = new ArrayBuffer(20);
4
const view = new DataView(buffer);
5

6
// 写入协议头
7
view.setUint32(0, 0x89504E47, false);  // magic (大端序)
8
view.setUint16(4, 1, false);            // version
9
view.setUint16(6, 0x0001, false);       // flags
10
view.setUint32(8, 1024, false);         // length
11
view.setBigUint64(12, BigInt(Date.now()), false);  // timestamp
12

13
// 解析协议头
14
function parseHeader(buffer) {
15
    const view = new DataView(buffer);
16
    return {
17
        magic: view.getUint32(0, false).toString(16),
18
        version: view.getUint16(4, false),
19
        flags: view.getUint16(6, false),
20
        length: view.getUint32(8, false),
21
        timestamp: Number(view.getBigUint64(12, false))
22
    };
23
}
24

25
console.log(parseHeader(buffer));

1
// 提取特定位
2
const value = 0b11010110;
3

4
// 提取低 4 位
5
console.log((value & 0b1111).toString(2));  // '110'
6

7
// 提取第 3 位
8
console.log((value & 0b00100000) !== 0);    // true
9

10
// 判断奇偶
11
console.log((5 & 1) === 1);  // true (奇数)
12
console.log((4 & 1) === 0);   // true (偶数)
13

14
// 掩码操作
15
const permissions = 0b1011;  // 读、写、执行
16
const READ = 0b0001;
17
const WRITE = 0b0010;
18
const EXECUTE = 0b1000;
19

20
console.log(permissions & READ);     // 1 (有读权限)
21
console.log(permissions & WRITE);    // 2 (有写权限)
22
console.log(permissions & EXECUTE);  // 8 (有执行权限)

1
// 设置特定位
2
let flags = 0b0000;
3

4
flags |= 0b0001;  // 设置第 0 位
5
flags |= 0b1000;  // 设置第 3 位
6

7
console.log(flags.toString(2));  // '1001'
8

9
// 合并值
10
const red = 0xFF0000;
11
const green = 0x00FF00;
12
const blue = 0x0000FF;
13

14
const white = red | green | blue;  // 0xFFFFFF

1
// 翻转特定位
2
let value = 0b1010;
3
value ^= 0b1111;  // 翻转所有位
4
console.log(value.toString(2));  // '101'
5

6
// 简单加密
7
const key = 0x55;
8
const data = 0x41;  // 'A'
9
const encrypted = data ^ key;   // 0x14
10
const decrypted = encrypted ^ key;  // 0x41
11

12
// 交换两个数（不使用临时变量）
13
let a = 5, b = 3;
14
a ^= b;
15
b ^= a;
16
a ^= b;
17
console.log(a, b);  // 3, 5

1
// 按位非的结果 = -(x + 1)
2
console.log(~0);   // -1
3
console.log(~(-1)); // 0
4
console.log(~5);   // -6
5

6
// 快速判断数组中是否存在元素
7
const arr = [1, 2, 3, 4, 5];
8
const index = arr.indexOf(3);
9
if (~index) {  // index >= 0 时 ~index 为真
10
    console.log('找到了');
11
}
12

13
// 提取最低位的 1
14
const x = 0b101000;
15
const lowestBit = x & -x;  // 或 x & (~x + 1)
16
console.log(lowestBit.toString(2));  // '1000'

1
// 乘以 2 的 n 次方
2
console.log(5 << 1);   // 10 (5 * 2)
3
console.log(5 << 2);   // 20 (5 * 4)
4
console.log(5 << 3);   // 40 (5 * 8)
5

6
// 组合字节
7
const high = 0x12;
8
const low = 0x34;
9
const combined = (high << 8) | low;  // 0x1234
10

11
// 构造掩码
12
const mask = 1 << 5;  // 0b100000

1
// 除以 2 的 n 次方（保留符号）
2
console.log(8 >> 1);   // 4
3
console.log(8 >> 2);   // 2
4
console.log(-8 >> 1);  // -4 (保留符号位)
5

6
// 提取高位字节
7
const value = 0x1234;
8
const highByte = value >> 8;  // 0x12

1
// 无符号右移（高位补 0）
2
console.log(-8 >>> 1);  // 2147483644 (不是 -4!)
3

4
// 将 32 位有符号数转为无符号数
5
const signed = -1;
6
const unsigned = signed >>> 0;  // 4294967295
7

8
// 限制为 32 位无符号整数
9
function toUint32(x) {
10
    return x >>> 0;
11
}
12

13
console.log(toUint32(-1));     // 4294967295
14
console.log(toUint32(0xFFFFFFFF));  // 4294967295
15
console.log(toUint32(0x1FFFFFFFF));  // 4294967295 (截断高32位)

1
// 字符串 → Uint8Array（UTF-8 编码）
2
function stringToUint8Array(str) {
3
    return new TextEncoder().encode(str);
4
}
5

6
// Uint8Array → 字符串（UTF-8 解码）
7
function uint8ArrayToString(uint8) {
8
    return new TextDecoder().decode(uint8);
9
}
10

11
// 示例
12
const str = "Hello, 世界!";
13
const bytes = stringToUint8Array(str);
14
console.log(bytes);
15
// Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 228, 184, 150, 231, 149, 140]
16

17
const decoded = uint8ArrayToString(bytes);
18
console.log(decoded);  // "Hello, 世界!"

1
// ArrayBuffer → 十六进制字符串
2
function bufferToHex(buffer) {
3
    return Array.from(new Uint8Array(buffer))
4
        .map(b => b.toString(16).padStart(2, '0'))
5
        .join('');
6
}
7

8
// 十六进制字符串 → ArrayBuffer
9
function hexToBuffer(hex) {
10
    const bytes = new Uint8Array(hex.length / 2);
11
    for (let i = 0; i < hex.length; i += 2) {
12
        bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
13
    }
14
    return bytes.buffer;
15
}
16

17
// 示例
18
const buffer = new ArrayBuffer(4);
19
new Uint8Array(buffer).set([0xDE, 0xAD, 0xBE, 0xEF]);
20
console.log(bufferToHex(buffer));  // 'deadbeef'
21

22
const restored = hexToBuffer('deadbeef');
23
console.log(new Uint8Array(restored));  // Uint8Array(4) [222, 173, 190, 239]

1
// ArrayBuffer → Base64
2
function bufferToBase64(buffer) {
3
    const bytes = new Uint8Array(buffer);
4
    let binary = '';
5
    for (let i = 0; i < bytes.length; i++) {
6
        binary += String.fromCharCode(bytes[i]);
7
    }
8
    return btoa(binary);
9
}
10

11
// Base64 → ArrayBuffer
12
function base64ToBuffer(base64) {
13
    const binary = atob(base64);
14
    const bytes = new Uint8Array(binary.length);
15
    for (let i = 0; i < binary.length; i++) {
16
        bytes[i] = binary.charCodeAt(i);
17
    }
18
    return bytes.buffer;
19
}
20

21
// 示例
22
const buffer = new ArrayBuffer(4);
23
new Uint8Array(buffer).set([72, 101, 108, 108]);
24
console.log(bufferToBase64(buffer));  // 'SGVsbA=='

1
// 浮点数与整数的底层表示转换
2
function floatToBytes(num) {
3
    const buffer = new ArrayBuffer(8);
4
    new Float64Array(buffer)[0] = num;
5
    return new Uint8Array(buffer);
6
}
7

8
function bytesToFloat(bytes) {
9
    const buffer = new ArrayBuffer(8);
10
    new Uint8Array(buffer).set(bytes);
11
    return new Float64Array(buffer)[0];
12
}
13

14
// 示例
15
const bytes = floatToBytes(3.14159);
16
console.log(bytes);
17
// Uint8Array(8) [82, 232, 25, 26, 133, 235, 9, 64]
18

19
console.log(bytesToFloat(bytes));  // 3.14159
20

21
// 32 位整数与浮点数互转
22
function intBitsToFloat(bits) {
23
    const buffer = new ArrayBuffer(4);
24
    new Uint32Array(buffer)[0] = bits;
25
    return new Float32Array(buffer)[0];
26
}
27

28
function floatToIntBits(num) {
29
    const buffer = new ArrayBuffer(4);
30
    new Float32Array(buffer)[0] = num;
31
    return new Uint32Array(buffer)[0];
32
}

1
// 翻转字节序（大端 ↔ 小端）
2
function swapEndian16(value) {
3
    return ((value & 0xFF) << 8) | ((value >> 8) & 0xFF);
4
}
5

6
function swapEndian32(value) {
7
    return ((value & 0xFF) << 24) |
8
           ((value & 0xFF00) << 8) |
9
           ((value >> 8) & 0xFF00) |
10
           ((value >> 24) & 0xFF);
11
}
12

13
// 示例
14
console.log(swapEndian16(0x1234).toString(16));  // '3412'
15
console.log(swapEndian32(0x12345678).toString(16));  // '78563412'
16

17
// 使用 DataView 处理字节序
18
function readLittleEndianUint32(buffer, offset) {
19
    const view = new DataView(buffer);
20
    return view.getUint32(offset, true);  // true = 小端序
21
}
22

23
function readBigEndianUint32(buffer, offset) {
24
    const view = new DataView(buffer);
25
    return view.getUint32(offset, false);  // false = 大端序
26
}

1
// 提取位域
2
function extractBits(value, start, length) {
3
    const mask = (1 << length) - 1;
4
    return (value >>> start) & mask;
5
}
6

7
// 设置位域
8
function setBits(value, start, length, newValue) {
9
    const mask = (1 << length) - 1;
10
    return (value & ~(mask << start)) | ((newValue & mask) << start);
11
}
12

13
// 示例
14
const value = 0b11010110;
15
console.log(extractBits(value, 2, 3).toString(2));  // '101'
16

17
const modified = setBits(value, 2, 3, 0b111);
18
console.log(modified.toString(2));  // '11011110'

1
// 常见的加密数据结构
2
function parseEncryptedData(buffer) {
3
    const view = new DataView(buffer);
4
    const result = {};
5

6
    // 读取魔数
7
    result.magic = view.getUint32(0, false);
8

9
    // 读取版本
10
    result.version = view.getUint16(4, false);
11

12
    // 读取标志位
13
    result.flags = view.getUint16(6, false);
14

15
    // 读取数据长度
16
    result.length = view.getUint32(8, false);
17

18
    // 读取时间戳
19
    result.timestamp = Number(view.getBigUint64(12, false));
20

21
    // 读取数据
22
    result.data = new Uint8Array(buffer, 20, result.length);
23

24
    return result;
25
}

1
// 简单的循环移位
2
function rotateLeft(value, shift, bits = 32) {
3
    shift = shift % bits;
4
    return ((value << shift) | (value >>> (bits - shift))) >>> 0;
5
}
6

7
function rotateRight(value, shift, bits = 32) {
8
    shift = shift % bits;
9
    return ((value >>> shift) | (value << (bits - shift))) >>> 0;
10
}
11

12
// 示例
13
console.log(rotateLeft(0x12345678, 4).toString(16));  // '23456781'
14
console.log(rotateRight(0x12345678, 4).toString(16)); // '81234567'

1
// 常见的混淆模式：字符串数组索引
2
const stringArray = ['log', 'warn', 'error', 'info'];
3
const indexMap = { 0x0: 0, 0x1: 1, 0x2: 2, 0x3: 3 };
4

5
function getString(encodedIndex) {
6
    return stringArray[indexMap[encodedIndex]];
7
}
8

9
// 常见的混淆模式：位运算加密
10
function decryptChar(encrypted, key) {
11
    return String.fromCharCode(encrypted ^ key);
12
}
13

14
// 分析时识别这些模式
15
// _0x1234 ^ _0x5678  → 异或解密
16
// _0x1234 << 2       → 左移乘法
17
// _0x1234 >> 1       → 右移除法
18
// _0x1234 & 0xFF     → 取低字节

1
// 不好的做法
2
for (let i = 0; i < 1000; i++) {
3
    const view = new DataView(buffer);
4
    view.setInt32(0, i);
5
}
6

7
// 好的做法
8
const view = new DataView(buffer);
9
for (let i = 0; i < 1000; i++) {
10
    view.setInt32(0, i);
11
}

1
// 不好的做法：手动复制
2
function copyBytes(buffer, start, length) {
3
    const result = new Uint8Array(length);
4
    const source = new Uint8Array(buffer);
5
    for (let i = 0; i < length; i++) {
6
        result[i] = source[start + i];
7
    }
8
    return result;
9
}
10

11
// 好的做法：使用 slice
12
function sliceBytes(buffer, start, length) {
13
    return new Uint8Array(buffer, start, length).slice();
14
}

1
// 不好的做法：逐字节操作
2
for (let i = 0; i < data.length; i++) {
3
    view.setUint8(i, data[i]);
4
}
5

6
// 好的做法：批量设置
7
new Uint8Array(buffer).set(data);

1
const buffer = new ArrayBuffer(16);
2

3
// TypedArray 长度 = buffer 字节数 / 每个元素字节数
4
console.log(new Uint8Array(buffer).length);   // 16
5
console.log(new Uint16Array(buffer).length);  // 8
6
console.log(new Uint32Array(buffer).length); // 4
7
console.log(new Float64Array(buffer).length);// 2
8

9
// 带偏移和长度的视图
10
const view = new Uint8Array(buffer, 4, 8);  // 从偏移 4 开始，长度 8
11
console.log(view.length);  // 8

1
const uint8 = new Uint8Array(1);
2
const int8 = new Int8Array(1);
3

4
// Uint8Array: 溢出时取模
5
uint8[0] = 256;  // 256 % 256 = 0
6
console.log(uint8[0]);  // 0
7

8
uint8[0] = -1;   // -1 & 0xFF = 255
9
console.log(uint8[0]);  // 255
10

11
// Int8Array: 溢出时取模并解释为有符号数
12
int8[0] = 128;   // 128 % 256 = 128 → 解释为 -128
13
console.log(int8[0]);  // -128

1
// 平台字节序检测
2
const isLittleEndian = new Uint8Array(new Uint16Array([1]).buffer)[0] === 1;
3
console.log(isLittleEndian ? '小端序' : '大端序');
4

5
// 网络协议通常使用大端序
6
// x86/ARM 通常使用小端序
7
// 使用 DataView 明确指定字节序可以避免问题

1
// 某些平台要求内存对齐
2
const buffer = new ArrayBuffer(16);
3
const uint32 = new Uint32Array(buffer, 1);  // 偏移 1 字节（未对齐）
4
// 在某些平台上可能导致性能下降或错误
5

6
// 建议：使用 4 或 8 字节对齐的偏移
7
const aligned = new Uint32Array(buffer, 4);  // 偏移 4 字节（对齐）