1 基本概念

MDN中的解释比较生涩，简单说就是一个固定长度，用来存储浮点类型数据的数组。 概念中提到固定长度和浮点型数据；那先尝鲜验证一下，最起码先搞清楚概念，看下跟普通数组哪里不一样嘛

1.1 验证固定长度

(1) 首先创建一个长度为2的类型数组，然后通过索引赋值三个值

                                            
let f1=new Float32Array(2)
f1[0]=1
f1[1]=2
f1[2]=3
f1 // [1,2]
                                            
                                        

图演示:

最后打印数组对象发现，只有两个元素；所以类型数组Float32Array跟普通数组Array是不一样的，不能像Array一样无限添加元素。

(2) 普通数组

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) 反观一下普通数组：

                                            
let a=[]
a[0]=1
a[1]="xiaobai"
a[2]={}
a[3]=function xiaobai(){}
a[4]=[[1,2]]
a[5]=new Float32Array(3)
a // [1, 'xiaobai', {…}, ƒ, Array(1), Float32Array(3)]
                                            
                                        

图演示:

可以看到普通数组的数组元素可以是五花八门的各种数据格式

2 基本用法

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) 元素长度:BYTES_PER_ELEMENT 表示float32Array数组中每个元素的字节长度，因为它只存储数字，所以每个数字的字节长度规定为4

                                            
let f1=new Float32Array(3)
f1.BYTES_PER_ELEMENT  // 4
                                            
                                        

(3) buffer属性

如下图，看以看到类型数组返回多个属性，其中一个是buffer，它是一个ArrayBuffer对象；

ArrayBuffer是一个固定长度的字节数组，具体用法参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer