什么是DataView？二进制数据的操作-js教程-PHP中文网

DataView是JavaScript中操作二进制数据的核心工具，它基于ArrayBuffer提供灵活的字节级读写能力，支持多种数据类型和字节序控制，尤其适用于解析混合类型的复杂二进制协议。与仅支持单一类型的TypedArray不同，DataView允许在同一个缓冲区中按指定偏移量读写不同类型的值（如int16、float32等），并通过littleEndian参数精确处理大小端问题，确保跨平台数据解析的正确性。两者共享底层ArrayBuffer，可协同使用，TypedArray适合高性能同构数据处理，而DataView胜在灵活性和协议解析能力。

什么是dataview？二进制数据的操作

DataView，简单来说，它就像是JavaScript世界里，我们用来精准操作二进制数据的一把瑞士军刀。它不直接存储数据，而是提供一个视图，让我们能以字节为单位，自由地读写

ArrayBuffer

登录后复制

中的任意位置、任意类型的数据，无论那是整数、浮点数，还是有符号无符号。

解决方案

处理二进制数据，光有一个

ArrayBuffer

登录后复制

是远远不够的。

ArrayBuffer

登录后复制

就像一块原始的、未加工的内存区域，它本身不提供任何读写机制，你甚至不知道里面存的是什么类型的数据。这时候，

DataView

登录后复制

就登场了。它提供了一套API，允许我们从

ArrayBuffer

登录后复制

中以特定的偏移量（offset）和数据类型（如8位整数、32位浮点数等）来读取或写入数据，并且还能灵活地处理字节序（endianness）。

想象一下，你拿到了一串二进制数据，它可能来自网络传输，也可能是一个文件。这串数据里，前两个字节代表一个ID，接着四个字节是一个时间戳，再后面是某个传感器的读数（可能是个浮点数）。如果直接用

TypedArray

登录后复制

，你可能需要创建多个不同类型的视图，并且每次都要确保它们对齐。但

DataView

登录后复制

则不同，它能让你在同一个

ArrayBuffer

登录后复制

上，像操作指针一样，跳到指定位置，然后告诉它：“从这里开始，给我读一个无符号16位整数。”或者“从这里开始，给我写一个32位浮点数。”这种灵活性，在处理复杂或混合类型的二进制协议时，简直是救命稻草。

// 假设我们有一个8字节的ArrayBuffer
const buffer = new ArrayBuffer(8);
// 创建一个DataView来操作这个buffer
const view = new DataView(buffer);

// 写入数据
// 在偏移量0处写入一个无符号16位整数 (0x1234)
view.setUint16(0, 0x1234, false); // false表示大端字节序 (Big-Endian)

// 在偏移量2处写入一个有符号32位整数 (-123456789)
view.setInt32(2, -123456789, true); // true表示小端字节序 (Little-Endian)

// 在偏移量6处写入一个无符号8位整数 (0xFF)
view.setUint8(6, 0xFF);

// 读取数据
console.log('Uint16 at offset 0 (Big-Endian):', view.getUint16(0, false).toString(16)); // 1234
console.log('Int32 at offset 2 (Little-Endian):', view.getInt32(2, true)); // -123456789
console.log('Uint8 at offset 6:', view.getUint8(6).toString(16)); // ff

// 尝试读取一个不存在的类型或越界
try {
    view.getFloat64(7); // 只有1个字节了，尝试读取8字节的Float64会报错
} catch (e) {
    console.error('Error when reading out of bounds:', e.message); // DataView.prototype.getFloat64: Offset is outside the bounds of the DataView
}

登录后复制

为什么在处理二进制数据时需要DataView？

我最初接触二进制数据时，总觉得它像一团混沌，所有的信息都挤在一起，没有明确的边界。

ArrayBuffer

登录后复制

就像那团混沌本身，它只是一块内存，你不知道里面到底存了什么。而

DataView

登录后复制

，对我来说，就是那把能让我看清纹理、划分区域的放大镜和刻刀。

设想一下，你正在开发一个前端应用，需要解析一个从后端通过WebSocket传过来的二进制协议包。这个包里可能包含了多种数据类型：一个表示消息类型的字节，一个表示数据长度的短整数，接着是一个浮点数表示的温度，最后可能是一段UTF-8编码的字符串。如果每次都得把整个

ArrayBuffer

登录后复制

转换成

Uint8Array

登录后复制

，然后手动计算偏移量，再进行位运算来拼凑出完整的数值，那工作量和出错率都会大大增加。

DataView

登录后复制

的价值就在于它的“视图”特性和类型感知能力。它不要求你提前知道所有数据的类型和排列方式，而是允许你在运行时，根据协议的定义，灵活地从任何字节位置开始，以任何预期的类型去读取数据。比如，我知道消息类型是第一个字节，我就用

getUint8(0)

登录后复制

；我知道温度是第三个字节开始的四个字节，我就用

getFloat32(2)

登录后复制

。这种直观的操作方式，极大地简化了二进制协议的解析和构建过程。它避免了大量繁琐的位操作和字节序转换逻辑，让我们可以更专注于业务逻辑本身，而不是底层的数据处理细节。

