ArrayBuffer對象作為內存區域可以存放多種類型的數據。同一段內存，不同數據有不同的解讀方式，這種解讀方式稱為“視圖（view）”。ArrayBuffer有兩種類型的視圖，一種是類型化數組視圖（TypedArray），另一種是數據視圖（DataView）。類型化數組視圖的數組成員都是同一個數據類型，后者的數組成員可以是不同的數據類型。

TypedArray視圖一共有9種類型，每一種視圖都是一個構造函數。

這些視圖實現了數組接口，均有length屬性，都可以使用方括號運算符來獲取單個元素，所有數組方法都可以在其上面使用。普通數組和TypedArray數組的差異主要在以下方面：

1、TypedArray數組的所有成員都是同一種類型。

2、TypedArray數組的成員是連續的，不會有空位，不存在稀疏數組的情況。

3、TypedArray數組成員的默認值是0。

TypedArray數組只是一個視圖，本身不存儲數據，它的數據都存儲在底層的ArrayBuffer對象中，要獲取底層對象必須使用buffer屬性。

TypedArray構造函數

TypedArray有四種形式的構造函數，分別是：

1、TypedArray(buffer, byteOffset, length)

參數buffer代表了視圖底層的ArrayBuffer對象，byteOffset表示視圖開始的字節序號，默認從0開始，length代表視圖包含的數據個數，默認直到本段內存區域結束。

其中，byteOffset必須是與所要建立的數據類型的字節長度的整數倍，否則會出錯。

var buffer = new ArrayBuffer(32); var i16 = new Uint16Array(buffer, 1); // RangeError, Uint16的每個數據的長度為2個字節，故byteOffset必須是

2、TypedArray(length)

視圖可以不通過ArrayBuffer對象，直接指定長度，分配相應的內存。構造函數的參數代表要分配的成員個數。

var i16 = new Int16Array(3); // 分配了3*2=6個字節的內存 i16.buffer.byteLength; // 6

3、TypedArray(typedArray)

可以通過一個TypedArray實例來構建另一個TypedArray實例，兩個實例的類型可以不一樣，此時新實例只是復制了源實例的值，底層的內存是不一樣的。

var source = new Uint16Array(16); var target = new Int16Array(source);

4、TypedArray(arrayLikeObject)

可以通過一個類數組對象來創建TypedArray實例，數組對象的每一個值就是新實例數組的每一項對應的值。

var a = new Uint32Array([1,2,3,4]); a[2]; // 3

TypedArray的屬性

1、TypedArray有一個name屬性，是用于描述類型數組的字符串值。九個類型數組的name屬性分別是：

Int8Array.name; // "Int8Array" Uint8Array.name; // "Uint8Array" Uint8ClampedArray.name; // "Uint8ClampedArray" Int16Array.name; // "Int16Array" Uint16Array.name; // "Uint16Array" Int32Array.name; // "Int32Array" Uint32Array.name; // "Uint32Array" Float32Array.name; // "Float32Array" Float64Array.name; // "Float64Array"

2、BYTES_PER_ELEMENT屬性表示這種數據類型的每個元素所占用的字節數。

Int8Array.BYTES_PER_ELEMENT; // 1 Uint8Array.BYTES_PER_ELEMENT; // 1 Uint8ClampedArray.BYTES_PER_ELEMENT; // 1 Int16Array.BYTES_PER_ELEMENT; // 2 Uint16Array.BYTES_PER_ELEMENT; // 2 Int32Array.BYTES_PER_ELEMENT; // 4 Uint32Array.BYTES_PER_ELEMENT; // 4 Float32Array.BYTES_PER_ELEMENT; // 4 Float64Array.BYTES_PER_ELEMENT; // 8

3、TypedArray實例的buffer屬性返回整段內存區域對于的ArrayBuffer對象。該屬性為只讀屬性。

var ab = new ArrayBuffer(32); var ui16 = new Uint16Array(ab); ui16.buffer === ab; // true Object.getOwnPropertyDescriptor(Uint16Array.prototype.__proto__, 'buffer'); // {get: ?, set: undefined, enumerable: false, configurable: true}

4、TypedArray實例的byteLength屬性返回TypedArray數組占據的內存長度，單位為字節。

var ab = new ArrayBuffer(32); var ui16 = new Uint16Array(ab, 2); ui16.byteLength; // 30

5、TypedArray實例的byteOffset屬性表示TypedArray數組從底層ArrayBuffer對象的哪個字節開始。

var ab = new ArrayBuffer(32); var ui16 = new Uint16Array(ab, 2); ui16.byteOffset; // 2

