ArrayBuffer
ArrayBuffer()是一个普通的JavaScript构造函数，可用于在内存中分配特定数量的字节空间。
const buf = new ArrayBuffer(16); // 在内存中分配16 字节
alert(buf.byteLength); // 16
ArrayBuffer一经创建就不能再调整大小。不过，可以使用slice()复制其全部或部分到一个新实例中：
const buf1 = new ArrayBuffer(16);
const buf2 = buf1.slice(4, 12);
alert(buf2.byteLength); // 8
Float32Array
MDN中的解释比较生涩，简单说就是一个固定长度，用来存储浮点类型数据的数组。
1.1 验证固定长度：
首先创建一个长度为2的类型数组，然后通过索引赋值三个值
let f1=new Float32Array(2)
f1[0]=1
f1[1]=2
f1[2]=3
f1 // [1,2]
结论：最后打印数组对象发现，只有两个元素；所以类型数组Float32Array跟普通数组Array是不一样的，不能像Array一样无限添加元素。
1.2 验证浮点类型数据：
(1) 创建长度为3的类型数组，然后添加三个值，其中一个是字符串
let f1=new Float32Array(3)
f1[0]=1
f1[1]="sf"
f1[2]=11
f1 // [1,NaN,11]
f1[0]={}
f1 // [NAN,NaN,11]
结论：显而易见,类型数组只能存储Number数字型数据，其他数据不允许会赋值为NaN,可以自己尝试一下赋值对象，函数等等;
2.1 创建类型数组：
(1) 长度作为参数创建
let f1=new Float32Array(5)
f1 // [0,0,0,0,0]
默认值都是0
(2) 普通数组作为参数创建
let f2=new Float32Array([1,2,3,4,5])
f2 // [1,2,3,4,5]
let f3=new Float32Array([1,"xiaobai",{},[2,3]])
f3 // [1, NaN, NaN, NaN]
型数组可以将普通数组中的非数字类型的数据赋值为NaN；所以这算是类型数组的一个应用场景。
(3) 类型数组作为参数创建
let f1=new Float32Array([1,2])
let f2=new Float32Array(f1)
f2 // [1, 2]
2.2 属性
(1) 数组长度
let f1=new Float32Array(3)
f1.length // 3
数组长度代表数组内元素的数量
(2) 元素长度
let f1=new Float32Array(3)
f1.BYTES_PER_ELEMENT // 4
BYTES_PER_ELEMENT 表示float32Array数组中每个元素的字节长度，因为它只存储数字，所以每个数字的字节长度规定为4
(3) buffer属性
如下图，看以看到类型数组返回多个属性，其中一个是buffer，它是一个ArrayBuffer对象；
ArrayBuffer是一个固定长度的字节数组，具体用法参考 ：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
Uint8Array
Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
具体特性类似于 Float32Array
// 来自长度
var uint8 = new Uint8Array(2);
uint8[0] = 42;
console.log(uint8[0]); // 42
console.log(uint8.length); // 2
console.log(uint8.BYTES_PER_ELEMENT); // 1 // 来自数组
var arr = new Uint8Array([21,31]);
console.log(arr[1]); // 31 // 来自另一个 TypedArray
var x = new Uint8Array([21, 31]);
var y = new Uint8Array(x);
console.log(y[0]); // 21 // 来自 ArrayBuffer
var buffer = new ArrayBuffer(8);
var z = new Uint8Array(buffer, 1, 4);
z; // Uint8Array(4) [0, 0, 0, 0] // 来自一个迭代器
var iterable = function*(){ yield* [1,2,3]; }();
var uint8 = new Uint8Array(iterable);
// Uint8Array[1, 2, 3]
互相转换：
ArrayBuffer转换为Float32Array
var convertBlock(buffer) { // incoming data is an ArrayBuffer
var incomingData = new Uint8Array(buffer); // create a uint8 view on the ArrayBuffer
var i, l = incomingData.length; // length, we need this for the loop
var outputData = new Float32Array(incomingData.length); // create the Float32Array for output
for (i = 0; i < l; i++) {
outputData[i] = (incomingData[i] - 128) / 128.0; // convert audio to float
}
return outputData; // return the Float32Array
}
Uint8Array转换为Float32Array
var convertBlock(incomingData) { // incoming data is a UInt8Array
var i, l = incomingData.length;
var outputData = new Float32Array(incomingData.length);
for (i = 0; i < l; i++) {
outputData[i] = (incomingData[i] - 128) / 128.0;
}
return outputData;
}
