一文讲清楚什么是类型化数组、ArrayBuffer、TypedArray、DataView等概念
为什么需要类型化数组
JavaScript 类型化数组是一种类似数组的对象,并提供了一种用于访问原始二进制数据的机制。
js 在处理图像、音频视频编辑等方面,通常需要处理大量相同类型的数据,比如一张图片的像素点数据,坐标数据等等。而使用普通的 js 数组,存储的对象能动态增多和减少,并且可以存储任何 JavaScript 值,性能可能会有问题。所以 js 引入了类型化数组。
类型化数组的创建要明确数据类型和长度,所以处理起来效率会高很多,而且不支持 push pop 等操作。
类型化数组的组成
类型数组拆分为两部分:
- 缓冲Buffer
- 视图View
缓冲由 ArrayBuffer 对象实现,描述的是一个数据块,并且不能访问。
如果要访问,就要用到视图。
有点像类和对象的概念。
缓冲Buffer
缓冲由 ArrayBuffer 对象实现,也就是上图框起来的部分,ArrayBuffer对象代表原始的二进制数据,那么如何对缓存区部分进行操作呢?有两种方式:
- 类型数组视图
- 数据视图DataView
视图View
简单总结一下就是,TypedArray视图用来读写简单类型的二进制数据,DataView视图用来读写复杂类型的二进制数据。
类型数组视图TypedArray
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Int8Array
数据类型 | 字节长度 | 含义 | 对应的 C 语言类型 |
---|---|---|---|
Int8 | 1 | 8 位带符号整数 | signed char |
Uint8 | 1 | 8 位不带符号整数 | unsigned char |
Uint8Clamped | 1 | 8 位不带符号整数(自动过滤溢出) | unsigned char |
Int16 | 2 | 16 位带符号整数 | short |
Uint16 | 2 | 16 位不带符号整数 | unsigned short |
Int32 | 4 | 32 位带符号整数 | int |
Uint32 | 4 | 32 位不带符号的整数 | unsigned int |
Float32 | 4 | 32 位浮点数 | float |
Float64 | 8 | 64 位浮点数 | double |
语法:
new Int8Array(length);
new Int8Array(typedArray);
new Int8Array(object);
new Int8Array(buffer [, byteOffset [, length]]);
举例:
// 以长度参数构造对象
var int8 = new Int8Array(2);
int8[0] = 42;
console.log(int8[0]); // 42
console.log(int8.length); // 2
console.log(int8.BYTES_PER_ELEMENT); // 1// 以数组构造对象
var arr = new Int8Array([21,31]);
console.log(arr[1]); // 31// 从另一数组构造对象
var x = new Int8Array([21, 31]);
var y = new Int8Array(x);
console.log(y[0]); // 21// 从 ArrayBuffer 构造对象
var buffer = new ArrayBuffer(8);
var z = new Int8Array(buffer, 1, 4);
数据视图DataView
语法:
new DataView(buffer [, byteOffset [, byteLength]])
byteOffset:此 DataView 对象的第一个字节在 buffer 中的字节偏移。如果未指定,则默认从第一个字节开始。
byteLength:此 DataView 对象的字节长度。如果未指定,这个视图的长度将匹配 buffer 的长度。
// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(16);// Create a couple of views
const view1 = new DataView(buffer);
const view2 = new DataView(buffer, 12, 4); //from byte 12 for the next 4 bytes
view1.setInt8(12, 42); // put 42 in slot 12console.log(view1.getInt8(12));
console.log(view2.getInt8(0));
// expected output: 42
提供的方法有很多如下:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/DataView
实例
使用 canvas 画出图片后,可以拿到图片每个像素点 rgba 的数据,这个数据就是存储在缓冲区中的,可以用 Uint8Array 来获取,具体看 js:使用canvas检测图片亮度
参考文档
https://www.jianshu.com/p/40d4a4d133e8
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays
一文讲清楚什么是类型化数组、ArrayBuffer、TypedArray、DataView等概念相关推荐
- JavaScript类型化数组——ArrayBuffer
JavaScript类型化数组是一种类似数组的对象,提供了一种用于访问原始二进制数据的机制. 类型化数组(Typed Array)很像C语言的数组,允许开发者以数组下标的形式,直接操作内存.有了类型化 ...
- php 使用dataview,ECMAScript6中的二进制数据(ArrayBuffer + TypedArray + DataView)
作者:心叶 时间:2018-04-26 20:33 简单的说,ArrayBuffer就代表了内存中的一段二进制数据,不可以直接读写,只可以通过在上面建立TypedArray视图或DataView视图来 ...
- MongoDB进阶系列(11)——“改”的那些事(二)文档的keyvalue为数组的修改方法...
2019独角兽企业重金招聘Python工程师标准>>> 本文将讨论关于文档中keyvalue为数组的情况如何修改数组. 首先,创建一个c4集合,集合中的文档包含一个arrint字段, ...
- 一文讲清楚以太坊的nonce
续上篇:一文讲清楚以太坊的gas,gasPrice,gasLimit 我们今天来讲讲以太坊的nonce.做过钱包开发的同学都应该知道,nonce是一个非常关键的参数.对于一般用户来说,各种钱包已经帮我 ...
- 【lib.es5】ArrayBuffer、DataView 的TypeScript接口
ArrayBuffer.DataView 的 TypeScript 接口 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263 ...
- Buffer、ArrayBuffer、DataView互转(node.js)
1.Buffer转ArrayBuffer // 实例一 const buf = Buffer.from("this is a test"); console.log(buf); c ...
- HTTP运行期与页面执行模型 【摘自文野的一天一点学aspnet之基础概念】
HTTP运行期与页面执行模型 [摘自文野的一天一点学aspnet之基础概念] 一个完整的HTTP请求在ASP.NET 的处理过程如下: HttpRequest ---> inetinfo.ex ...
- c语言通过本地文档输入二维数组,leetcode c本地调试时使用
在Leetcode刷题的时候,有时候会想在本地调试来定位错误,但是在本地生成测试用例非常麻烦,特别是对于一些大型二维数组的时候,于是我根据Leetcode二维数组的输入输入格式,写了一个自动生成int ...
- 一文讲清楚Windows Mobile和Wince(Windows Embedded CE)的字符集问题
背景 开发过Windows Mobile和Wince(Windows Embedded CE)的开发者,特别是Native C++开发者,或多或少都遇到过ANSI字符集和Unicode字符集的转换问题 ...
- mongodb——查询文档内部属性以及数组
上一篇博客中,我们学会了最基础的查询方法.即按照某一个属性,使用最简单的属性匹配方式查询.这一篇博客中我们来讲一下文档内部嵌套属性的查询以及对于数组的查询. 嵌入文档查询 使用场景:如果一个文档内部有 ...
最新文章
- iOS中 UITableViewCell cell划线那些事 韩俊强的博客
- 阿里巴巴Java开发手册———个人追加的见解和补充(一)
- 计算机十进制例子,verilog给你举个最简单的例子:以十进制计算为例:14
- C++ MFC实现基于RFID读写器的上位机软件
- Notepad++ 配置java编译环境
- 如何用drawInRect()显示中文?
- testbench——文件读入输出
- 携程产品经理笔试题-2020秋招
- Mysql技术内幕innodb引擎笔记
- MySQL创建无符号整数(int)及取值范围
- 【java毕业设计】基于javaEE+原生Servlet+MySql的企业财务管理系统设计与实现(毕业论文+程序源码)——企业财务管理系统
- SAP ABAP 查询物料的销售/生产消耗数据
- 日常运维1w、vmstat、
- 《Elixir In Action》第一章--第五章笔记
- K哥有点上头:坚持写作2年,收入100万!
- |--------硬件故障专题--------| 主板.CPU.硬盘.内存.显卡.声卡
- c语言程序实习报告,c语言程序设计实习报告程序
- 工程文件参考——STM32F4+幻尔LSC舵机控制板 四足机器人足端逆解控制器
- java 二维数组排序_java – 如何对二维ArrayList进行排序
- Rmarkdown对电影数据集进行统计分析