電子商務(wù)網(wǎng)站建設(shè)中，你不知道的JS數(shù)組

　　JS的學(xué)習(xí)往往最常用的是在電子商務(wù)網(wǎng)站建設(shè)中，JS除了基本數(shù)據(jù)類型，數(shù)組就是數(shù)據(jù)組合，當(dāng)然肯定還會(huì)有在我們電子商務(wù)網(wǎng)站建設(shè)中我們沒有學(xué)習(xí)或者很少學(xué)習(xí)到的數(shù)組，下面我們就來講講電子商務(wù)網(wǎng)站建設(shè)學(xué)習(xí)中JS數(shù)組問題。

　　我寫的很多東西都是因?yàn)橐瓿赡承┨囟ǖ墓δ芏桃饪偨Y(jié)的，可以算是備忘，本文也是如此。前段時(shí)間一直在研究 Web Audio API 以及語音通信相關(guān)的知識(shí)，內(nèi)容側(cè)重于音頻流在 AudioContext 各個(gè)節(jié)點(diǎn)之間的流動(dòng)情況，而現(xiàn)在要摸清楚音頻到流底是個(gè)什么樣的數(shù)據(jù)格式，所以對(duì) ArrayBuffer 的研究就顯得格外重要了。

　　一、Array 在內(nèi)存中的堆棧模型

　　1. Array 的獲取

　　Javascript 中如何產(chǎn)生 Array：

　　JavaScript

　　[element0, element1, ..., elementN]

　　new Array(element0, element1, ..., elementN)

　　new Array(arrayLength)

　　直接定義，或者通過構(gòu)造函數(shù)創(chuàng)建一個(gè) Array，當(dāng)然也可以使用其他的手段：

　　JavaScript

　　"array".split("");

　　"array".match(/a|r/g);

　　等等，方式有很多。但是 Array 內(nèi)部是個(gè)什么樣的結(jié)構(gòu)，恐怕很多人還不是很清楚。

　　2. 堆棧模型

　　在數(shù)組中我們可以放很多不同數(shù)據(jù)類型的數(shù)據(jù)，如：

　　JavaScript

　　var arr = [21, "李靖", new Date(), function(){}, , null];

　　上面這個(gè)數(shù)組中一次放入了 數(shù)字、字符串、對(duì)象、函數(shù)、undefined 和 null，對(duì)于上面的數(shù)據(jù)接口我們可以具象的描述下：

　　JavaScript

　　棧

　　+---------+ 堆

　　| 21 | +-------------------+

　　+---------+ | |

　　| "李靖" | | |

　　+---------+ | +--------+ |

　　| [refer] |----------->| Object | |

　　+---------+ | +--------+ |

　　| [refer] |----------------->+--------+ |

　　+---------+ | |function| |

　　|undefined| | +--------+ |

　　+---------+ | |

　　| null | +-------------------+

　　+---------+ Created By Barret Lee

　　JavaScript 的數(shù)據(jù)類型分為兩種，一種是值類型，一種是引用類型，常見的引用類型有 Object 和 Array，數(shù)組的儲(chǔ)存模型中，如果是諸如 Number、String 之類的值類型數(shù)據(jù)會(huì)被直接壓入棧中，而引用類型只會(huì)壓入對(duì)該值的一個(gè)索引，用 C 語言的概念來解釋就是只保存了數(shù)據(jù)的指針，這些數(shù)據(jù)是儲(chǔ)存在堆中的某塊區(qū)間中。棧堆并不是獨(dú)立的，棧也可以在堆中存放。

　　好了，對(duì) Array 的說明就到這里，下面具體說說 ArrayBuffer 的相關(guān)知識(shí)。

　　二、ArrayBuffer

　　web 是個(gè)啥玩意兒，web 要討論的最基本問題是什么?我覺得有兩點(diǎn)，一個(gè)是數(shù)據(jù)，一個(gè)是數(shù)據(jù)傳輸，至于數(shù)據(jù)的展示，紛繁復(fù)雜，這個(gè)應(yīng)該是 web 上層的東西。而本文要討論的 ArrayBuffer 就是最基礎(chǔ)的數(shù)據(jù)類型，甚至不能稱之為數(shù)據(jù)類型，它是一個(gè)數(shù)據(jù)容器，需要通過其他方式來讀寫。

