如何向 ArrayBuffer 写入 Uint64 数据

ad6623 发布于2019-08-26 10:32 / 1522人阅读

摘要：由于这个原因，在一些需要更精确运算的应用场景中，精度就不够了，例如需要把位数字写入到数组中。但是这又如何在中读写位数据操作中位数据的方案写一个，在项目中引入，以下例子为使用方式与类似使用的得出的结果应该与原生方法保持一致的。

JS 的 Uint53

JS 的 Number 精度只有「-2^52 ~ 2^52 - 1」，可以通过 Number.MAX_SAFE_INTEGER 查看 JS 的安全运算范围。

由于这个原因，在一些需要更精确运算的应用场景中，JS Number 精度就不够了，例如需要把 64 位数字写入到 buffer 数组中。

那怎么解决 JS 的精度问题？

使用 BigInt

在最新的 stage3 中，引入了 BigInt API，用于解决超出 JS Number 运算范围的精度问题。

打开浏览器的控制台输入

BigInt(0)
// 输出 0n

在数字后面加 n 就是 BigInt 类型。

有 BigInt API 可以轻松向 buffer 写入 64 位的数据

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

const offset = 0;
const littleEndian = true;

view.setBigUint64(offset, BigInt("123456789012412421521"), littleEndian);

console.log(view) // 刚好用 64 字节写满 8 位的 buffer

但是事情并没有那么一帆风顺，目前只有 Chrome 和 Firefox 等主流浏览器实现了，Safari 系列的 javascriptCore 引擎并不支持，需要用另外的方法兼容。

如何兼容不支持 BigInt 的 js 引擎？

使用 Chrome 团队出品的 JSBI

JSBI GitHub

可以兼容大数据运算的需求

import JSBI from "jsbi"

// 官方例子，用 JS 最大长度 + 2
const max = JSBI.BigInt(Number.MAX_SAFE_INTEGER);
console.log(String(max));
// → "9007199254740991"
const other = JSBI.BigInt("2");
const result = JSBI.add(max, other);
console.log(String(result));

恨简单的使用方式，完美兼容。

但是这又如何在 buffer 中读写 64 位数据？

操作 buffer 中 64 位数据的方案

写一个 polyfill，在项目中引入，以下例子为 TS

import JSBI from "jsbi";

declare global {
  interface DataView {
    setUint64: Function;
    getUint64: Function;
  }
}

DataView.prototype.setUint64 = function setUint64(
  byteOffset: number, value, littleEndian: boolean
) {
  if (typeof value === "bigint" && typeof this.setBigUint64 !== "undefined") {
    // the original native implementation for bigint
    this.setBigUint64(byteOffset, value, littleEndian);
  } else if (value.constructor === JSBI && typeof value.sign === "bigint" && typeof this.setBigUint64 !== "undefined") {
    // JSBI wrapping a native bigint
    this.setBigUint64(byteOffset, value.sign, littleEndian);
  } else if (value.constructor === JSBI) {
    // JSBI polyfill implementation
    const lowWord = value[0];
    let highWord = 0;
    if (value.length >= 2) {
      highWord = value[1];
    }
    this.setUint32(byteOffset + (littleEndian ? 0 : 4), lowWord, littleEndian);
    this.setUint32(byteOffset + (littleEndian ? 4 : 0), highWord, littleEndian);
  } else {
    throw TypeError("Value needs to be BigInt ot JSBI");
  }
};
DataView.prototype.getUint64 = function getUint64(byteOffset, littleEndian) {
  if (typeof this.getBigUint64 !== "undefined") {
    return this.getBigUint64(byteOffset, littleEndian);
  }
  let lowWord = 0;
  let highWord = 0;
  lowWord = this.getUint32(byteOffset + (littleEndian ? 0 : 4), littleEndian);
  highWord = this.getUint32(byteOffset + (littleEndian ? 4 : 0), littleEndian);
  const result = new JSBI(2, false);
  result.__setDigit(0, lowWord);
  result.__setDigit(1, highWord);
  return result;
};

使用方式与 BigInt 类似

import JSBI from "jsbi";

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

const offset = 0;
const littleEndian = true;

// 使用 polyfill 的 api
view.setUint64(offset, JSBI.BigInt("123456789012412421521"), littleEndian);

console.log(view) // 得出的结果应该与原生方法保持一致的。

参考

可以参考 little-chat IM 客户端的实现

GPU云服务器云服务器 uint64_t c语言向地址写入数据 js 向jsp 写入数据 js向input中写入数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106346.html

ES6学习笔记5-编程风格、二进制数组和SIMD

摘要：二进制数组由三类对象组成对象视图和视图。目前，视图一共包括种类型，每一种视图都是一种构造函数。位浮点数，长度个字节这个构造函数生成的数组，统称为视图。编程风格块级作用域 let 取代 var，在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。字符串静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。 // goo...

kumfo 2019-08-20 17:07 评论0 收藏0
基于 protobuf 协议实现高性能的 IM 客户端

摘要：涉及到计算机基础知识，例如字节缓冲大小端等。是指用多少位表示的整数，例如就是用位即一个字节表示的整数，二进制范围是，对应的十进制就是。开发时通讯双方或者多方终端都遵循协议。这里记录了使用 protobuf 协议与服务端数据交互的相关内容和知识。涉及到计算机基础知识，例如字节、buffer 缓冲、大小端等。字节 / Byte 1 字节代表了 8 位（bit）二进制，1 位就是 0...

ssshooter 2019-08-26 10:33 评论0 收藏0
ECMAScript6(7)：二进制数组

摘要：以上每个构造函数都对应如下形式的参数可以指定序列化其中到部分的二进制数据。的构造函数还接受另一个作为参数，开辟新内存复制其值，对原数组不构成影响，也不共用内存。这个部分如果没有C语言和计算机基础会比较难理解，如果实在理解不了可以收藏它，日后再看。二进制数组其实很早就有了，不过为了 WebGL 中，数据可以高效和显卡交换数据。分为3类： ArrayBuffer：代表内存中的一段二进...

brianway 2019-08-23 11:46 评论0 收藏0
自底向上的web数据操作指南

摘要：简介本篇文章主要探讨中的数据操作一直以来给人一种比较低能的感觉例如无法读取系统上的文件不能做一些底层的操作所以在页面上操作数据会交由服务器处理也就成了主流的做法但是很多人没有发现实际上以及在逐步增强这些功能现在我们就已经可以放心的在端进行文简介本篇文章主要探讨JavaScript中的数据操作. JavaScript一直以来给人一种比较低能的感觉,例如无法读取系统上的文件,不能做一些...

KavenFan 2019-08-23 15:14 评论0 收藏0
自底向上的web数据操作指南

摘要：简介本篇文章主要探讨中的数据操作一直以来给人一种比较低能的感觉例如无法读取系统上的文件不能做一些底层的操作所以在页面上操作数据会交由服务器处理也就成了主流的做法但是很多人没有发现实际上以及在逐步增强这些功能现在我们就已经可以放心的在端进行文简介本篇文章主要探讨JavaScript中的数据操作. JavaScript一直以来给人一种比较低能的感觉,例如无法读取系统上的文件,不能做一些...

Acceml 2019-08-02 14:14 评论0 收藏0