資訊專欄INFORMATION COLUMN
摘要：類型化數(shù)組也是中新引入的。用一句話解釋類型化數(shù)組就是它是操作二進(jìn)制數(shù)據(jù)的接口。類型化數(shù)組類型化數(shù)組的應(yīng)用二進(jìn)制數(shù)據(jù)的接口主要應(yīng)用于文件，在中涉及文件處理的幾乎都可以應(yīng)用，主要是，，。
類型化數(shù)組（Typed Array）也是HTML5中新引入的API。用一句話解釋類型化數(shù)組就是：它是JS操作二進(jìn)制數(shù)據(jù)的接口。 眾所周知，直接操作二進(jìn)制數(shù)據(jù)可以使程序更為高效， 盡管JS對(duì)常規(guī)數(shù)組做了很多優(yōu)化（JS數(shù)組被實(shí)現(xiàn)為對(duì)象形式），但是不得不承認(rèn)JS數(shù)組的效率一直不高。比如在WebGL中的圖像數(shù)據(jù)傳輸， 如果使用原生的JS數(shù)組， 瀏覽器在與顯卡通信時(shí)，必須將它轉(zhuǎn)換為二進(jìn)制形式，這一步較為耗時(shí)。正是因?yàn)橛写罅慷M(jìn)制數(shù)據(jù)的操作需求，所以ArrayBuffer應(yīng)運(yùn)而生。在Canvas(可參考本人canvas筆記canvas的基本原理)中，使用getImageDate()方法所返回的ImageData對(duì)象就是一個(gè)類數(shù)組對(duì)象，HTML標(biāo)準(zhǔn)中稱其為CanvasPixelArray，它除了在值的處理方式上與ArrayBuffer中視圖類型Unit8Array有點(diǎn)區(qū)別外，其他都一樣(Unit8Array只能處理0-255的數(shù)字，而CanvasPixelArray可以處理更多)
對(duì)于剛接觸類型化數(shù)組的概念看到這可能還是云里霧里，下面將逐一將我所理解的ArrayBuffer中的關(guān)鍵概念做個(gè)整理：
視圖（View）大多數(shù)資料中對(duì)于視圖都是一句帶過(guò)，比如這篇博客中（ArrayBuffer：類型化數(shù)組）對(duì)于視圖的解釋就是：
ArrayBuffer作為內(nèi)存區(qū)域，可以存放多種類型的數(shù)據(jù)。不同數(shù)據(jù)有不同的存儲(chǔ)方式，這就叫做“視圖”。
當(dāng)我剛看到上面的解釋，還是無(wú)法體會(huì)“視圖”的含義，暫且把ArrayBuffer的概念放一邊， 想象一下，既然是操作二進(jìn)制數(shù)據(jù)的接口，那么該如何操作他們呢， 比如8位二進(jìn)制數(shù)1是00000001，我們肯定不會(huì)使用原始的二進(jìn)制編程，那么當(dāng)我們操作這個(gè)1時(shí)，肯定是以1的形式操作， 那么這里的1就是視圖（view）了， 視圖可以理解為方便理解的二進(jìn)制數(shù)據(jù)。如果知道C語(yǔ)言，對(duì)于這個(gè)概念就不難把握了，比如C語(yǔ)言中的字符串實(shí)際是數(shù)字，那么這里的字符串也可以理解為“視圖”。其實(shí)這里的視圖就是類型化數(shù)組。
ArrayBuffer的概念ArrayBuffer是一段不透明的內(nèi)存區(qū)域（所謂不透明，就是無(wú)法直接操作的數(shù)據(jù)塊），單位是字節(jié)(Byte)也就是8位，它的byteLength屬性返回其內(nèi)存大小。在JS中，通過(guò)構(gòu)造函數(shù)的形式申明一段ArrayBuffer區(qū)域：
var a = new ArrayBuffer(10) a.byteLength // =>10
在這段內(nèi)存區(qū)域上，可以使用不同的視圖來(lái)創(chuàng)建任意數(shù)量的類型化數(shù)組， 這些類型化數(shù)組也可以是重疊的。有八種不同的類型化數(shù)組(視圖)，分別為：
Int8Array：8位有符號(hào)整數(shù)，長(zhǎng)度1個(gè)字節(jié)。
Uint8Array：8位無(wú)符號(hào)整數(shù)，長(zhǎng)度1個(gè)字節(jié)。
Int16Array：16位有符號(hào)整數(shù)，長(zhǎng)度2個(gè)字節(jié)。
Uint16Array：16位無(wú)符號(hào)整數(shù)，長(zhǎng)度2個(gè)字節(jié)。
Int32Array：32位有符號(hào)整數(shù)，長(zhǎng)度4個(gè)字節(jié)。
Uint32Array：32位無(wú)符號(hào)整數(shù)，長(zhǎng)度4個(gè)字節(jié)。
Float32Array：32位浮點(diǎn)數(shù)，長(zhǎng)度4個(gè)字節(jié)。
Float64Array：64位浮點(diǎn)數(shù)，長(zhǎng)度8個(gè)字節(jié)。
這里引用這篇博客中(JavaScript中的ArrayBuffer詳細(xì)介紹)的例子來(lái)解釋ArrayBuffer區(qū)域中出現(xiàn)的重疊(也叫復(fù)合視圖)現(xiàn)象：
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
原文中作者的解釋過(guò)于簡(jiǎn)單。這里的y[0]之所以為7，是因?yàn)樵?b>buffer這段12個(gè)字節(jié)的內(nèi)存區(qū)域中，申明來(lái)一個(gè)從0字節(jié)開始，長(zhǎng)度為2的32位浮點(diǎn)數(shù)x(也就是說(shuō)x占了前8個(gè)字節(jié))，再申明一個(gè)從第4個(gè)字節(jié)開始，長(zhǎng)度為1的32位浮點(diǎn)數(shù)y，那么這里的y與x實(shí)際上就是重疊的，x已經(jīng)占了8個(gè)字節(jié)，而y是從第4個(gè)字節(jié)開始的。既然是重疊的，那么改變x勢(shì)必會(huì)影響到y，這里x類型化數(shù)組的第一個(gè)元素賦值為7，那么在ArrayBuffer中即是00000000 00000000 00000000 00000111而y是從第四個(gè)字節(jié)開始，也就是從00000111開始， 所以y也是00000111也就是7了。
類型化數(shù)組與常規(guī)數(shù)組的區(qū)別類型化數(shù)組實(shí)質(zhì)上是二進(jìn)制數(shù)據(jù)，而ArrayBuffer這段區(qū)域又是指定長(zhǎng)度的，基于這些便可推出其與常規(guī)數(shù)組的區(qū)別：
類型化數(shù)組元素都是數(shù)字，它不像JS常規(guī)數(shù)組那樣可以參雜不同類型，比如下面例子?中的賦值就是無(wú)效的
類型化數(shù)組長(zhǎng)度固定
所有元素初始化為0
var a = new Int8Array(3) a[0] = "hello" a[0] // =>0 顯示a[0]依然未定義 a[0] = "8" a[0] // = > 8 但是注意類型的自動(dòng)轉(zhuǎn)換，當(dāng)可被轉(zhuǎn)換成數(shù)字時(shí)，JS會(huì)自動(dòng)將其轉(zhuǎn)成數(shù)值DataView
既然本質(zhì)是在操作二進(jìn)制數(shù)據(jù)，那么就涉及到“高位優(yōu)先(big-endian)”還是“低位優(yōu)先(little-endian)”的數(shù)據(jù)傳輸問題，DataView的一整套API中就涉及到解決該問題，在當(dāng)前的大部分CPU架構(gòu)中的字節(jié)傳輸順序都是使用低位優(yōu)先，而在大部分的網(wǎng)絡(luò)協(xié)議中使用的字節(jié)順序卻是高位優(yōu)先(比如HTTP協(xié)議)，它的一系列g(shù)et方法中就可以設(shè)置字節(jié)的處理順序。DataView也是一種視圖，它的原理并不難，詳細(xì)的dataview的API可以看前面提到的博客中的DataView章節(jié)。mark?ArrayBuffer：類型化數(shù)組
類型化數(shù)組的應(yīng)用二進(jìn)制數(shù)據(jù)的接口主要應(yīng)用于文件，在JS中涉及文件處理的API幾乎都可以應(yīng)用ArrayBuffer，主要是Ajax，F(xiàn)ile，Canvas。這幾個(gè)例子等下再碼，爭(zhēng)取寫出跟前面博客不一樣的東西，先搬磚……
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78901.html
摘要：在內(nèi)部設(shè)計(jì)時(shí)分成了兩部分和。層表示內(nèi)存中的數(shù)據(jù)塊，負(fù)責(zé)提供操作數(shù)據(jù)塊的接口。也就是說(shuō)通過(guò)創(chuàng)建內(nèi)存塊，通過(guò)實(shí)現(xiàn)對(duì)內(nèi)存塊的讀寫操作。很顯然中的結(jié)果是。有同學(xué)可能對(duì)輸出的順序不理解，覺得為什么不是呢。上例在小端模式下的存儲(chǔ)形式，每個(gè)框框表示位。 我們知道在C語(yǔ)言中，可以使用malloc和free方法來(lái)分配和釋放內(nèi)存。隨著web的發(fā)展中，js在ES6中新增了內(nèi)存操作的支持。其實(shí)現(xiàn)方式就是---...
摘要：固有對(duì)象由標(biāo)準(zhǔn)規(guī)定，隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象，它能夠被原型繼承。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：ka...
摘要：固有對(duì)象由標(biāo)準(zhǔn)規(guī)定，隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象，它能夠被原型繼承。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：ka...
摘要：固有對(duì)象由標(biāo)準(zhǔn)規(guī)定，隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象，它能夠被原型繼承。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：ka...
閱讀 1369·2021-10-09 09:44
閱讀 1448·2021-09-28 09:36
閱讀 16000·2021-09-22 15:55
閱讀 1253·2021-09-22 15:45
閱讀 2207·2021-09-02 09:48
閱讀 2793·2019-08-29 17:19
閱讀 2306·2019-08-29 10:54
閱讀 918·2019-08-23 18:40
