欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6 入门系列 ArrayBuffer

程序员文章站 2022-10-25 18:13:35
由来 "推荐在这里阅读" js操作二进制数据三兄弟 ArrayBuffer对象, TypeArray视图和DataView视图 它们都以数组的语法处理二进制数据,所以统称为二进制数组 ::: tip 二进制数组并不是真正的数组,而是类似数组的对象 ::: 设计的目的 与WebGL项目有关,WebGL ......

由来

推荐在这里阅读

js操作二进制数据三兄弟

arraybuffer对象, typearray视图和dataview视图

它们都以数组的语法处理二进制数据,所以统称为二进制数组
::: tip
二进制数组并不是真正的数组,而是类似数组的对象
:::

设计的目的

与webgl项目有关,webgl是浏览器和显卡之间的通信接口,

利用二进制数据通信可以大大提升脚本性能

概念

  • arraybuffer: 原始的二进制数据
  • typearray: 用于读写简单类型的二进制数据
  • dataview: 用于读写复杂类型的二进制数据
  • typearray支持的数据类型
数据类型 字节长度 含义
int8 1 8 位带符号整数
uint8 1 8 位不带符号整数
uint8c 1 8 位不带符号整数(自动过滤溢出)
int16 2 16 位带符号整数
uint16 2 16 位不带符号整数
int32 4 32 位带符号整数
uint32 4 32 位不带符号的整数
float32 4 32 位浮点数数
float64 8 64 位浮点数(自动过滤溢出)

用途

在浏览器中

以下几个aip用到了二进制数组操作二进制数据

  • file api
    • filereader可以使用readasarraybuffer(file)读取文件
  • xmlhttprequest
    • ajax的返回值可以是arraybuffer对象
  • fetch api
    • fetch取回的数据就是arraybuffer对象
  • canvas
    js{1} const canvas = document.getelementbyid('mycanvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); const uint8clampedarray = imagedata.data;
    • 上面取到的是 一种针对canvas元素的专有类型unit8clampedarray。
    • 这个视图类型专门针对颜色,把每个字节解读为无符号8位整数,只能取值0 - 255
  • websockets
    • 通过arraybuffer 发送或者接收二进制数据
    let socket = new websocket('ws://127.0.0.1:8081');
    socket.binarytype = 'arraybuffer';
    // wait until socket is open
    socket.addeventlistener('open', function (event) {
    // send binary data
    const typedarray = new uint8array(4);
    socket.send(typedarray.buffer);
    });
    // receive binary data
    socket.addeventlistener('message', function (event) {
    const arraybuffer = event.data;
    // ···
    });

arraybuffer 的api

/**
 * 生成了一段32字节的内存区域,
 * 每个字节的默认值都是0
 * 不能直接读写
 * 只能通过视图读写
 * @type {arraybuffer}
 */
const arrbuffer = new arraybuffer(32)

返回所分配的内存区域的字节长度

arraybuffer.prototype.bytelength

允许将内存区域的一部分复制生成一个新的arraybuffer对象

arraybuffer.prototype.slice()

用dataview视图读取

/**
 * 为arraybuffer创建视图
 * 以便读取
 * @type {dataview}
 */
const dataview = new dataview(arrbuffer)

/**
 * 以无符号8位整数格式读取第一个元素
 */
dataview.getuint8(0)  // 0

用typearray视图读取

每一种数据类型对应一个构造函数

返回整段内存区域对应的arraybuffer对象,只读

typearray.prototype.buffer

返回typearray数组占据的内存长度,单位位字节, 只读

typearray.prototype.bytelength

用于整段的复制,复制a的内容到b

// typearray.prototype.set()
const a  = new uint8array(8);
const b = new uint8array(8);
b.set(a);

:::tip
普通数组的操作方法和属性对typearray 数组完全适用
:::