当前位置： 移动技术网 > IT编程>开发语言>JavaScript > ES6 入门系列 ArrayBuffer

ES6 入门系列 ArrayBuffer

2019年08月23日  | 移动技术网IT编程  | 我要评论

由来

推荐在这里阅读

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网