亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Worktile / 2169人閱讀

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

類型化數(shù)組（Typed Array）也是HTML5中新引入的API。用一句話解釋類型化數(shù)組就是：它是JS操作二進制數(shù)據(jù)的接口。 眾所周知，直接操作二進制數(shù)據(jù)可以使程序更為高效， 盡管JS對常規(guī)數(shù)組做了很多優(yōu)化（JS數(shù)組被實現(xiàn)為對象形式），但是不得不承認JS數(shù)組的效率一直不高。比如在WebGL中的圖像數(shù)據(jù)傳輸， 如果使用原生的JS數(shù)組， 瀏覽器在與顯卡通信時，必須將它轉換為二進制形式，這一步較為耗時。正是因為有大量二進制數(shù)據(jù)的操作需求，所以ArrayBuffer應運而生。在Canvas(可參考本人canvas筆記canvas的基本原理)中，使用getImageDate()方法所返回的ImageData對象就是一個類數(shù)組對象，HTML標準中稱其為CanvasPixelArray，它除了在值的處理方式上與ArrayBuffer中視圖類型Unit8Array有點區(qū)別外，其他都一樣(Unit8Array只能處理0-255的數(shù)字，而CanvasPixelArray可以處理更多)

對于剛接觸類型化數(shù)組的概念看到這可能還是云里霧里，下面將逐一將我所理解的ArrayBuffer中的關鍵概念做個整理：

視圖（View）

大多數(shù)資料中對于視圖都是一句帶過，比如這篇博客中（ArrayBuffer：類型化數(shù)組）對于視圖的解釋就是：

ArrayBuffer作為內存區(qū)域，可以存放多種類型的數(shù)據(jù)。不同數(shù)據(jù)有不同的存儲方式，這就叫做“視圖”。

當我剛看到上面的解釋，還是無法體會“視圖”的含義，暫且把ArrayBuffer的概念放一邊， 想象一下，既然是操作二進制數(shù)據(jù)的接口，那么該如何操作他們呢， 比如8位二進制數(shù)1是00000001，我們肯定不會使用原始的二進制編程，那么當我們操作這個1時，肯定是以1的形式操作， 那么這里的1就是視圖（view）了， 視圖可以理解為方便理解的二進制數(shù)據(jù)。如果知道C語言，對于這個概念就不難把握了，比如C語言中的字符串實際是數(shù)字，那么這里的字符串也可以理解為“視圖”。其實這里的視圖就是類型化數(shù)組。

ArrayBuffer的概念

ArrayBuffer是一段不透明的內存區(qū)域（所謂不透明，就是無法直接操作的數(shù)據(jù)塊），單位是字節(jié)(Byte)也就是8位，它的byteLength屬性返回其內存大小。在JS中，通過構造函數(shù)的形式申明一段ArrayBuffer區(qū)域：

var a = new ArrayBuffer(10)
a.byteLength // =>10

在這段內存區(qū)域上，可以使用不同的視圖來創(chuàng)建任意數(shù)量的類型化數(shù)組， 這些類型化數(shù)組也可以是重疊的。有八種不同的類型化數(shù)組(視圖)，分別為：

Int8Array：8位有符號整數(shù)，長度1個字節(jié)。

Uint8Array：8位無符號整數(shù)，長度1個字節(jié)。

Int16Array：16位有符號整數(shù)，長度2個字節(jié)。

Uint16Array：16位無符號整數(shù)，長度2個字節(jié)。

Int32Array：32位有符號整數(shù)，長度4個字節(jié)。

Uint32Array：32位無符號整數(shù)，長度4個字節(jié)。

Float32Array：32位浮點數(shù)，長度4個字節(jié)。

Float64Array：64位浮點數(shù)，長度8個字節(jié)。

這里引用這篇博客中(JavaScript中的ArrayBuffer詳細介紹)的例子來解釋ArrayBuffer區(qū)域中出現(xiàn)的重疊(也叫復合視圖)現(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

原文中作者的解釋過于簡單。這里的y[0]之所以為7，是因為在buffer這段12個字節(jié)的內存區(qū)域中，申明來一個從0字節(jié)開始，長度為2的32位浮點數(shù)x(也就是說x占了前8個字節(jié))，再申明一個從第4個字節(jié)開始，長度為1的32位浮點數(shù)y，那么這里的y與x實際上就是重疊的，x已經占了8個字節(jié)，而y是從第4個字節(jié)開始的。既然是重疊的，那么改變x勢必會影響到y，這里x類型化數(shù)組的第一個元素賦值為7，那么在ArrayBuffer中即是00000000 00000000 00000000 00000111而y是從第四個字節(jié)開始，也就是從00000111開始， 所以y也是00000111也就是7了。

類型化數(shù)組與常規(guī)數(shù)組的區(qū)別

類型化數(shù)組實質上是二進制數(shù)據(jù)，而ArrayBuffer這段區(qū)域又是指定長度的，基于這些便可推出其與常規(guī)數(shù)組的區(qū)別：

類型化數(shù)組元素都是數(shù)字，它不像JS常規(guī)數(shù)組那樣可以參雜不同類型，比如下面例子?中的賦值就是無效的

類型化數(shù)組長度固定

所有元素初始化為0

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

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

類型化數(shù)組的應用

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/78901.html

相關文章

  • 理解 typed array

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

    _Zhao 評論0 收藏0

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

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

    ShowerSun 評論0 收藏0

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

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

    tinna 評論0 收藏0

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

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

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

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