DataView
视图是一个可以从 二进制ArrayBuffer
对象中读写多种数值类型的底层接口,使用它时,不用考虑不同平台的字节序问题。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
new DataView(buffer [, byteOffset [, byteLength]])
参数
-
buffer
-
一个 已经存在的
ArrayBuffer
或SharedArrayBuffer
对象,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 |
浏览器兼容性
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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