一、JavaScript中的棧和堆
先簡單說說JavaScript中的數據類型,主要分為兩種,一種是值類型,一種是引用類型,常見的引用類型有Objact, Array, 如果數組中的元素是Nurmber, String之類的值類型會直接被壓入棧中, 而引用類型只會壓入對應的一個索引
指針就是指向對象和數組的一個索引,並不等於真正的這個對象和數組
因為arr是數組,是引用類型,str僅僅是從arr堆內存中獲取的一個數據值,並保存在棧中,是直接在棧中修改,並且不能指向arr堆內存中。
二、那么ArrayBuffer到底是什么呢?
1、ArrayBuffer又稱類型化數組,是一個二進制數據的原始緩存區,無法直接讀取或者寫入(也就是說只能存放0,1並且不能直接修改和讀取)
2、數組是放在堆中,ArrayBuffer數組則把數據放在棧中(所以取數據時后者快)
3、可以根據需要傳遞類型化數組或者DataView對象來解釋原始緩存區
4、ArrayBuffer初始化后固定大小,數組則可以自由增減。
類型化數組有以下幾種:
名稱 占用字節 描述
Int8Array 1 8位二補碼有符號整數
Uint8Array 1 8位無符號整數
Uint8ClampedArray 1 8位無符號整型固定數組(數值在0~255之間)
Int16Array 2 16位二補碼有符號整數
Uint16Array 2 16位無符號整數
Int32Array 4 32 位二補碼有符號整數
Uint32Array 4 32 位無符號整數
Float32Array 4 32 位 IEEE 浮點數
Float64Array 8 64 位 IEEE 浮點數

如上:首先分配了32字節的空間,in8使用Int8Array類型從0開始4個數據,每個數據占1個字節,所以A視圖一共占用了2(0-2)個字節,后面的以此類推,最后留給in16空間有6字節,如果傳入的length為超過6字節,那么就超出了所分配內存的范圍而報錯。

如上:前四個屬性都是只讀的:
buffer 返回ArrayBuffer的引用
byteLength 返回字節長度
byteOffset 返回視圖在該ArrayBuffer中占用內存區域的起點位置
length 返回視圖數據的個數
set() 第一個參數為已有的視圖或者數組,第二個參數代表從第幾個字節開始設置值
subarray 返回一個新的視圖,如果第二個參數省略,則取剩余的全部
entries和keys兩個方法目前僅在chrome和FireFox上面支持,返回一個數組迭代對象,你可以通過該對象的next()方法依次取得相應的值,或者使用for...of循環進行迭代。
在寫這篇隨便的時候,我查看了Mozilla開發者網絡實際上這幾種視圖類型的原型TypedArray還有很多方法,諸如join、indexOf、forEach、map等,但可惜其他瀏覽器並不支持,或許將來會有所改善。
三、DataView視圖
為了解決各種硬件設備、數據傳輸等對默認字節序的設定不一而導致解碼時候會發生的混亂問題,javascript提供了DataView類型的視圖來讓開發者在對內存進行讀寫時手動設定字節序的類型。
1、DataView構造函數

2、DataView實例化后的對象所具有的功能

new DataView(buffer).setInt16(byteOffset ,value , [ littleEndian])
byteOffset 表示從內存的哪個字節開始
value 該對應字節將被設置的值
littleEndian 字節序,true為小端字節序,false或者不填為大端字節序
值得注意的是,在DataView視圖中,讀寫超出其實例化時的范圍的值時,都會發生錯誤,這跟之前的固定類型的視圖不一樣,在使用時更加謹慎
四、ArrayBuffer與字符串
javascript的字符串使用UTF-16編碼的方式,所以我們可以這樣來做:

var buffer = new ArrayBuffer(str.length * 2);
因為每個字母占兩個字節所以總字節為length乘2
str.charCodeAt(i)把括號里的字符轉成Unicode編碼
小結
本篇文章主要寫的是前端獲取ArrayBuffer數據的方法,以及使用,寫的時候發現自己還是有很多沒搞懂的地方,雖然查了一些資料,但是可能還是錯誤的地方,希望發現的大家可以指出。