对类型化数组(Typed Array)与ArrayBuffer的理解_html/css_WEB-ITnose
是类型化数组(Typed Array)也是HTML5中新引入的API。用一句话解释类型化数组就是:它是JS操作二进制数据的接口。 众所周知,直接操作二进制数据可以使程序更为高效, 尽管JS对常规数组做了很多优化(JS数组被实现为对象形式),但是不得不承认JS数组的效率一直不高。比如在WebGL中的图像数据传输, 如果使用原生的JS数组, 浏览器在与显卡通信时,必须将它转换为二进制形式,这一步较为耗时。正是因为有大量二进制数据的操作需求,所以ArrayBuffer应运而生。在Canvas(可参考本人canvas笔记canvas的基本原理)中,使用 getImageDate()方法所返回的 ImageData对象就是一个类数组对象,HTML标准中称其为 CanvasPixelArray,它除了在值的处理方式上与 ArrayBuffer中视图类型 Unit8Array有点区别外,其他都一样( Unit8Array只能处理0-255的数字,而 CanvasPixelArray可以处理更多)
对于刚接触类型化数组的概念看到这可能还是云里雾里,下面将逐一将我所理解的ArrayBuffer中的关键概念做个整理:
视图(View)
大多数资料中对于视图都是一句带过,比如这篇博客中( ArrayBuffer:类型化数组)对于视图的解释就是:
ArrayBuffer作为内存区域,可以存放多种类型的数据。不同数据有不同的存储方式,这就叫做“视图”。
当我刚看到上面的解释,还是无法体会“视图”的含义,暂且把ArrayBuffer的概念放一边, 想象一下,既然是操作二进制数据的接口,那么该如何操作他们呢, 比如8位二进制数1是 00000001,我们肯定不会使用原始的二进制编程,那么当我们操作这个 1时,肯定是以 1的形式操作, 那么这里的 1就是视图(view)了, 视图可以理解为方便理解的二进制数据。如果知道C语言,对于这个概念就不难把握了,比如C语言中的字符串实际是数字,那么这里的字符串也可以理解为“视图”。其实这里的视图就是类型化数组。
ArrayBuffer的概念
ArrayBuffer是一段不透明的内存区域(所谓不透明,就是无法直接操作的数据块),单位是字节(Byte)也就是8位,它的 byteLength属性返回其内存大小。在JS中,通过构造函数的形式申明一段ArrayBuffer区域:
var a = new ArrayBuffer(10)a.byteLength // =>10
在这段内存区域上,可以使用不同的视图来创建任意数量的类型化数组, 这些类型化数组也可以是重叠的。有八种不同的类型化数组(视图),分别为:
-
Int8Array:8位有符号整数,长度1个字节。
-
Uint8Array:8位无符号整数,长度1个字节。
-
Int16Array:16位有符号整数,长度2个字节。
-
Uint16Array:16位无符号整数,长度2个字节。
-
Int32Array:32位有符号整数,长度4个字节。
-
Uint32Array:32位无符号整数,长度4个字节。
-
Float32Array:32位浮点数,长度4个字节。
-
Float64Array:64位浮点数,长度8个字节。
这里引用这篇博客中( JavaScript中的ArrayBuffer详细介绍)的例子来解释ArrayBuffer区域中出现的重叠现象:
var buffer = new ArrayBuffer(12)var x = new Float32Array(buffer, 0, 2)var y = new Float32Array(buffer, 4, 1)x[1] = 7;console.log(y[0]); // 7
原文中作者的解释过于简单。这里的 y[0]之所以为7,是因为在 buffer这段12个字节的内存区域中,申明来一个从0字节开始,长度为2的32位浮点数 x(也就是说x占了前8个字节),再申明一个从第 4个字节开始,长度为1的32位浮点数 y,那么这里的 y与 x实际上就是重叠的, x已经占了8个字节,而 y是从第4个字节开始的。既然是重叠的,那么改变 x势必会影响到 y,这里 x类型化数组的第一个元素赋值为7,那么在ArrayBuffer中即是 00000000 00000000 00000000 00000111而 y是从第四个字节开始,也就是从 00000111开始, 所以 y也是 00000111也就是7了。
类型化数组与常规数组的区别
类型化数组实质上是二进制数据,而ArrayBuffer这段区域又是指定长度的,基于这些便可推出其与常规数组的区别:
-
类型化数组元素都是数字,它不像JS常规数组那样可以参杂不同类型,比如下面例子:chestnut:中的赋值就是无效的
-
类型化数组长度固定
-
所有元素初始化为0
var a = new Int8Array(3)a[0] = 'hello'a[0] // =>0 显示a[0]依然未定义a[0] = '8'a[0] // = > 8 但是注意类型的自动转换,当可被转换成数字时,JS会自动将其转成数值
DataView
既然本质是在操作二进制数据,那么就涉及到“高位优先”还是“低位优先”的数据传输问题……
今天太晚啦,明天接着码,未完待续~

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
