JS DataView

🌙
手机阅读
本文目录结构

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

// create an ArrayBuffer with a size in bytes
var buffer = new ArrayBuffer(16);

// Create a couple of views
var view1 = new DataView(buffer);
var view2 = new DataView(buffer,12,4); //from byte 12 for the next 4 bytes
view1.setInt8(12, 42); // put 42 in slot 12

console.log(view2.getInt8(0));
// expected output: 42

语法

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

参数

buffer

一个 ArrayBuffer 或 SharedArrayBuffer 对象,DataView 对象的数据源。

byteOffset 可选

此 DataView 对象的第一个字节在 buffer 中的偏移。如果不指定则默认从第一个字节开始。

byteLength 可选

此 DataView 对象的字节长度。如果不指定则默认与 buffer 的长度相同。

返回值

一个 DataView 对象用来呈现指定的缓存区数据。

你可以认为返回的对象是一个二进制的解释器——它知道在读写的时候如何正确的转化字节码。这意味着会在字节水平处理整数和浮点转化、字节顺序等其他详情。

异常

RangeError

如果由偏移(byteOffset)和字节长度(byteLength)计算得到的结束位置超出了 buffer 的长度,抛出此异常。 例如,如果缓冲区是 16 个字节的长度。byteOffset 是 8,byteLength 是 10,错误就会抛出,因为结果试图去呈现超出的 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-bit Integer Values(64 位整数)

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

function getUint64(dataview, byteOffset, littleEndian) {
  // split 64-bit number into two 32-bit (4-byte) parts
  const left =  dataview.getUint32(byteOffset, littleEndian);
  const right = dataview.getUint32(byteOffset+4, littleEndian);

  // combine the two 32-bit values
  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。

function getUint64BigInt(dataview, byteOffset, littleEndian) {
  // split 64-bit number into two 32-bit (4-byte) parts
  const left = dataview.getUint32(byteOffset, littleEndian);
  const right = dataview.getUint32(byteOffset + 4, littleEndian);

  // combine the two 32-bit values as their hex string representations
  const combined = littleEndian ?
    right.toString(16) + left.toString(16).padStart(8, '0') :
    left.toString(16) + right.toString(16).padStart(8, '0');

  return BigInt(`0x${combined}`);
}

属性

所有 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 dv = new DataView(buffer, 0);

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

规范

规范名称状态注释
Typed Array SpecificationObsolete已被 ECMAScript 6 取代
ECMAScript 2015 (6th Edition, ECMA-262)
DataView
StandardECMA 标准中的初始版本
ECMAScript Latest Draft (ECMA-262)
DataView
Draft

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang