国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

對類型化數組(Typed Array)與ArrayBuffer的理解

Worktile / 2092人閱讀

摘要：類型化數組也是中新引入的。用一句話解釋類型化數組就是它是操作二進制數據的接口。類型化數組類型化數組的應用二進制數據的接口主要應用于文件，在中涉及文件處理的幾乎都可以應用，主要是，，。

類型化數組（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常規數組那樣可以參雜不同類型，比如下面例子?中的賦值就是無效的

類型化數組長度固定

所有元素初始化為0

var  a = new Int8Array(3)
a[0] = "hello"
a[0] // =>0 顯示a[0]依然未定義
a[0] = "8"
a[0]  // = > 8 但是注意類型的自動轉換，當可被轉換成數字時，JS會自動將其轉成數值
DataView

既然本質是在操作二進制數據，那么就涉及到“高位優先(big-endian)”還是“低位優先(little-endian)”的數據傳輸問題，DataView的一整套API中就涉及到解決該問題，在當前的大部分CPU架構中的字節傳輸順序都是使用低位優先，而在大部分的網絡協議中使用的字節順序卻是高位優先(比如HTTP協議)，它的一系列get方法中就可以設置字節的處理順序。DataView也是一種視圖，它的原理并不難，詳細的dataview的API可以看前面提到的博客中的DataView章節。mark?ArrayBuffer：類型化數組

類型化數組的應用

二進制數據的接口主要應用于文件，在JS中涉及文件處理的API幾乎都可以應用ArrayBuffer，主要是Ajax，File，Canvas。這幾個例子等下再碼，爭取寫出跟前面博客不一樣的東西，先搬磚……

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78901.html

相關文章

  • 理解 typed array

    摘要：在內部設計時分成了兩部分和。層表示內存中的數據塊，負責提供操作數據塊的接口。也就是說通過創建內存塊，通過實現對內存塊的讀寫操作。很顯然中的結果是。有同學可能對輸出的順序不理解，覺得為什么不是呢。上例在小端模式下的存儲形式，每個框框表示位。 我們知道在C語言中，可以使用malloc和free方法來分配和釋放內存。隨著web的發展中，js在ES6中新增了內存操作的支持。其實現方式就是---...

    _Zhao 評論0 收藏0

  • 重學前端學習筆記（九）--JavaScript中的對象分類

    摘要：固有對象由標準規定，隨著運行時創建而自動創建的對象實例。普通對象由語法構造器或者關鍵字定義類創建的對象，它能夠被原型繼承。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：ka...

    ShowerSun 評論0 收藏0

  • 重學前端學習筆記（九）--JavaScript中的對象分類

    摘要：固有對象由標準規定，隨著運行時創建而自動創建的對象實例。普通對象由語法構造器或者關鍵字定義類創建的對象，它能夠被原型繼承。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：ka...

    tinna 評論0 收藏0

  • 重學前端學習筆記（九）--JavaScript中的對象分類

    摘要：固有對象由標準規定，隨著運行時創建而自動創建的對象實例。普通對象由語法構造器或者關鍵字定義類創建的對象，它能夠被原型繼承。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：ka...

    dantezhao 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<