DataView如何读写不同类型的数据？

DataView

登录后复制

的核心能力就体现在它提供了一系列以

get

登录后复制

和

set

登录后复制

开头的方法，用于读写不同长度和类型的数据。这些方法涵盖了从8位（字节）到64位（双精度浮点数）的各种整数和浮点数类型，而且还能指定字节序。

我写代码的时候，经常会遇到要从一个字节流里解析出不同长度、不同类型的数据，比如前两个字节是ID，后面四个字节是时间戳，再后面是温度值。

DataView

登录后复制

就是为这种场景而生的。

它的读写方法通常遵循这样的模式：

```
get<Type>(byteOffset, [littleEndian])
```
登录后复制
：从
```
byteOffset
```
登录后复制
位置开始，读取指定
```
Type
```
登录后复制
的数据。
```
set<Type>(byteOffset, value, [littleEndian])
```
登录后复制
：从
```
byteOffset
```
登录后复制
位置开始，写入
```
value
```
登录后复制
为指定
```
Type
```
登录后复制
的数据。

这里的

Type

登录后复制

可以是：

```
Int8
```
登录后复制
,
```
Uint8
```
登录后复制
: 8位有符号/无符号整数（一个字节）
```
Int16
```
登录后复制
,
```
Uint16
```
登录后复制
: 16位有符号/无符号整数（两个字节）
```
Int32
```
登录后复制
,
```
Uint32
```
登录后复制
: 32位有符号/无符号整数（四个字节）
```
Float32
```
登录后复制
: 32位浮点数（四个字节）
```
Float64
```
登录后复制
: 64位浮点数（八个字节）

byteOffset

登录后复制

参数是必填的，它指定了从

ArrayBuffer

登录后复制

开头算起的字节偏移量。

littleEndian

登录后复制

参数是可选的布尔值，默认为

false

登录后复制

（即大端字节序）。如果设置为

true

登录后复制

，则表示按小端字节序处理。

const buffer = new ArrayBuffer(16); // 16字节缓冲区
const view = new DataView(buffer);

// 写入数据
view.setUint8(0, 255); // 写入一个无符号8位整数 (0xFF)
view.setInt16(1, -32000, true); // 在偏移量1处写入一个有符号16位整数，小端序
view.setFloat32(3, 3.14159, false); // 在偏移量3处写入一个32位浮点数，大端序
view.setBigInt64(7, 1234567890123456789n, true); // 在偏移量7处写入一个64位大整数，小端序 (需要ES2020支持BigInt)

// 读取数据
console.log('Uint8 at offset 0:', view.getUint8(0)); // 255
console.log('Int16 at offset 1 (Little-Endian):', view.getInt16(1, true)); // -32000
console.log('Float32 at offset 3 (Big-Endian):', view.getFloat32(3, false)); // 3.141590118408203
console.log('BigInt64 at offset 7 (Little-Endian):', view.getBigInt64(7, true)); // 1234567890123456789n

登录后复制

这里需要注意，

BigInt64

登录后复制

和

BigUint64

登录后复制

是较新的API，在使用时需要确保运行环境支持ES2020及以上标准。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

DataView与TypedArray（类型化数组）有什么区别和联系？

这俩兄弟经常让人犯迷糊，但一旦你理解了它们各自的侧重点，你会发现它们是绝佳搭档，而不是相互替代的关系。

类型化数组（TypedArray），比如

Uint8Array

登录后复制

、

Int32Array

登录后复制

、

Float64Array

登录后复制

等，它们是针对特定数据类型优化的数组。当你创建一个

new Uint8Array(buffer)

登录后复制

时，你就告诉JavaScript：“我希望把这个

buffer

登录后复制

看作是一个由无符号8位整数组成的序列。”然后，你就可以像操作普通数组一样，通过索引

arr[0]

登录后复制

arr[1]

登录后复制

来访问这些8位整数。它的优点在于性能和直观性，特别适合处理同构的、连续的数据块。比如，图像的像素数据，音频的采样数据，这些通常都是统一的类型。

DataView，则是一个更底层的、更灵活的“通用视图”。它不关心

ArrayBuffer

登录后复制

里到底是什么类型的“数组”，它只提供一个“窗口”，让你能从任意字节位置开始，以你指定的任意类型去读写数据。它没有索引的概念，只有字节偏移量。

核心区别总结：

类型特异性：
```
TypedArray
```
登录后复制
是类型特异的（例如，
```
Int32Array
```
登录后复制
只能处理32位整数），而
```
DataView
```
登录后复制
是类型无关的，它能读取任何类型的数据。
访问方式：
```
TypedArray
```
登录后复制
通过数组索引
```
arr[i]
```
登录后复制
访问元素，每个元素占据固定字节数。
```
DataView
```
登录后复制
通过字节偏移量
```
view.getUint8(offset)
```
登录后复制
访问，你可以指定任何类型，即使它跨越了多个字节。
性能与灵活性：
```
TypedArray
```
登录后复制
在处理大量同构数据时通常性能更优，因为它对底层数据结构有更强的假设。
```
DataView
```
登录后复制
则提供了无与伦比的灵活性，尤其适合处理异构数据或复杂协议。

