Float32Array基础用法

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是一个固定长度的字节数组，具体用法参考ArrayBuffer - JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

更多相关内容可参考 :小白GIS-基于地图的Web开发教程小白gis每周更新与WebGIS设计相关的文章教程，通过在线示例以及demo的方式，介绍Arcgis API、开源gis API的使用方法，帮助学习者快速入门webgis开发http://www.xiaobaigis.com/Home/Index/javascript