DataView

DataView 视图是一个可以从 二进制ArrayBuffer 对象中读写多种数值类型的底层接口,使用它时,不用考虑不同平台的字节序问题。

语法

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

参数

buffer
一个 已经存在的 ArrayBufferSharedArrayBuffer 对象, DataView 对象的数据源。
byteOffset 可选
DataView 对象的第一个字节在 buffer 中的字节偏移。如果未指定,则默认从第一个字节开始。
byteLength 可选
此 DataView 对象的字节长度。如果未指定,这个视图的长度将匹配buffer的长度。

返回值

一个表示指定数据缓存区的新DataView 对象。(这句话也许不是非常有助于说明清楚)

你可以把返回的对象想象成一个二进制字节缓存区 array buffer 的“解释器”——它知道如何在读取或写入时正确地转换字节码。这意味着它能在二进制层面处理整数与浮点转化、字节顺序等其他有关的细节问题。

异常

RangeError
如果  byteOffset 或者  byteLength 参数的值导致视图超出了 buffer 的结束位置就会抛出此异常。
例如,假设 buffer (缓冲对象)是 16 字节长度, byteOffset 参数为 8, byteLength 参数为 10,这个错误就会抛出,这是因为结果视图试图超出 buffer 对象的总长度 2 个字节。

描述

Endianness(字节序)

需要多个字节来表示的数值,在存储时其字节在内存中的相对顺序依据平台架构的不同而不同,参照 Endianness。而使用 DataView 的访问函数时,不需要考虑平台架构中所使用的是哪种字节序。

var littleEndian = (function() {
  var buffer = new ArrayBuffer(2);
  new DataView(buffer).setInt16(0, 256, true /* 设置值时,使用小端字节序 */);
  // Int16Array 使用系统字节序(由此可以判断系统字节序是否为小端字节序)
  return new Int16Array(buffer)[0] === 256;
})();
console.log(littleEndian); // 返回 true 或 false

64 位整数值

因为 JavaScript 目前不包含对 64 位整数值支持的标准,所以 DataView 不提供原生的 64 位操作。作为变通,您可以实现自己的 getUint64() 函数,以获得精度高达 Number.MAX_SAFE_INTEGER 的值,可以满足某些特定情况的需求。

function getUint64(dataview, byteOffset, littleEndian) {
  // 将 64 位整数值分成两份 32 位整数值
  const left =  dataview.getUint32(byteOffset, littleEndian);
  const right = dataview.getUint32(byteOffset+4, littleEndian);

  // 合并两个 32 位整数值
  const combined = littleEndian? left + 2**32*right : 2**32*left + right;

  if (!Number.isSafeInteger(combined))
    console.warn(combined, 'exceeds MAX_SAFE_INTEGER. Precision may be lost');

  return combined;
}

或者,如果需要填满 64 位,可以创建一个 BigInt。此外,尽管原生 BigInt 要比用户端的库中模拟的 BigInt 快得多,但在 JavaScript 中,BigInt 总是比 32 位整数慢得多,这是因为 BigInt 的大小是可变的。

const BigInt = window.BigInt, bigThirtyTwo = BigInt(32), bigZero = BigInt(0);
function getUint64BigInt(dataview, byteOffset, littleEndian) {
  // 将 64 位整数值分成两份 32 位整数值
  const left = BigInt(dataview.getUint32(byteOffset|0, !!littleEndian)>>>0);
  const right = BigInt(dataview.getUint32((byteOffset|0) + 4|0, !!littleEndian)>>>0);

  // 合并两个 32 位整数值并返回
  return littleEndian ? (right<<bigThirtyTwo)|left : (left<<bigThirtyTwo)|right;
}

属性

所有 DataView 实例都继承自 DataView.prototype,并且允许向 DataView 对象中添加额外属性。

DataView.prototype.constructor
指定用来生成原型的构造函数.初始化值是标准内置DataView构造器.
DataView.prototype.buffer 只读
被视图引入的 ArrayBuffer.创建实例的时候已固化因此是只读的.
DataView.prototype.byteLength 只读
ArrayBuffer中读取的字节长度. 创建实例的时候已固化因此是只读的.
DataView.prototype.byteOffset 只读
ArrayBuffer读取时的偏移字节长度. 创建实例的时候已固化因此是只读的.

方法

DataView.prototype.getInt8()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个8-bit数(一个字节).
DataView.prototype.getUint8()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个8-bit数(无符号字节).
DataView.prototype.getInt16()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个16-bit数(短整型).
DataView.prototype.getUint16()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个16-bit数(无符号短整型).
DataView.prototype.getInt32()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(长整型).
DataView.prototype.getUint32()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(无符号长整型).
DataView.prototype.getFloat32()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个32-bit数(浮点型).
DataView.prototype.getFloat64()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处获取一个64-bit数(双精度浮点型).

