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;

}

ArrayBuffer、Float32Array、Uint8Array 详解的更多相关文章

ArrayBuffer转base64详解
先贴代码: const base64String = window.btoa(String.fromCharCode(... new Uint8Array(buffer))) 看起来非常的简洁,优美. ...
触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
触碰jQuery：AJAX异步详解（转）
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
前端后台以及游戏中使用Google Protocol Buffer详解
前端后台以及游戏中使用Google Protocol Buffer详解 0.什么是protoBuf protoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,与XML相比,protoBuf更 ...
WebSocket 详解
WebSocket 出现前构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步.通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见.在 ...
005-Scala数组操作实战详解
005-Scala数组操作实战详解 Worksheet的使用交互式命令执行平台记得每次要保存才会出相应的结果数组的基本操作数组的下标是从0开始和Tuple不同缓冲数组ArrayBuffer( ...
Spark小课堂Week6 启动日志详解
Spark小课堂Week6 启动日志详解作为分布式系统,Spark程序是非常难以使用传统方法来进行调试的,所以我们主要的武器是日志,今天会对启动日志进行一下详解. 日志详解今天主要遍历下Strea ...
Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕
Spark Streaming揭秘 Day28 在集成开发环境中详解Spark Streaming的运行日志内幕今天会逐行解析一下SparkStreaming运行的日志,运行的是WordCountO ...
[Spark内核] 第36课：TaskScheduler内幕天机解密：Spark shell案例运行日志详解、TaskScheduler和SchedulerBackend、FIFO与FAIR、Task运行时本地性算法详解等
本課主題通过 Spark-shell 窥探程序运行时的状况 TaskScheduler 与 SchedulerBackend 之间的关系 FIFO 与 FAIR 两种调度模式彻底解密 Task 数据 ...

随机推荐

微信小程序——计算器
知识点: wxml: hover-class: 实现点击态效果 hover-class样式显示的原理是点击时把样式加到class的样式中,冲突时,谁在后面就显示谁! data-val: 用于传数据, ...
js小数相加精度不准确
例: 0.1+0.1+0.1+0.7 != 1 0.1+0.2 != 0.3 解决办法: 相加 function addNum(num1, num2) { let sq1, sq2; ...
为什么你需要升级 pip
更新软件版本可以修复bug,增加新功能和提升性能.例如,NumPy 1.20 添加了类型注释,并在可能的情况下通过使用SIMD来提高性能.如果您要安装NumPy,则可能要安装最新版本. 相反,如果您使 ...
Node.js+Vue.js开发王者荣耀手机端官网
一.项目初始 1.工具安装和环境搭建 node.js.npm.mongodb 编辑器:VScode 2.项目初始化项目分为三个部分,分别是移动端界面.后台管理界面和node.js开发的整体的服务端 ...
【NAS使用心得】使用Synology Photos管理照片
整理方式 1.本地没有整理或只按年份整理的:时间线模式下直接上传,让软件自己按照片创建时间生成文件夹:有按年份生成相册需求的,可以用"选择照片以创建相册"功能,找到年份文件夹,全选 ...
SQLyog 13.1.1.0注册码证书秘钥
注册信息: Name:(用户名随意) License Key: Professional: 8e053a86-cdd3-48ed-b5fe-94c51b3d343c Enterprise: a4668 ...
Visual Studio 2019 专业版许可证过期解决办法
Visual Studio 2019 许可证过期,登录微软账户也不行,一直提示点击更新许可证,"无法下载许可证,请检查你的网络连接或代理设置" 解决方案:找到VS2019安装目录, ...
WinForm中的MVC模式--MVP模式
本文主要介绍MVC模式在WINFORM中的实现,其实砖家们都称它为MVP模式,小弟E文不太好,真的是记不住那个P怎么拼写的.. MVC模式主要解决的问题就是将表示层和业务层进行分离,在以往做WINFO ...
字符串练习2 最长抑或路径（01trie树）
题目链接在这里:P4551 最长异或路径 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 是一道比较经典的问题,对于异或问题经常会使用01trie树来解决. 当然01trie树只是用 ...
应用和 IPv6
应用和 IPv6 前言在数据中心网络IPv6协议改造时,我们通常更关注路由交换的部分.对于应用系统适配IPv6 网络确缺少关注,本文旨在更多的讨论应用和IPv6 的关系,帮助个人.公司和组织能够更改 ...