ES6 入门系列 ArrayBuffer

由来

推荐在这里阅读

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 数组完全适用
:::