它们之间的联系： 两者都操作同一个底层

ArrayBuffer

登录后复制

。你可以先用

DataView

登录后复制

从一个复杂的二进制流中解析出各个部分，然后将其中某个部分（例如，一个大的图像数据块）转换为

Uint8Array

登录后复制

进行进一步处理。反过来也一样，你可以将一个

Uint8Array

登录后复制

的数据写入

ArrayBuffer

登录后复制

，再用

DataView

登录后复制

去读取其中的特定数值。

const buffer = new ArrayBuffer(10); // 10字节缓冲区

// 使用Uint8Array写入数据
const uint8Array = new Uint8Array(buffer);
uint8Array[0] = 0x11;
uint8Array[1] = 0x22;
uint8Array[2] = 0x33;
uint8Array[3] = 0x44;

// 现在用DataView来读取这些数据，但以不同的类型解释
const view = new DataView(buffer);
console.log('Uint8Array values:', uint8Array[0].toString(16), uint8Array[1].toString(16), uint8Array[2].toString(16), uint8Array[3].toString(16)); // 11 22 33 44

// 从偏移量0开始，读取一个大端序的Uint32
console.log('Uint32 from offset 0 (Big-Endian):', view.getUint32(0, false).toString(16)); // 11223344

// 从偏移量0开始，读取一个小端序的Uint32
console.log('Uint32 from offset 0 (Little-Endian):', view.getUint32(0, true).toString(16)); // 44332211

登录后复制

这段代码清晰地展示了，即使是同样的数据，通过

TypedArray

登录后复制

和

DataView

登录后复制

，或者通过

DataView

登录后复制

的不同字节序设置，都可以被解释成完全不同的值。这就是它们各自的魔力所在。

处理DataView中的字节序（Endianness）有什么讲究？

字节序这东西，初看有点玄乎，但一旦你踩过坑，就会发现它是处理二进制数据时绕不开的关键点。简单来说，字节序就是多字节数据（比如16位整数、32位浮点数）在内存中存储时，字节的排列顺序。

有两种主要的字节序：

大端字节序（Big-Endian）：最高有效字节（MSB）存储在最低内存地址。这就像我们写数字，从左到右，高位在前。网络传输通常默认采用大端字节序。
小端字节序（Little-Endian）：最低有效字节（LSB）存储在最低内存地址。这就像我们倒着写数字，低位在前。大多数现代计算机（Intel x86架构）内部都采用小端字节序。

DataView

登录后复制

的

get

登录后复制

和

set

登录后复制

方法都有一个可选的

littleEndian

登录后复制

参数，默认为

false

登录后复制

，即大端字节序。这意味着如果你不指定，它就会按大端序处理。

什么时候需要特别关注字节序？

网络通信： 当你从网络接收二进制数据包时，通常需要按大端字节序解析，因为网络协议标准（如TCP/IP）通常规定使用大端序。
文件格式： 很多文件格式（如PNG、JPEG、WAV等）内部都有自己的字节序规定，解析时必须遵循。
跨平台数据交换： 如果你的前端应用需要和不同架构的后端服务器或者其他系统进行二进制数据交互，了解并正确处理字节序是避免数据错乱的关键。

我记得有一次，我从一个嵌入式设备读取传感器数据，设备是小端序，而我的JavaScript代码默认按大端序解析，结果所有读出来的数值都是错的，排查了好久才发现是字节序的问题。那种“啊哈！”的瞬间，真的让人印象深刻。

const buffer = new ArrayBuffer(4); // 4字节缓冲区
const view = new DataView(buffer);

// 假设我们要写入一个16位整数值 0x1234
const value = 0x1234;

// 1. 按大端字节序写入 (默认行为或 littleEndian: false)
// 内存布局: [0x12, 0x34, 0x00, 0x00]
view.setUint16(0, value, false);
console.log('Big-Endian Bytes:', new Uint8Array(buffer).map(b => b.toString(16).padStart(2, '0'))); // ["12", "34", "00", "00"]
console.log('Read as Big-Endian:', view.getUint16(0, false).toString(16)); // 1234
console.log('Read as Little-Endian:', view.getUint16(0, true).toString(16)); // 3412 (字节颠倒了)

// 清空buffer
view.setUint32(0, 0);

// 2. 按小端字节序写入 (littleEndian: true)
// 内存布局: [0x34, 0x12, 0x00, 0x00]
view.setUint16(0, value, true);
console.log('Little-Endian Bytes:', new Uint8Array(buffer).map(b => b.toString(16).padStart(2, '0'))); // ["34", "12", "00", "00"]
console.log('Read as Little-Endian:', view.getUint16(0, true).toString(16)); // 1234
console.log('Read as Big-Endian:', view.getUint16(0, false).toString(16)); // 3412 (字节颠倒了)

登录后复制

通过这个例子，你可以清楚地看到，即使是写入相同的值，选择不同的字节序，底层内存中的字节排列也会完全不同。因此，在读写多字节数据时，务必清楚你正在处理的数据源或目标期望的字节序，并正确设置