JS中的定型数组与视图

Posted 2022-05-19 火腿肠烧烤大赛冠军

定型数组

了解定型数组前先复习一下基础知识：

1byte（又称为字节） = 8bit(又称为比特、位)
1kb = 1024byte;

前言

之所以要使用定型数组主要是因为WebGL的需求 因此在ES6中引入定型数组来解决这个问题，并提供更高性能的算术运算。所谓定型数组，就是将任何数字转换为一个包含数字比特的数组，随后就可以通过我们熟悉的JS数组方法来进一步处理
用人话说就是 js存储数字是以64位浮点格式存储，而一个字节仅需要8位 所以浪费太多了 新弄出来一个数据类型叫定型数组 这个数组可以存储数据 并且长度你可以自己定

使用方式

1. 创建数组缓冲区

let buffer = New ArrayBuffer(10) // 分配10字节

2. 可截取固定长度的缓冲区

let buffer = new ArrayBuffer(10); // 分配了 10 个字节
let buffer2 = buffer.slice(4, 6);
console.log(buffer2.byteLength); // 2

视图

数组缓冲区是内存中的一段地址，视图是用来操作内存的接口。视图可以操作数组缓冲区或缓冲区字节的子集，并按照其中一种数值型数据类型来读取和写入数据。DataView类型是一种通用的数组缓冲区视图，其支持所有8种数值型数据类型

使用方式

1. 创建
   let buffer = new ArrayBuffer(10),
   view = new DataView(buffer);
2. 读写
   各种数据类型的操作方式都差不多 get+类型 set+类型
   get方法接受两个参数：读取数据时偏移的字节数量和一个可选的布尔值，表示是否按照小端序进行读取(小端序是指最低有效字节位于字节0的字节顺序)。**set方法接受三个参数：**写入数据时偏移的比特数量、写入的值和一个可选的布尔值，表示是否按照小端序格式存储

getFloat32(byteOffset, littleEndian) 读取位于byteOffset后的float32类型数据
setFloat32(byteOffset,value,littleEndian) 在byteOffset处写入float32类型数据
getFloat64(byteOffset,littleEndian) 读取位于byteOffset后的float64类型数据
setFloat64(byteOffset,value,littleEndian) 在byteOffset处写入float64类型数据

视图是独立的，无论数据之前是通过何种方式存储的，都可在任意时刻读取或写入任意格式的数据。举个例子，写入两个int8类型的值，然后使用int16类型的方法也可以从缓冲区中读出这些值

特定的定型数组

定型数组操作只能在特定的数据类型上进行，例如，所有Int8Array的操作都使用int8类型的值。定型数组中元素的尺寸也取决于数组的类型，Int8Array中的元素占一个字节，而Float64Array中的每个元素占8字节。所幸的是，可以像正常数组一样通过数值型索引来访问元素，从而避免了调用DataView的set和get方法时的尴尬场面

定型数组与数组的相同点

• 兼容方法：
  copyWithin()
  entries()
  fill()
  filter()
  find()
  findIndex()
  forEach()
  indexOf()
  join()
  keys()
  lastIndexOf()
  map()
  reduce()
  reduceRight()
  reverse()
  slice()
  some()
  sort()
  values()

• 所有定型数组都含有静态of()方法和from()方法，运行效果分别与Array.of()方法和Array.from()方法相似，区别是定型数组的方法返回定型数组，而普通数组的方法返回普通数组

定型数组与数组的不同点

• 定型数组与普通数组最重要的差别是：定型数组不是普通数组。它不继承自Array，通过Array.isArray()方法检查定型数组返回的是false

let ints = new Int16Array([25, 50]);
console.log(ints instanceof Array); // false
console.log(Array.isArray(ints)); // false

• 当操作普通数组时，其可以变大变小，但定型数组却始终保持相同的尺寸。给定型数组中不存在的数值索引赋值会被忽略，而在普通数组中就可以
• 缺失方法
  concat()
  pop()
  push()
  shift()
  splice()
  unshift()

文章参考：

ES6定型数组
ArrayBuffer详解
前端二进制类型