DataView.prototype.setInt8()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个8-bit数(一个字节).
DataView.prototype.setUint8()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个8-bit数(无符号字节).
DataView.prototype.setInt16()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个16-bit数(短整型).
DataView.prototype.setUint16()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个16-bit数(无符号短整型).
DataView.prototype.setInt32()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(长整型).
DataView.prototype.setUint32()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(无符号长整型).
DataView.prototype.setFloat32()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个32-bit数(浮点型).
DataView.prototype.setFloat64()
DataView起始位置以byte为计数的指定偏移量(byteOffset)处储存一个64-bit数(双精度浮点型).

示例

var buffer = new ArrayBuffer(16);
var view = new DataView(buffer, 0);

view.setInt16(1, 42);
view.getInt16(1); // 42

规范

规范名称 状态 注释
ECMAScript Latest Draft (ECMA-262)
DataView
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
DataView
Standard ECMA 标准中的初始版本
Typed Array Specification Obsolete Superseded by ECMAScript 6

浏览器兼容性

Update compatibility data on GitHub
Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
DataView Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
buffer Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
byteLength Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
byteOffset Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getBigInt64 Chrome Full support 67 Edge No support No Firefox Full support 68 IE No support No Opera Full support 54 Safari No support No WebView Android Full support 67 Chrome Android Full support 67 Firefox Android Full support 68 Opera Android Full support 48 Safari iOS No support No Samsung Internet Android Full support 9.0 nodejs Full support 10.4.0
getBigUint64 Chrome Full support 67 Edge No support No Firefox Full support 68 IE No support No Opera Full support 54 Safari No support No WebView Android Full support 67 Chrome Android Full support 67 Firefox Android Full support 68 Opera Android Full support 48 Safari iOS No support No Samsung Internet Android Full support 9.0 nodejs Full support 10.4.0
getFloat32 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getFloat64 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getInt16 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getInt32 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getInt8 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getUint16 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getUint32 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
getUint8 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
DataView() without new throws Chrome Full support 11 Edge Full support 13 Firefox Full support 40 IE No support No Opera Full support Yes Safari ? WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 40 Opera Android Full support Yes Safari iOS ? Samsung Internet Android Full support 1.0 nodejs Full support 0.12
prototype Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setBigInt64 Chrome Full support 67 Edge No support No Firefox Full support 68 IE No support No Opera Full support 54 Safari No support No WebView Android Full support 67 Chrome Android Full support 67 Firefox Android Full support 68 Opera Android Full support 48 Safari iOS No support No Samsung Internet Android Full support 9.0 nodejs Full support 10.4.0
setBigUint64 Chrome Full support 67 Edge No support No Firefox Full support 68 IE No support No Opera Full support 54 Safari No support No WebView Android Full support 67 Chrome Android Full support 67 Firefox Android Full support 68 Opera Android Full support 48 Safari iOS No support No Samsung Internet Android Full support 9.0 nodejs Full support 10.4.0
setFloat32 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setFloat64 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setInt16 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setInt32 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setInt8 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setUint16 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setUint32 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
setUint8 Chrome Full support 9 Edge Full support 12 Firefox Full support 15 IE Full support 10 Opera Full support 12.1 Safari Full support 5.1 WebView Android Full support 4 Chrome Android Full support 18 Firefox Android Full support 15 Opera Android Full support 12.1 Safari iOS Full support 4.2 Samsung Internet Android Full support Yes nodejs Full support Yes
SharedArrayBuffer accepted as buffer Chrome Full support 60 Edge No support No Firefox Full support 55 IE No support No Opera Full support 47 Safari ? WebView Android Full support 60 Chrome Android Full support 60 Firefox Android Full support 55 Opera Android ? Safari iOS ? Samsung Internet Android Full support 8.0 nodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

兼容性提示

从 FireFox 40 开始,DataView 对象需要通过 TypeError 异常。

var dv = DataView(buffer, 0); 
// 抛出异常,错误信息翻译为:禁止在不用 new 的情况下直接调用 DataView 的构造函数。
// TypeError: calling a builtin DataView constructor without new is forbidden
var dv = new DataView(buffer, 0);

请参阅

  • jDataView:DataView 的垫片(polyfill)库,使其能够用于所有浏览器及 Node.js 环境。同时,该库还对 DataView 进行了一些扩展。
  • ArrayBuffer
  • SharedArrayBuffer