まあ、それは実際にはオブジェクトです。たとえば、次のような配列を作成できます。
var array = new Array(10);
JavaScriptアレイのパワーと全能性は、利便性をもたらします。しかし、一般的に言えば:
さまざまな環境では、オールラウンドのものは使用できますが、さまざまな環境に必ずしも適しているわけではありません。
TypedArrayは、ArrayがJavaScriptであまりにも多くのことを行う問題を解決するために起こったことです。
起源TypedArrayは、バッファ内のバイナリデータの読み取りを許可する一般的な固定長バッファータイプです。
JavaScript処理バイナリデータの問題を解決するために、WebGL仕様に導入されています。
TypedArrayは、ほとんどの最新のブラウザによってサポートされています。たとえば、次の方法を使用してtypedArrayを作成できます。
// 8バイトArrayBufferを作成します
var b = new arraybuffer(8);
// bの参照を作成し、int32と入力し、開始位置は0、エンド位置はバッファーの端です
var v1 = new int32Array(b);
// bの参照を作成し、タイプはuint8、開始位置は2、エンド位置はバッファの終了です
var v2 = new uint8array(b、2);
// b、タイプint16の参照を作成し、開始位置は2、合計長は2です
var v3 = new int16Array(b、2、2);
バッファーと作成された参照レイアウトは次のとおりです。
| 変数 | 索引 | |||||||
|---|---|---|---|---|---|---|---|---|
| バイト数 | ||||||||
| b = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| インデックス数 | ||||||||
| v1 = | 0 | 1 | ||||||
| v2 = | 0 | 1 | 2 | 3 | 4 | 5 | ||
| v3 = | 0 | 1 | ||||||
これは、タイプINT32のV1配列の0番目の要素が、型ArrayBufferの0〜3バイトなどであることを意味します。
コンストラクタ上記では、ArrayBufferを介してTypedArrayを作成します。実際、TypedArrayはインスタンスを作成するための3つのコンストラクターを提供します。
TypedArray(符号なしの長さ)
長さが固定されている新しいタイプドレイを作成します。
TypedArray(TypedArrayアレイ)
typedArray(タイプ[]配列)
新しいTypedArrayを作成し、各要素は配列に従って初期化され、要素はそれに応じて変換されます。
typedArray(arraybufferバッファー、オプションの符号なしの長いバイトセット、オプションの符号なしの長さ)
バッファーへの参照として新しいTypedArray、ByteOffsetが開始オフセットとして、長さとして長さを作成します。
したがって、通常、TypedArrayを次のように作成します。
var array = new uint8array(10);
または:
var array = new uint8array([1、2、3、4、5、6、7、8、8、9、10]);
データ操作TypedArrayは、データ操作のためのセッター、ゲッター、セット、およびサブアレイの4つの方法を提供します。
指定されたインデックスの要素を返します。
セッターボイドセット(符号なしの長いインデックス、タイプ値)指定されたインデックスの要素を指定された値に設定します。
void set ( typedArrayアレイ、オプションの符号なしのロングオフセット)void set ( type [] array、オプションの符号なしロングオフセット)アレイに従って値を設定し、オフセットはオフセット位置です。
TypedArraySubarray (長い開始、オプションのロングエンド)開始ビットの開始と終了ビットの終了で新しいTypedArrayを返します。
たとえば、読み取り要素を使用できます。 var array = new uint8array([1、2、3、4、5、6、7、8、9、10]); alert(array [4]); // 5要素の設定を使用できます。 var array = new uint8array([1、2、3、4、5、6、7、8、9、10]); alert(array [4]); // 5Array [4] = 12; alert(array [4]); // 12コピーを取得すると、使用できます。 var array = new uint8array([1、2、3、4、5、6、7、8、9、10]); var array2 = array.subarray(0);配列タイプ| タイプ | サイズ | 説明する | Web IDLタイプ | タイプc |
|---|---|---|---|---|
Int8Array | 1 | 8ビット署名整数 | byte | signed char |
Uint8Array | 1 | 8ビットの符号なし整数 | octet | unsigned char |
Uint8ClampedArray | 1 | 8ビットの符号なし整数(クランプ) | octet | unsigned char |
Int16Array | 2 | 16ビット署名整数 | short | short |
Uint16Array | 2 | 16ビットの符号なし整数 | unsigned short | unsigned short |
Int32Array | 4 | 32ビット署名された整数 | long | int |
Uint32Array | 4 | 32ビットの符号なし整数 | unsigned long | unsigned int |
Float32Array | 4 | 32ビットIEEEフローティングポイント番号 | unrestricted float | float |
Float64Array | 8 | 64ビットIEEEフローティングポイント番号 | unrestricted double | double |
キャンバスをプレイした人は馴染みがあるかもしれません。
Imagedataで画像データを保存するために使用される配列は、uint8clampedarrayタイプであるためです。
例えば:
var context = document.createelement(canvas).getContext(2d); var imagedata = context.createimagedata(100、100); console.log(imagedata.data); Firebugに表示されます。TypedArrayを使用する理由uint8clampedarray {0 = 0、1 = 0、2 = 0、more ...}
JavaScriptの数値は64ビットの浮動小数点数であることがわかっています。バイナリ画像の場合(各ピクセルは8ビットの符号なし整数として保存されています)、JavaScriptアレイでデータを使用する場合、画像のメモリの8倍を使用して画像のデータを保存するのと同等です。 TypedArrayは、元のメモリの1/8のみを使用して画像データを保存するのに役立ちます。
または、WebSocketの場合、Base64で転送するためのより高価な方法でもあり、バイナリ転送に切り替える方が良い場合があります。
もちろん、TypedArrayには、パフォーマンスが向上するなど、より多くの利点があります。これを検証するためにいくつかの小さなテストをしましょう。
テストに参加するブラウザは次のとおりです。テスト1:シーケンシャルリーディングスピードリーディングFirefox 17.0.1およびChrome 23.0.1271.97m
var timearray1 = [];
var timearray2 = [];
function check1(){
var array = new Uint8ClampedArray(5000000);
for(var i = array.length; i - ;){
array [i] = math.floor(math.random() * 100);
}
var temp;
var time1 =(new date())。getTime();
for(var i = array.length; i - ;){
temp = array [i];
}
var time2 =(new date())。getTime();
console.log(time2 -time1);
timearray1.push(time2 -time1);
}
function check2(){
var array2 = new Array(5000000);
for(var i = array2.length; i - ;){
array2 [i] = math.floor(math.random() * 100);
}
var temp;
var time3 =(new date())。getTime();
for(var i = array2.length; i - ;){
temp = array2 [i];
}
var time4 =(new date())。getTime();
console.log(time4 -time3);
timearray2.push(time4 -time3);
}
関数タイマー(__ Fun、__Time、__Callback){
var now = 0;
function begin(){
var timeout = setimeout(function(){
if(今!== __TIME){
Now ++;
__楽しい();
始める();
}それ以外{
if(timearray1.length && timearray2.length){
console.log( "timearray1 ==" + timearray1 + "、平均==" +平均(timearray1));
console.log( "timearray2 ==" + timearray2 + "、平均==" +平均(timearray2));
}
__callback && __callback();
}
}、100);
}
始める();
}
関数平均(__配列){
var total = 0;
for(var i = __array.length; i - ;){
合計 += __array [i];
}
return(total / __array.length);
}
タイマー(check1、10、function(){
タイマー(check2、10);
});
Uint8ClampedArrayの読み取り速度は、配列の読み取り速度よりも大幅に高速であることがわかります(バーが長くなればなるほど時間がかかります)。
テスト2:ランダム読み取り//…
function check1(){
var array = new Uint8ClampedArray(5000000);
for(var i = array.length; i - ;){
array [i] = math.floor(math.random() * 100);
}
var temp;
var time1 =(new date())。getTime();
for(var i = array.length; i - ;){
temp = array [math.floor(math.random() * 5000000)];
}
var time2 =(new date())。getTime();
console.log(time2 -time1);
timearray1.push(time2 -time1);
}
function check2(){
var array2 = new Array(5000000);
for(var i = array2.length; i - ;){
array2 [i] = math.floor(math.random() * 100);
}
var temp;
var time3 =(new date())。getTime();
for(var i = array2.length; i - ;){
temp = array2 [math.floor(math.random() * 5000000)];
}
var time4 =(new date())。getTime();
console.log(time4 -time3);
timearray2.push(time4 -time3);
}
//…
UINT8CLAMPEDARRAYは、配列よりも速く読み取られます。
テスト3:シーケンシャルライティング//…
function check1(){
var array = new Uint8ClampedArray(5000000);
var time1 =(new date())。getTime();
for(var i = array.length; i - ;){
array [i] = math.floor(math.random() * 100);
}
var time2 =(new date())。getTime();
console.log(time2 -time1);
timearray1.push(time2 -time1);
}
function check2(){
var array2 = new Array(5000000);
var time3 =(new date())。getTime();
for(var i = array2.length; i - ;){
array2 [i] = math.floor(math.random() * 100);
}
var time4 =(new date())。getTime();
console.log(time4 -time3);
timearray2.push(time4 -time3);
}
//…
Test4:操作をコピーします(U8CにU8Cに、アレイはU8Cに配列)//…
function check1(){
var array = new Uint8ClampedArray(5000000);
for(var i = array.length; i - ;){
array [i] = math.floor(math.random() * 100);
}
var temp;
var array2 = new Uint8ClampedArray(5000000);
var time1 =(new date())。getTime();
array2.set(array);
var time2 =(new date())。getTime();
console.log(time2 -time1);
timearray2.push(time2 -time1);
}
function check2(){
var array = new Array(5000000);
for(var i = array.length; i - ;){
array [i] = math.floor(math.random() * 100);
}
var temp;
var array2 = new Uint8ClampedArray(5000000);
var time1 =(new date())。getTime();
array2.set(array);
var time2 =(new date())。getTime();
console.log(time2 -time1);
timearray2.push(time2 -time1);
}
//…
U8CをU8Cにコピーすることは、配列をU8Cにコピーするよりもはるかに高速であることがわかります。