ArrayBuffer

秒速五厘米 2022-05-18 05:10 201阅读 0赞

###### *最近更新时间：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，这个属性包含了一个指针，指回原构造函数。

[参考][Link 1]

###### ArrayBuffer 实例 ######

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

#### TypedArray 视图支持9种数据类型 ####

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

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>字节长度</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Int8</td> 
   <td>1</td> 
   <td>8 位带符号整数</td> 
  </tr> 
  <tr> 
   <td>Uint8</td> 
   <td>1</td> 
   <td>8 位不带符号整数</td> 
  </tr> 
  <tr> 
   <td>Uint8C</td> 
   <td>1</td> 
   <td>8 位不带符号整数（自动过滤溢出）</td> 
  </tr> 
  <tr> 
   <td>Int16</td> 
   <td>2</td> 
   <td>16 位带符号整数</td> 
  </tr> 
  <tr> 
   <td>Uint16</td> 
   <td>2</td> 
   <td>16 位不带符号整数</td> 
  </tr> 
  <tr> 
   <td>Int32</td> 
   <td>4</td> 
   <td>32 位带符号整数</td> 
  </tr> 
  <tr> 
   <td>Uint32</td> 
   <td>4</td> 
   <td>32 位不带符号的整数</td> 
  </tr> 
  <tr> 
   <td>Float32</td> 
   <td>4</td> 
   <td>32 位浮点数</td> 
  </tr> 
  <tr> 
   <td>Float64</td> 
   <td>8</td> 
   <td>64 位浮点数</td> 
  </tr> 
 </tbody> 
</table>

> 不同的视图类型，所能容纳的数值范围是确定的。超出这个范围，就会出现溢出。  
> 比如，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的方案

#### JavaScript 类型数组 ####

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

[参考][Link 2]

[参考一][Link 3]  
[参考二][Link 4]  
[参考三][Link 5]

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

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Link 1]: http://www.cnblogs.com/smoothLily/p/4745856.html
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays
[Link 3]: http://es6.ruanyifeng.com/#docs/arraybuffer
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460