ArrayBuffer

最近更新时间：2018年7月31日11:16:12

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

概述

ArrayBuffer对象，是以数组的语法处理二进制数据，称为二进制数组。ArrayBuffer对象、TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口，统称为二进制数组。
开发者以数组下标的形式，直接操作内存，大大增强了 JavaScript 处理二进制数据的能力，使得开发者通过 JavaScript 与操作系统的原生接口进行二进制通信。

详述

ArrayBuffer对象代表原始的二进制数据，TypedArray 视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。

ArrayBuffer对象

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
######ArrayBuffer对象的属性

• ArrayBuffer.length

ArrayBuffer 构造函数的 length 属性，其值为1。

• get ArrayBuffer[@@species]

返回 ArrayBuffer 的构造函数

• ArrayBuffer.prototype

通过 ArrayBuffer 的原型对象可以为所有 ArrayBuffer 对象添加属性

var obj = ArrayBuffer.prototype;
obj = {
	byteLength:num,
	constructor:fun,
	slice:fun,
	Symbol(Symbol.toStringTag):"ArrayBuffer",
	get byteLength:fun,
	__proto__:Object
}

引申：__proto__ 和 prototype

• JavaScript所有对象(对象，函数)都有__proto__ 属性，指向该对象的构造函数(Object())的原型对象

• ArrayBuffer.prototype.__proto__ = Object.prototype

• 只有函数function才具有 prototype 属性。这个属性是一个指针，指向一个对象，就是上面的obj = {}，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

var A = function () {};
var B ={};
console.log(A.prototype);//{constructor: ƒ}
console.log(B.prototype);//undefined

var A = function () {};
var B ={};
A.__proto__.__proto__ = B.__proto__ = Object.prototype

参考

ArrayBuffer 实例

• ArrayBuffer.prototype.constructor 属性
• ArrayBuffer.prototype.byteLength 属性 只读
• ArrayBuffer.prototype.slice() 方法

TypedArray 视图支持9种数据类型

普通数组的操作方法和属性，对 TypedArray 数组完全适用

数据类型	字节长度	含义
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 位浮点数

不同的视图类型，所能容纳的数值范围是确定的。超出这个范围，就会出现溢出。
比如，Uint8，8 位不带符号整数视图，只能容纳一个 8 位的二进制值，0-255，如果放入一个 9 位的值，就会溢出。

const uint8 = new Uint8Array(1);
uint8[0] = 256;
uint8[0] // 0
uint8[0] = -1;
uint8[0] // 255
uint8[0] = -2;
uint8[0] // 254
uint8[0] = -3;
uint8[0] // 253

TypedArray 实例的属性

• TypedArray.prototype.buffer 只读

TypedArray 实例的buffer属性，返回整段内存区域对应的ArrayBuffer对象。该属性为只读属性。

• TypedArray.prototype.byteLength 只读 字节长度

• TypedArray.prototype.byteOffset 只读 从底层ArrayBuffer对象的哪个字节开始

• TypedArray.prototype.length 只读 成员长度

TypedArray 实例的方法

• TypedArray.prototype.set() 将一段内容完全复制到另一段内存

• TypedArray.prototype.subarray() 对于 TypedArray 数组的一部分，再建立一个新的视图

• TypedArray.prototype.slice()

• TypedArray.of()

• TypedArray.from()

DataView 视图支持8种数据类型

DataView视图不支持Uint8C

ArrayBuffer读写

ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。

• 基础

const buf = new ArrayBuffer(32);//创建一段 32 字节的内存区域，每个字节的值默认都是 0
const buffer = new Uint8Array(buf);//建立 8 位不带符号整数

//可以接受普通数组作为参数，直接分配内存生成底层的ArrayBuffer实例，并同时完成对这段内存的赋值
const typedArray = new Uint8Array([0,1,2]);
typedArray.length // 3
typedArray[0] = 5;
typedArray // [5, 1, 2]

• 十六进制字符串存入ArrayBuffer的方案

var hexStr = 'AA5504B10000B5';
var typedArray = new Uint8Array(hexStr.match(/[\da-f]{2}/gi).map(function (item) {
  return parseInt(item, 16)
}))
var buffer = typedArray.buffer;
/*
/[\da-f]{2}/gi 匹配包含2个连续的在0123456789abcdef中序列的字符串
hex.match(/[\da-f]{2}/gi) ["AA", "55", "04", "B1", "00", "00", "B5"]
hex.match(/[\da-f]{2}/gi).map((item) => parseInt(item, 16));  [170, 85, 4, 177, 0, 0, 181]
hex.match(/[\da-f]{2}/gi).map((item) =>{return parseInt(item, 16)});  [170, 85, 4, 177, 0, 0, 181]
*/

JavaScript 类型数组

为了达到最大的灵活性和效率，JavaScript 类型数组（Typed Arrays）将实现拆分为缓冲和视图两部分。一个缓冲（由 ArrayBuffer 对象实现）描述的是一个数据块。缓冲没有格式可言，并且不提供机制访问其内容。为了访问在缓冲对象中包含的内存，你需要使用视图。视图提供了上下文 — 即数据类型、起始偏移量和元素数 — 将数据转换为实际有类型的数组。

参考

参考一
参考二
参考三

感谢阅读，欢迎评论^-^

打赏我吧^-^