6、TypedArray實例的length屬性表示實例有多少個成員。

var ab = new ArrayBuffer(32); var ui16 = new Uint16Array(ab, 2); ui16.length; // 15

TypedArray構造函數的靜態方法

TypedArray數組的所有構造函數上都有一個靜態方法of，用于將參數轉為一個TypedArray實例。

Float32Array.of(12.213, -8, 83.1); // [12.213, -8, 83.1] // 也可以用下面的方法新建同樣的數組 var a = new Float32Array([12.213, -8, 83.1]); var b = new Float32Array(3); b[0] = 12.213; b[1] = -8; b[2] = 83.1

TypedArray數組的另一個靜態方法from()接受一個可遍歷的數據結構（比如數組）作為參數，返回一個基于此結構的TypedArray實例。同時還可以接受第二個函數參數，在新建實例時，對每一個元素向映射到函數中，將函數的結果作為新實例的值。

Uint16Array.from([1,2,3]); // [1,2,3] Uint16Array.from([1,2,3], value => value * 2); // [2,4,6]

TypedArray原型對象上的方法

由于TypedArray實現了數組接口，故可以在TypedArray上使用數組的方法來進行操作。

Object.getOwnPropertyNames(Uint16Array.prototype.__proto__); /* [ "constructor", "buffer", "byteLength", "byteOffset", "length", "entries", "keys", "values", "copyWithin", "subarray", "set", "every", "fill", "filter", "find", "findIndex", "includes", "indexOf", "join", "lastIndexOf", "forEach", "map", "reduce", "reduceRight", "reverse", "slice", "some", "sort", "toLocaleString", "toString"] */

1、TypedArray.prototype.copyWithin(target, start[, end = this.length])

從原數組的start位置開始復制數據到end（不含），填充到target及以后的位置上，并返回修改后的數組。

var array = new Int16Array(10); array.set([1,2,3]); array; // [1, 2, 3, 0, 0, 0, 0, 0, 0, 0] array.copyWithin(3, 0, 3); array; // [1, 2, 3, 1, 2, 3, 0, 0, 0, 0]

2、TypedArray.prototype.entries()

返回TypedArray的鍵值對遍歷器

var array = new Int16Array(3); array.set([1,2,3]); var iter = array.entries(); for (let element of iter) {console.log(element); } /* [0,1] [1,2] [2,3] */

3、TypedArray.prototype.every(callback[, thisArg])

對數組的每一個元素都指向一次函數操作，如果每個元素都能通過測試，則返回true，否則返回false。

var array = new Int16Array(3); array.set([1,2,3]); array.every(function (value) { return value % 2 == 1; }); // false 2不是奇數

4、TypedArray.prototype.fill(value[, start = 0[, end = this.length]])

使用指定值填充TypedArray從start到end（不含）的全部元素。

new Uint8Array([1, 2, 3]).fill(4); // Uint8Array [4, 4, 4] new Uint8Array([1, 2, 3]).fill(4, 1); // Uint8Array [1, 4, 4] new Uint8Array([1, 2, 3]).fill(4, 1, 2); // Uint8Array [1, 4, 3] new Uint8Array([1, 2, 3]).fill(4, 1, 1); // Uint8Array [1, 2, 3] new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]

5、TypedArray.prototype.filter(callback[, thisArg])

對每個數組元素進行測試，保留通過測試函數的值。

function isBigEnough(element, index, array) {return element >= 10; } new Uint8Array([12, 5, 8, 130, 44]).filter(isBigEnough); // Uint8Array [ 12, 130, 44 ]

6、TypedArray.prototype.find(callback[, thisArg])

返回第一個通過測試函數的值。如果沒有一個元素通過測試，則返回undefined。

function isPrime(element, index, array) {var start = 2;while (start <= Math.sqrt(element)) {if (element % start++ < 1) {return false;}}return element > 1; }var uint8 = new Uint8Array([4, 5, 8, 12]); console.log(uint8.find(isPrime)); // 5

7、TypedArray.prototype.findIndex(callback[, thisArg])

返回第一個通過測試函數的值的下標。如果沒有一個元素通過測試，則返回undefined。

function isPrime(element, index, array) {var start = 2;while (start <= Math.sqrt(element)) {if (element % start++ < 1) {return false;}}return element > 1; }var uint16 = new Uint16Array([4, 5, 8, 12]); console.log(uint16.findIndex(isPrime)); // 1

8、TypedArray.prototype.forEach(callback[, thisArg])

為每一個數組元素執行指定的函數。