　　官方點(diǎn)的定義：

　　The ArrayBuffer is a data type that is used to represent a generic, fixed-length binary data buffer. You can’t directly manipulate the contents of an ArrayBuffer; instead, you create an ArrayBufferView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

　　表示二進(jìn)制數(shù)據(jù)的原始緩沖區(qū)，該緩沖區(qū)用于存儲(chǔ)各種類型化數(shù)組的數(shù)據(jù)。 無法直接讀取或?qū)懭?ArrayBuffer，但可根據(jù)需要將其傳遞到類型化數(shù)組或 DataView 對(duì)象 來解釋原始緩沖區(qū)。

　　他是一個(gè)二進(jìn)制數(shù)據(jù)的原始緩沖區(qū)，雖然 JavaScript 是弱類型語言，但是他本身是對(duì)數(shù)據(jù)的類型和大小都有限制的，我們需要通過某種數(shù)據(jù)結(jié)構(gòu)將緩沖區(qū)的內(nèi)容有序的讀取出來(寫進(jìn)去)。

　　1. 原始緩沖區(qū)的創(chuàng)建

　　通過 ArrayBuffer 這個(gè)構(gòu)造函數(shù)可以創(chuàng)建一個(gè)原始緩沖區(qū)：

　　JavaScript

　　var buffer = new ArrayBuffer(30);

　　從 chrome 控制臺(tái)可以看到：

　　

　　buffer 實(shí)例擁有一個(gè) byteLength 的屬性，用于獲取 buffer 的 size，一個(gè)只有 IE11+ 以及 ios6+ 支持的 slice 方法，用于對(duì) buffer 長(zhǎng)度進(jìn)行截取操作。

　　JavaScript

　　ArrayBuffer slice(

　　unsigned long begin

　　unsigned long end Optional

　　);

　　可以測(cè)試這個(gè) DEMO：

　　JavaScript

　　var buffer = new ArrayBuffer(12);

　　var x = new Int32Array(buffer);

　　x[1] = 1234;

　　var slice = buffer.slice(4);

　　var y = new Int32Array(slice);

　　console.log(x[1]);

　　console.log(y[0]);

　　x[1] = 6789;

　　console.log(x[1]);

　　console.log(y[0]);

　　2. 類型化數(shù)組

　　類型化數(shù)組類型表示可編制索引和操縱的 ArrayBuffer 對(duì)象 的各種視圖。 所有數(shù)組類型的長(zhǎng)度均固定。

　　Int 就是整型，Uint 為無符號(hào)整形，F(xiàn)loat 為浮點(diǎn)型，這些是 C 語言中的基本概念，我就不具體解釋了。由于這些視圖化結(jié)構(gòu)都是大同小異，本文只對(duì) Float32Array 類型作說明，讀者可以舉一反三。

　　Float32Array 跟 Array 是十分類似的，只不過他每一個(gè)元素都是都是一個(gè) 32位(4字節(jié)) 的浮點(diǎn)型數(shù)據(jù)。Float32Array 一旦創(chuàng)建其大小不能再修改。

　　我們可以直接創(chuàng)建一個(gè) Float32Array:

　　JavaScript

　　var x = new Float32Array(2);

　　x[0] = 17;

　　console.log(x[0]); // 17

　　console.log(x[1]); // 0

　　console.log(x.length); // 2

　　需要有這么一個(gè)概念，他依然是一個(gè)數(shù)組，只不過該數(shù)組中的每個(gè)元素都是 Float 32 位的數(shù)據(jù)類型，再如：

　　JavaScript

　　var x = new Float32Array([17, -45.3]);

　　console.log(x[0]); // 17

　　console.log(x[1]); // -45.29999923706055

　　console.log(x.length); // 2

　　我們把一個(gè)數(shù)組的值直接賦給了 x 這個(gè) Float32Array 對(duì)象，那么在儲(chǔ)存之前會(huì)將它轉(zhuǎn)換成一個(gè) 32位浮點(diǎn)數(shù)。

