ArrayBuffer、Float32Array、Uint8Array 详解

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

具体特性类似于   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;
}

长风破浪会有时，直挂云帆济沧海