全栈开发知识库

Kpsmart2025年3月7日大约 13 分钟

我将为您完善 DataView 的文档，详细介绍其概念、用法和应用场景。

---
title: DataView
icon: javascript
order: 3
---

# DataView

DataView提供了一个更灵活的接口来读写ArrayBuffer中的数据，支持不同的数据类型和字节序。本文将介绍DataView的创建和使用方法，以及它与类型化数组视图的区别。

## DataView 基本概念

DataView 是一个提供对 ArrayBuffer 数据的底层读写接口的视图对象。与类型化数组不同，DataView 允许以各种不同的数据类型（如 8 位整数、16 位整数、32 位浮点数等）访问 ArrayBuffer 中的数据，并且可以控制字节序（大端或小端）。

### 主要特点

1. **灵活的数据类型**：可以在同一个缓冲区中读写不同类型的数据
2. **字节序控制**：可以指定使用大端字节序或小端字节序
3. **精确的字节偏移**：可以在任意字节位置读写数据，不受数据类型对齐限制
4. **适合处理混合数据格式**：如二进制文件格式、网络协议等

## 创建 DataView

### 基本语法

```javascript
new DataView(buffer [, byteOffset [, byteLength]])

参数说明：

buffer：一个已经存在的 ArrayBuffer 对象
byteOffset（可选）：视图开始的字节偏移量，默认为 0
byteLength（可选）：视图包含的字节长度，默认为从 byteOffset 到 buffer 末尾的长度

创建示例

// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);

// 创建一个覆盖整个 buffer 的 DataView
const view1 = new DataView(buffer);
console.log(view1.byteLength); // 输出: 16

// 创建一个从第 8 字节开始的 DataView
const view2 = new DataView(buffer, 8);
console.log(view2.byteLength); // 输出: 8

// 创建一个从第 4 字节开始，长度为 4 字节的 DataView
const view3 = new DataView(buffer, 4, 4);
console.log(view3.byteLength); // 输出: 4
console.log(view3.byteOffset); // 输出: 4

DataView 的属性

DataView 对象有以下几个只读属性：

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer, 2, 8);

console.log(view.buffer);      // 输出: ArrayBuffer { byteLength: 16 }
console.log(view.byteLength);  // 输出: 8
console.log(view.byteOffset);  // 输出: 2

buffer：引用的 ArrayBuffer 对象
byteLength：视图涵盖的字节长度
byteOffset：视图在 ArrayBuffer 中的起始偏移量

读取数据方法

DataView 提供了一系列方法来读取不同类型的数据：

方法	数据类型	字节大小
getInt8()	有符号 8 位整数	1
getUint8()	无符号 8 位整数	1
getInt16()	有符号 16 位整数	2
getUint16()	无符号 16 位整数	2
getInt32()	有符号 32 位整数	4
getUint32()	无符号 32 位整数	4
getBigInt64()	有符号 64 位整数	8
getBigUint64()	无符号 64 位整数	8
getFloat32()	32 位浮点数	4
getFloat64()	64 位浮点数	8

所有这些方法都接受一个字节偏移量参数，指定从哪个位置开始读取数据。除了 getInt8() 和 getUint8() 外，其他方法还接受一个可选的布尔参数，用于指定是否使用小端字节序（默认为大端字节序）。

读取数据示例

const buffer = new ArrayBuffer(16);
const view = new DataView(buffer);

// 写入一些测试数据
view.setInt32(0, 42);
view.setFloat32(4, 3.14);
view.setUint8(8, 255);

// 读取数据
console.log(view.getInt32(0));       // 输出: 42
console.log(view.getFloat32(4));     // 输出: 3.140000104904175
console.log(view.getUint8(8));       // 输出: 255

// 使用不同的字节序
view.setInt16(10, 0x1234);
console.log(view.getInt16(10));      // 输出: 4660 (0x1234，大端字节序)
console.log(view.getInt16(10, true)); // 输出: 13330 (0x3412，小端字节序)

写入数据方法

DataView 提供了一系列方法来写入不同类型的数据：

方法	数据类型	字节大小
setInt8()	有符号 8 位整数	1
setUint8()	无符号 8 位整数	1
setInt16()	有符号 16 位整数	2
setUint16()	无符号 16 位整数	2
setInt32()	有符号 32 位整数	4
setUint32()	无符号 32 位整数	4
setBigInt64()	有符号 64 位整数	8
setBigUint64()	无符号 64 位整数	8
setFloat32()	32 位浮点数	4
setFloat64()	64 位浮点数	8

这些方法接受一个字节偏移量参数和一个要写入的值。除了 setInt8() 和 setUint8() 外，其他方法还接受一个可选的布尔参数，用于指定是否使用小端字节序。

写入数据示例

const buffer = new ArrayBuffer(24);
const view = new DataView(buffer);

// 写入不同类型的数据
view.setInt8(0, -128);
view.setUint8(1, 255);
view.setInt16(2, -32768);
view.setUint16(4, 65535);
view.setInt32(6, -2147483648);
view.setUint32(10, 4294967295);
view.setFloat32(14, 3.14);
view.setFloat64(18, 1.7976931348623157e+308);

// 使用小端字节序写入
view.setInt16(2, -32768, true);

// 读取写入的数据
console.log(view.getInt8(0));        // 输出: -128
console.log(view.getUint8(1));       // 输出: 255
console.log(view.getInt16(2));       // 输出: -32768
console.log(view.getUint16(4));      // 输出: 65535
console.log(view.getInt32(6));       // 输出: -2147483648
console.log(view.getUint32(10));     // 输出: 4294967295
console.log(view.getFloat32(14));    // 输出: 3.140000104904175
console.log(view.getFloat64(18));    // 输出: 1.7976931348623157e+308

DataView 与类型化数组的比较

功能比较

const buffer = new ArrayBuffer(16);

// 使用 DataView
const dataView = new DataView(buffer);
dataView.setInt32(0, 42, true); // 小端字节序
dataView.setFloat32(4, 3.14, true);

// 使用类型化数组
const int32Array = new Int32Array(buffer, 0, 1);
const float32Array = new Float32Array(buffer, 4, 1);

console.log(int32Array[0]);    // 输出: 42
console.log(float32Array[0]);  // 输出: 3.140000104904175

// DataView 可以混合不同类型
dataView.setUint8(8, 255);
dataView.setInt16(9, -32768);

// 类型化数组需要创建不同的视图
const uint8Array = new Uint8Array(buffer, 8, 1);
const int16Array = new Int16Array(buffer, 9, 1);

console.log(uint8Array[0]);    // 输出: 255
console.log(int16Array[0]);    // 可能不是 -32768，因为偏移量不是 2 的倍数

何时使用 DataView

处理混合数据类型：当需要在同一个缓冲区中处理多种不同类型的数据时
需要控制字节序：当处理来自不同平台的数据，需要明确指定字节序时
处理非对齐访问：当需要在任意字节偏移处读写数据时
解析复杂的二进制格式：如文件格式、网络协议等

何时使用类型化数组

处理同质数据：当所有数据都是相同类型时
需要数组操作：当需要使用数组方法（如 map、filter、forEach 等）时
性能关键场景：当性能是首要考虑因素，且不需要混合数据类型或控制字节序时
与其他 API 集成：当与 Canvas、WebGL 等 API 集成时

实际应用场景

1. 解析二进制文件格式

async function parsePNGHeader(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const view = new DataView(buffer);
  
  // PNG 文件头的前 8 个字节是固定的签名
  const signature = [];
  for (let i = 0; i < 8; i++) {
    signature.push(view.getUint8(i));
  }
  
  // 检查签名是否匹配 PNG 格式
  const isPNG = signature.join(',') === '137,80,78,71,13,10,26,10';
  
  if (!isPNG) {
    throw new Error('不是有效的 PNG 文件');
  }
  
  // 解析 IHDR 块（位于签名之后）
  const ihdrLength = view.getUint32(8); // 应该是 13
  const ihdrType = String.fromCharCode(
    view.getUint8(12),
    view.getUint8(13),
    view.getUint8(14),
    view.getUint8(15)
  ); // 应该是 "IHDR"
  
  if (ihdrType !== 'IHDR') {
    throw new Error('PNG 文件格式错误');
  }
  
  // 解析图像尺寸（位于 IHDR 块中）
  const width = view.getUint32(16);
  const height = view.getUint32(20);
  const bitDepth = view.getUint8(24);
  const colorType = view.getUint8(25);
  
  return {
    width,
    height,
    bitDepth,
    colorType,
    isPNG
  };
}

// 使用示例
parsePNGHeader('https://example.com/image.png')
  .then(info => {
    console.log('PNG 信息:', info);
  })
  .catch(error => {
    console.error('解析失败:', error);
  });

2. 网络协议解析

function parseUDPPacket(buffer) {
  const view = new DataView(buffer);
  
  // UDP 头部结构:
  // - 源端口 (2 字节)
  // - 目标端口 (2 字节)
  // - 长度 (2 字节)
  // - 校验和 (2 字节)
  
  const sourcePort = view.getUint16(0);
  const destPort = view.getUint16(2);
  const length = view.getUint16(4);
  const checksum = view.getUint16(6);
  
  // 提取数据部分
  const data = new Uint8Array(buffer, 8);
  
  return {
    sourcePort,
    destPort,
    length,
    checksum,
    data
  };
}

// 创建一个模拟的 UDP 数据包
function createMockUDPPacket() {
  const buffer = new ArrayBuffer(20); // 8 字节头部 + 12 字节数据
  const view = new DataView(buffer);
  
  // 设置头部
  view.setUint16(0, 53); // 源端口 (DNS)
  view.setUint16(2, 12345); // 目标端口
  view.setUint16(4, 20); // 总长度
  view.setUint16(6, 0xFFFF); // 校验和
  
  // 设置一些数据
  const dataView = new Uint8Array(buffer, 8);
  for (let i = 0; i < dataView.length; i++) {
    dataView[i] = 65 + i; // ASCII 'A', 'B', 'C', ...
  }
  
  return buffer;
}

// 测试
const packet = createMockUDPPacket();
const parsed = parseUDPPacket(packet);
console.log('解析的 UDP 数据包:', parsed);
console.log('数据内容:', String.fromCharCode.apply(null, parsed.data));

3. 自定义二进制格式

// 创建一个自定义二进制格式
function createCustomBinaryFormat(data) {
  // 假设我们的格式包含:
  // - 4 字节头部标识 "DATA"
  // - 4 字节版本号 (Uint32)
  // - 8 字节时间戳 (BigInt64)
  // - 2 字节项目数量 (Uint16)
  // - 对于每个项目:
  //   - 2 字节项目类型 (Uint16)
  //   - 4 字节项目长度 (Uint32)
  //   - N 字节项目数据
  
  // 计算总大小
  let totalSize = 4 + 4 + 8 + 2; // 头部大小
  for (const item of data) {
    totalSize += 2 + 4 + item.data.length;
  }
  
  const buffer = new ArrayBuffer(totalSize);
  const view = new DataView(buffer);
  const uint8View = new Uint8Array(buffer);
  
  // 写入头部标识
  uint8View[0] = 68; // 'D'
  uint8View[1] = 65; // 'A'
  uint8View[2] = 84; // 'T'
  uint8View[3] = 65; // 'A'
  
  // 写入版本号
  view.setUint32(4, 1, true); // 版本 1, 小端字节序
  
  // 写入时间戳 (当前时间)
  view.setBigInt64(8, BigInt(Date.now()), true);
  
  // 写入项目数量
  view.setUint16(16, data.length, true);
  
  // 写入项目数据
  let offset = 18;
  for (const item of data) {
    // 写入项目类型
    view.setUint16(offset, item.type, true);
    offset += 2;
    
    // 写入项目长度
    view.setUint32(offset, item.data.length, true);
    offset += 4;
    
    // 写入项目数据
    for (let i = 0; i < item.data.length; i++) {
      uint8View[offset + i] = item.data[i];
    }
    offset += item.data.length;
  }
  
  return buffer;
}

// 解析自定义二进制格式
function parseCustomBinaryFormat(buffer) {
  const view = new DataView(buffer);
  const uint8View = new Uint8Array(buffer);
  
  // 读取头部标识
  const signature = String.fromCharCode(
    uint8View[0],
    uint8View[1],
    uint8View[2],
    uint8View[3]
  );
  
  if (signature !== 'DATA') {
    throw new Error('无效的文件格式');
  }
  
  // 读取版本号
  const version = view.getUint32(4, true);
  
  // 读取时间戳
  const timestamp = view.getBigInt64(8, true);
  
  // 读取项目数量
  const itemCount = view.getUint16(16, true);
  
  // 读取项目
  const items = [];
  let offset = 18;
  
  for (let i = 0; i < itemCount; i++) {
    // 读取项目类型
    const type = view.getUint16(offset, true);
    offset += 2;
    
    // 读取项目长度
    const length = view.getUint32(offset, true);
    offset += 4;
    
    // 读取项目数据
    const data = new Uint8Array(buffer, offset, length);
    offset += length;
    
    items.push({
      type,
      data: Array.from(data) // 转换为普通数组以便于显示
    });
  }
  
  return {
    signature,
    version,
    timestamp: Number(timestamp),
    itemCount,
    items
  };
}

// 测试
const testData = [
  { type: 1, data: new Uint8Array([1, 2, 3, 4]) },
  { type: 2, data: new Uint8Array([65, 66, 67]) } // "ABC"
];

const binaryData = createCustomBinaryFormat(testData);
const parsedData = parseCustomBinaryFormat(binaryData);

console.log('解析的自定义格式:', parsedData);

字节序（Endianness）处理

字节序是指多字节数据在内存中的存储顺序。DataView 的一个主要优势是可以明确控制字节序。

大端字节序 vs 小端字节序

大端字节序（Big-Endian）：最高有效字节存储在最低的内存地址
小端字节序（Little-Endian）：最低有效字节存储在最低的内存地址

function demonstrateEndianness() {
  const buffer = new ArrayBuffer(4);
  const view = new DataView(buffer);
  const value = 0x12345678;
  
  // 以大端字节序写入
  view.setUint32(0, value, false); // false 表示大端字节序
  
  // 查看各个字节
  const bigEndianBytes = [];
  for (let i = 0; i < 4; i++) {
    bigEndianBytes.push(view.getUint8(i).toString(16).padStart(2, '0'));
  }
  console.log('大端字节序:', bigEndianBytes.join(' ')); // 输出: "12 34 56 78"
  
  // 以小端字节序写入
  view.setUint32(0, value, true); // true 表示小端字节序
  
  // 查看各个字节
  const littleEndianBytes = [];
  for (let i = 0; i < 4; i++) {
    littleEndianBytes.push(view.getUint8(i).toString(16).padStart(2, '0'));
  }
  console.log('小端字节序:', littleEndianBytes.join(' ')); // 输出: "78 56 34 12"
  
  // 检测系统的字节序
  const systemEndianness = (() => {
    const buffer = new ArrayBuffer(2);
    const uint16 = new Uint16Array(buffer);
    const uint8 = new Uint8Array(buffer);
    uint16[0] = 0x1234;
    return uint8[0] === 0x34 ? '小端' : '大端';
  })();
  
  console.log(`当前系统使用${systemEndianness}字节序`);
}

demonstrateEndianness();

跨平台兼容性

在处理来自不同平台的二进制数据时，明确指定字节序非常重要：

function processNetworkData(buffer) {
  const view = new DataView(buffer);
  
  // 网络字节序通常是大端字节序
  const protocolVersion = view.getUint16(0, false); // 明确使用大端字节序
  const messageType = view.getUint8(2);
  const messageLength = view.getUint32(3, false);
  
  console.log('协议版本:', protocolVersion);
  console.log('消息类型:', messageType);
  console.log('消息长度:', messageLength);
  
  // 处理消息内容...
}

性能考虑

DataView vs 类型化数组性能比较

function performanceComparison() {
  const buffer = new ArrayBuffer(1024 * 1024); // 1MB
  const dataView = new DataView(buffer);
  const int32Array = new Int32Array(buffer);
  const float32Array = new Float32Array(buffer);
  
  // 使用 DataView 写入
  console.time('DataView 写入');
  for (let i = 0; i < buffer.byteLength / 4; i++) {
    dataView.setInt32(i * 4, i, true);
  }
  console.timeEnd('DataView 写入');
  
  // 使用类型化数组写入
  console.time('Int32Array 写入');
  for (let i = 0; i < int32Array.length; i++) {
    int32Array[i] = i;
  }
  console.timeEnd('Int32Array 写入');
  
  // 使用 DataView 读取
  console.time('DataView 读取');
  let sumDV = 0;
  for (let i = 0; i < buffer.byteLength / 4; i++) {
    sumDV += dataView.getInt32(i * 4, true);
  }
  console.timeEnd('DataView 读取');
  
  // 使用类型化数组读取
  console.time('Int32Array 读取');
  let sumTA = 0;
  for (let i = 0; i < int32Array.length; i++) {
    sumTA += int32Array[i];
  }
  console.timeEnd('Int32Array 读取');
  
  console.log('DataView 总和:', sumDV);
  console.log('Int32Array 总和:', sumTA);
}

// 注意: 在大多数情况下，类型化数组的性能会优于 DataView
// 但 DataView 提供了更大的灵活性，特别是在处理混合数据类型和控制字节序时

何时选择 DataView

当需要处理混合数据类型时
当需要明确控制字节序时
当需要在非对齐偏移处读写数据时
当处理复杂的二进制格式时

何时选择类型化数组

当处理单一类型的大量数据时
当性能是首要考虑因素时
当不需要控制字节序时
当需要使用数组方法（如 map、filter 等）时

最佳实践

1. 明确指定字节序

// 始终明确指定字节序，即使使用系统默认字节序
// 这样可以使代码在不同平台上行为一致
function readData(buffer) {
  const view = new DataView(buffer);
  
  // 明确指定字节序
  const value1 = view.getInt32(0, true); // 小端字节序
  const value2 = view.getInt32(4, false); // 大端字节序
  
  return { value1, value2 };
}

2. 结合 DataView 和类型化数组

function processComplexData(buffer) {
  // 使用 DataView 处理头部的混合数据类型
  const headerView = new DataView(buffer, 0, 16);
  const version = headerView.getUint16(0, true);
  const flags = headerView.getUint8(2);
  const count = headerView.getUint32(4, true);
  const timestamp = headerView.getFloat64(8, true);
  
  // 使用类型化数组处理大量同质数据
  const dataOffset = 16;
  const dataLength = buffer.byteLength - dataOffset;
  const dataView = new Float32Array(buffer, dataOffset, dataLength / 4);
  
  // 处理数据...
  const sum = dataView.reduce((acc, val) => acc + val, 0);
  const average = sum / dataView.length;
  
  return {
    header: { version, flags, count, timestamp },
    dataStats: { sum, average }
  };
}

3. 处理边界情况

function safeDataViewAccess(buffer, byteOffset, accessor, littleEndian = true) {
  const view = new DataView(buffer);
  
  // 检查边界
  if (byteOffset < 0 || byteOffset >= buffer.byteLength) {
    throw new RangeError(`偏移量 ${byteOffset} 超出缓冲区范围`);
  }
  
  // 检查数据类型大小
  let byteSize;
  switch (accessor) {
    case 'Int8':
    case 'Uint8':
      byteSize = 1;
      break;
    case 'Int16':
    case 'Uint16':
      byteSize = 2;
      break;
    case 'Int32':
    case 'Uint32':
    case 'Float32':
      byteSize = 4;
      break;
    case 'BigInt64':
    case 'BigUint64':
    case 'Float64':
      byteSize = 8;
      break;
    default:
      throw new Error(`未知的访问器类型: ${accessor}`);
  }
  
  if (byteOffset + byteSize > buffer.byteLength) {
    throw new RangeError(`读取 ${accessor} 需要 ${byteSize} 字节，但从偏移量 ${byteOffset} 开始只有 ${buffer.byteLength - byteOffset} 字节可用`);
  }
  
  // 调用适当的 getter 方法
  const methodName = `get${accessor}`;
  
  // 对于 8 位类型，不需要字节序参数
  if (byteSize === 1) {
    return view[methodName](byteOffset);
  }
  
  return view[methodName](byteOffset, littleEndian);
}

// 使用示例
try {
  const buffer = new ArrayBuffer(10);
  const value = safeDataViewAccess(buffer, 6, 'Float32');
  console.log('值:', value);
} catch (error) {
  console.error('安全访问错误:', error.message);
}

总结

DataView 是 JavaScript 中处理二进制数据的强大工具，它提供了比类型化数组更灵活的接口，允许在同一个 ArrayBuffer 中处理不同类型的数据，并且可以明确控制字节序。

主要优点包括：

灵活性：可以在同一个缓冲区中读写不同类型的数据
字节序控制：可以明确指定大端或小端字节序
精确的字节偏移：可以在任意字节位置读写数据
适合复杂格式：非常适合处理二进制文件格式
跨平台兼容性：通过明确控制字节序，确保在不同平台上的一致性

虽然 DataView 在某些情况下可能比类型化数组性能稍低，但它提供的灵活性和精确控制使其成为处理复杂二进制数据的理想选择。在开发需要解析或生成二进制格式的应用程序时，DataView 是不可或缺的工具。