　　由于該類數(shù)組的每個(gè)元素都是同一類型，所以在堆棧模型中，他們?nèi)繒?huì)被壓入到棧之中，因此類型化數(shù)組都是值類型，他并不是引用類型!這個(gè)要引起注意，從下面的例子中也可以反映出來：

　　JavaScript

　　var x = new Float32Array([17, -45.3]);

　　var y = new Float32Array(x);

　　console.log(x[0]); // 17

　　console.log(x[1]); //-45.29999923706055

　　console.log(x.length); // 2

　　x[0] = -2;

　　console.log(y[0]); // 17, y的值沒變

　　將 x 的值復(fù)制給 y，修改 x[0], y[0] 并沒有變化。

　　除了上面的方式，我們還可以通過其他方式來創(chuàng)建一個(gè)類型化數(shù)組：

　　JavaScript

　　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

　　解釋下這里為什么返回 7.

　　JavaScript

　　ArrayBuffer(12)

　　+-+-+-+-+-+-+-+-+-+-+-+-+-+

　　|0|1|2|3|4|5|6|7|8| | | | |

　　+-+-+-+-+-+-+-+-+-+-+-+-+-+

　　\ /

　　x (Float32Array)

　　offset：0

　　byteLength：4

　　length:2

　　JavaScript

　　ArrayBuffer(12)

　　+-+-+-+-+-+-+-+-+-+-+-+-+-+

　　|0|1|2|3|4|5|6|7|8| | | | |

　　+-+-+-+-+-+-+-+-+-+-+-+-+-+

　　\ /

　　y

　　Created By Barret Lee

　　看了上面的圖解還有疑問么?我覺得我不用繼續(xù)解釋了?？梢园?ArrayBuffer 的單位看成 1，而 Float32Array 的單位是 4.

　　3. DataView對(duì)象

　　DataView 對(duì)象對(duì)數(shù)據(jù)的操作更加細(xì)致，不過我覺得沒啥意思，上面提到的各種類型化數(shù)組已經(jīng)可以基本滿足應(yīng)用了，所以這里就一筆帶過，一個(gè)簡(jiǎn)單的示例：

　　JavaScript

　　var buffer = new ArrayBuffer(12);

　　var x = new DataView(buffer, 0);

　　x.setInt8(0, 22);

　　x.setFloat32(1, Math.PI);

　　console.log(x.getInt8(0)); // 22

　　console.log(x.getFloat32(1)); // 3.1415927410125732

　　三、XHR2 中的 ArrayBuffer

　　ArrayBuffer 的應(yīng)用特別廣泛，無論是 WebSocket、WebAudio 還是 Ajax等等，前端方面只要是處理大數(shù)據(jù)或者想提高數(shù)據(jù)處理性能，那一定是少不了 ArrayBuffer 。

　　XHR2 并不是什么新東西，可能你用到了相關(guān)的特性，卻不知這就是 XHR2 的內(nèi)容。最主要的一個(gè)東西就是 xhr.responseType ，他的作用是設(shè)置響應(yīng)的數(shù)據(jù)格式，可選參數(shù)有：”text”、”arraybuffer”、”blob”或”document”。請(qǐng)注意，設(shè)置(或忽略) xhr.responseType = '' 會(huì)默認(rèn)將響應(yīng)設(shè)為"text" 。這里存在一個(gè)這樣的對(duì)應(yīng)關(guān)系：

　　請(qǐng)求 響應(yīng)

　　text DOMString

　　arraybuffer ArrayBuffer

　　blob Blob

　　document Document

　　舉個(gè)栗子：

　　JavaScript

　　var xhr = new XMLHttpRequest();

　　xhr.open('GET', '/path/to/image.png', true);

　　xhr.responseType = 'arraybuffer';

　　xhr.onload = function(e) {

　　// this.response == uInt8Array.buffer

　　var uInt8Array = new Uint8Array(this.response);

　　};

　　xhr.send();

　　我們?cè)?xhr.responseType 中設(shè)置了屬性為 arraybuffer，那么在拿到的數(shù)據(jù)中就可以用類型化數(shù)組來接受啦。

　　JS不是那么容易學(xué)習(xí)的，尤其是自己通過學(xué)習(xí)來搭建電子商務(wù)網(wǎng)站更是非常困難，上述簡(jiǎn)單介紹了一下JS數(shù)組。