ES6之类型化数组与ArrayBuffer

63 阅读3分钟

ES6之类型化数组与ArrayBuffer

类型化数组

const arr1 = Uint8Array.of(355, 2, 3, 4, 5);
console.log(arr1.length);//数组长度
console.log(arr1.byteLength)//字节长度

const arr2 = new Uint8Array(5);
console.log(arr2)

const arr3 = new Uint8Array(arr1);
console.log(arr3 === arr1)

const newArr1=new Uint8Array(arr1.length+1);
newArr1.set(arr1);
newArr1[arr1.length]=255;
console.log(newArr1); //0~255

我们在使用数组时,并不希望每次在创建大量元素的数组时占用许多内存资源。但我们之前无法做到,因为 js 规定了数字类型统一使用 64 位双精度浮点型。
首先我们要知道在计算机中存储都是分块进行的。因为计算机不进行分割就无法进行数字的识别计算,所以数字都是使用固定的位数存储。
这里就分出了很多类型,有8位,16位,32位,64位。而且为了表示符号,将第一位作为符号位,0表示正数,1表示负数。
每种位数的类型都有固定的数字范围,超过范围就会舍弃掉一部分数字,导致与原来的数字不符。比如浮点数用来表示小数。第一部分是符号位,第二部分是指数位,也叫阶码,第三部分是尾数位,表示有效数字的位数。它将所有数字都写成了类似科学计数法的形式。
类型化数组就可以进行自由选择位数创建数组。可以直接通过构造函数 new Uint8Array() 创建数组,表示8位无符号整型。创建之后里面元素由于固定了内存空间会进行初始化,将元素初始化为0。创建数组的方式和原来一样。可以传入一个类型化数组,得到元素和数量相同的数组。但不是同一个数组。
只是类型化数组不可以进行增加和删除,如果想要删除,必须使用上面的方式。通过类型化数组方法创建的数组也是类型化数组。类型化数组可以通过 length 得到数组长度,byteLength 得到数组字节长度。8位表示一个字节,所以8位类型化数组 length 和 byteLength 一样。

ArrayBuffer

//创建了10个字节的内存空间
const bf = new ArrayBuffer(10);
console.log(bf)
console.log(bf.byteLength)

const bf2 = bf.slice(3, 5);
console.log(bf2)

const view = new DataView(bf, 3, 4);
view.setInt16(1, 3, true);//使用小端序
console.log(view, 'view');
console.log(view.getInt8(1));

const arr1= new Int8Array(bf);
const arr2= new Int16Array(bf);
console.log(arr1 === arr2);
console.log(arr1.buffer === arr2.buffer);
console.log(arr1)
arr2[0]=4000;
console.log(arr2);

ArrayBuffer 是一个可以指定内存大小的内存空间。可以通过 byteLength 得到字节大小,通过 slice() 方法切割 ArrayBuffer 。
有两种方式可以操作 ArrayBuffer ,一种是 DataView ,一种是使用类型化数组。
DataView 如果在读取和赋值时使用的位数不一致,会出现一些转化的问题。DataView 可以用在多种存储格式中。
类型化数组使用同一种位数,可以使用同一个内存空间,如果其中一个发生更改,另一个也会发生更改。可以看到,数组并不相同,但它们的 buffer 相同。我们可以在类型化数组中找到 ArrayBuffer ,如果没有指定,数组在创建时,都会自动创建一个 ArrayBuffer 。