function logArrayElements(element, index, array) {console.log('a[' + index + '] = ' + element); }new Uint8Array([0, 1, 2, 3]).forEach(logArrayElements); /* a[0] = 0 a[1] = 1 a[2] = 2 a[3] = 3 */

9、TypedArray.prototype.includes(searchElement[, fromIndex])

返回一個布爾值，表明數組中從下標fromIndex開始到結尾，是否包含了指定的搜索元素。

var uint8 = new Uint8Array([1,2,3]); uint8.includes(2); // true uint8.includes(4); // false uint8.includes(3, 3); // false// NaN 的處理 （僅僅對 Float32 和 Float64 為 true） new Uint8Array([NaN]).includes(NaN); // false, 因為 NaN 傳遞給構造器時轉換為 0 new Float32Array([NaN]).includes(NaN); // true; new Float64Array([NaN]).includes(NaN); // true;

10、TypedArray.prototype.indexOf(searchElement[, fromIndex = 0])

在TypedArray中搜索元素，返回第一次出現的位置下標，如果找不到對應的元素，則返回-1。

let uint8 = new Uint8Array([2, 5, 9]); uint8.indexOf(2); // 0 uint8.indexOf(7); // -1 uint8.indexOf(9, 2); // 2 uint8.indexOf(2, -1); // -1 uint8.indexOf(2, -3); // 0

11、TypedArray.prototype.join([separator = ','])

將數值各個元素轉為字符串，再使用separator將其各個字符串連接后返回。

var array = new Int16Array([1,2,3,4]); var str = array.join('-'); str; // "1-2-3-4"

12、TypedArray.prototype.keys()

返回一個數組下標的遍歷器。

var array = new Int16Array(3); array.set([1,2,3]); var iter = array.keys(); for (let index of iter) {console.log(index); } /* 0 1 2 */

13、TypedArray.prototype.lastIndexOf(searchElement[, fromIndex = typedarray.length])

在TypedArray中搜索元素，返回最后一次出現的位置下標，如果找不到對應的元素，則返回-1。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); uint8.lastIndexOf(5); // 4

14、TypedArray.prototype.map(callback[, thisArg])

map方法對類型化數組中的元素調用提供的 callback函數，按照順序，并且會從結果構造新的類型化數組。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); const new_ui8 = uint8.map(function (value) {return value * 2; }); new_ui8; // [4,10,18,8,10,6]

15、TypedArray.prototype.reduce(callback[, initialValue])

reduce() 方法接受一個函數作為參數，這個函數作為一個累加器，從左到右遍歷整個類型數組，最后返回一個單一的值。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); uint8.reduce(function (a, b) {return a + b; }, 0); // 28

16、TypedArray.prototype.reduceRight(callback[, initialValue])

reduceRight()在累加器和類型化數組的每個元素上（從右到左）調用函數，使其歸約為單一的值。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); uint8.reduceRight(function (a, b) {return a + b; }); // 28

17、TypedArray.prototype.reverse()

原地逆序TypedArray數組。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); uint8.reverse(); // [3,5,4,9,5,2]

18、TypedArray.prototype.set(array [,offset])

set()方法用于從指定數組中讀取值，并將其存儲在類型化數組中。

var buffer = new ArrayBuffer(8); var uint8 = new Uint8Array(buffer); uint8.set([1,2,3], 3); console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]

19、TypedArray.prototype.slice([begin[, end]])

返回一個指定位置的新的TypedArray實例。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); uint8.slice(2,5); // [9,4,5]

20、TypedArray.prototype.some(callback[, thisArg])

提供一個測試函數，當TypedArray中的某一個元素通過測試函數，則返回true。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); uint8.some(function (value) { return value > 5; }); // true

21、TypedArray.prototype.sort([compareFunction])

sort()方法原地排序類型化數組的元素，并且返回類型化數組。這個方法的算法和Array.prototype.sort()相同。

var numbers = new Uint8Array([40, 1, 5, 200]); numbers.sort(); // Uint8Array [ 1, 5, 40, 200 ] // 在這里，按數值排序數值時， // 不需要比較函數。

22、TypedArray.prototype.subarray([begin [,end]])

對TypedArray數組的一部分再建立一個新的視圖。第一個參數是起始的成員序號，第二個參數是結束的成員序號（不含該成員）如果省略則包含剩余的全部成員。新視圖和源視圖底層的ArrayBuffer是共用的。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); const new_uint8 = uint8.subarray(2, 5); // [9,4,5] new_uint8[1] = 10; new_uint8; // [9,10,5] uint8; // [2,5,9,10,5,3]

23、TypedArray.prototype.toLocaleString()

toLocaleString()方法返回一個字符串，表明該類型化數組的元素。這些元素被轉化為字符串并由一個區域設置指定的分隔符（例如逗號 “,”）分隔。這個方法與Array.prototype.toLocaleString()擁有相同的算法。同時，由于類型化數組的元素都是數，將每個元素轉化為字符串的算法與Number.prototype.toLocaleString()是相同的。

var uint = new Uint32Array([2000, 500, 8123, 12, 4212]); uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); // "￥2,000,￥500,￥8,123,￥12,￥4,212"

24、TypedArray.prototype.toString()

TypedArray 對象重寫了Object的 toString方法。對 TypedArray 對象來說，toString 方法聯結了數組，并返回一個字符串，它包含由逗號分隔的數組元素。

var numbers = new Uint8Array([2, 5, 8, 1, 4]) numbers.toString(); // "2,5,8,1,4"

25、TypedArray.prototype.values()

返回TypedArray的鍵值遍歷器。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); var iter = uint8.values(); for (let ele of iter) {console.log(ele); } /* 2 5 9 4 5 3 */

26、TypedArray.prototype[@@iterator]()

返回TypedArray鍵值對的遍歷器，效果和values()方法一樣。

const uint8 = new Uint8Array([2, 5, 9, 4, 5, 3]); var iter = uint8[Symbol.iterator](); for (let ele of iter) {console.log(ele); } /* 2 5 9 4 5 3 */

TypedArray的字節序

字節序是指數值在內存中的表示方式。

var buffer = new ArrayBuffer(16); var int32View = new Int32Array(buffer); for (let i = 0; i < int32View.length; i++) {int32View[i] = i * 2; } int32View; // [0,2,4,6]

上述代碼新建了一個16字節的內存區域，并在其上建了一個32位（4字節）的視圖，該視圖有4個元素，對元素分別賦值為0，2，4，6。如果對該內存區域上新建一個16位（2字節）的視圖，我們可以看出數據的存儲方式。

var int16View = new Int16Array(buffer); for (let value of int16View) {console.log(value); } /* 0 0 2 0 4 0 6 0 */

用圖來說明如下：

由于x86體系的計算機都采用小端字節序，相對重要的字節排在后面的內存地址，相對不重要的字節排在前面的內存地址。

比如，一個占據4字節的十六進制數0x12345678，決定其大小的最重要的字節是“12”，最不重要的是“78”，故在內存中，存儲順序是“78563412”。TypedArray數組內部也采用的是本機操作系統設定的字節序讀寫數據。

TypedArray對溢出的處理

不同的視圖類型所能容納的數值范圍是確定的，超出這個范圍就會出現溢出。

TypedArray數組對于溢出采用的處理方法是求余值。正向溢出的含義是指輸入值大于可容納的當前數據類型的最大值，最后得到的值等于當前數據類型的最小值加上余值，再減去1。負向溢出等于當前數據類型的最大值減去余值，再加上1。

// 無符號單字節整型可容納的最大數值是255，最小數值是0 var uint8 = new Uint8Array(1); uint8[0] = 256; // 正向溢出，超出最大值范圍，余值是1 uint8[0]; // 0 最小值+余值-1=0uint8[0] = -12; // 負向溢出，超出最小值范圍，余值是12 uint8[0]; // 最大值-余值+1=255-12+1=244

UInt8ClampedArray視圖的溢出與其他8種類型的規則有所不同。負向溢出的值都是0，正向溢出的值都是255。

var a = new Uint8ClampedArray(1); a[0] = 2112; a[0]; // 255 a[0] = -123 a[0]; // 0

利用TypedArray構建復合視圖

由于視圖的構造函數可以指定起始位置和長度，所以在同一段內存中可以依次存放不同類型的數據，這就叫復合視圖。

var ab = new ArrayBuffer(24); var idView = new Uint32Array(buffer, 0, 1); var userNameView = new Uint8Array(buffer, 4, 16); var amountView = new Float32Array(buffer, 20, 1);

上面的代碼將一個24字節的內存分成3個部分：

字節0到字節3,1個32位無符號整數，用于存放ID。

字節4到字節19存放16個8位無符號整數。

剩下4個字節存放1個32位浮點數。

這樣數據接口用C語言描述如下：

struct User {unsigned int id;char[16] username;float amount; };

---

同系列文章：

《JavaScript二進制數組（1）ArrayBuffer》

《JavaScript二進制數組（2）TypedArray視圖》

《JavaScript二進制數組（3）DataView視圖》

總結

以上是生活随笔為你收集整理的将视图转为image_JavaScript二进制数组（2）TypedArray视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。