Javascript中的数组是个强大的家伙&＃xff1a;
- 你可以创建的时候不规定长度&＃xff0c;而是动态的去改变长度。
- 你可以把他当成普通的数组去读取&＃xff0c;也可以当他是堆栈来使用。
- 你可以改变数组中每个元素的值甚至是类型。
好吧&＃xff0c;其实他是一个对象&＃xff0c;比如我们可以这样去创建数组&＃xff1a;
var array &＃61; new Array(10);
Javascript的数组的强大以及全能&＃xff0c;给我们带来了便捷性。但一般而言&＃xff1a;
全能的东西能在各种环境下使用&＃xff0c;但却不一定适用于各种环境。
而TypedArray正是为了解决Javascript中数组“干太多事”而出现的。
起源
TypedArray是一种通用的固定长度缓冲区类型&＃xff0c;允许读取缓冲区中的二进制数据。
其在WEBGL规范中被引入用于解决Javascript处理二进制数据的问题。
TypedArray已经被大部分现代浏览器支持&＃xff0c;例如可以用下面方法创建TypedArray&＃xff1a;
// 创建一个8-byte的ArrayBuffervar b &＃61; new ArrayBuffer(8);// 创建一个b的引用&＃xff0c;类型是Int32&＃xff0c;起始位置在0&＃xff0c;结束位置为缓冲区尾部var v1 &＃61; new Int32Array(b);// 创建一个b的引用&＃xff0c;类型是Uint8&＃xff0c;起始位置在2&＃xff0c;结束位置为缓冲区尾部var v2 &＃61; new Uint8Array(b, 2);// 创建一个b的引用&＃xff0c;类型是Int16&＃xff0c;起始位置在2&＃xff0c;总长度为2var v3 &＃61; new Int16Array(b, 2, 2);
则缓冲和创建的引用布局为&＃xff1a;
| 变量 | 索引 | |||||||
|---|---|---|---|---|---|---|---|---|
| 字节数 | ||||||||
| b &＃61; | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 索引数 | ||||||||
| v1 &＃61; | 0 | 1 | ||||||
| v2 &＃61; | 0 | 1 | 2 | 3 | 4 | 5 | ||
| v3 &＃61; | 0 | 1 | ||||||
这表示Int32类型的v1数组的第0个元素是ArrayBuffer类型的b的第0-3个字节&＃xff0c;如此等等。
构造函数
上面我们通过ArrayBuffer来创建TypedArray&＃xff0c;而实际上&＃xff0c;TypedArray提供了3个构造函数来创建他的实例。
| 构造函数 | |
|---|---|
| |
| |
|
所以通常我们用下面的方式创建TypedArray&＃xff1a;
var array &＃61; new Uint8Array(10);
或者&＃xff1a;
var array &＃61; new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
数据操作
TypedArray提供了setter、getter、set和subarray四个方法进行数据操作。
| 方法 | |
|---|---|
| |
| |
| |
|
例如读取元素可以用&＃xff1a;
var array &＃61; new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
alert(array[4]); //5
设置元素可以用&＃xff1a;
var array &＃61; new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
alert(array[4]); //5
array[4] &＃61; 12;
alert(array[4]); //12
获取一个副本可以用&＃xff1a;
var array &＃61; new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
var array2 &＃61; array.subarray(0);
数组类型
| 类型 | 大小 | 描述 | Web IDL类型 | C 类型 |
|---|---|---|---|---|
Int8Array | 1 | 8位有符号整数 | byte | signed char |
Uint8Array | 1 | 8位无符号整数 | octet | unsigned char |
Uint8ClampedArray | 1 | 8位无符号整数 (clamped) | 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 |
玩过canvas的可能会觉得很眼熟。
因为ImageData中用于存储图像数据的数组便是Uint8ClampedArray类型的。
例如&＃xff1a;
var context &＃61; document.createElement("canvas").getContext("2d");var imageData &＃61; context.createImageData(100, 100);console.log(imageData.data);
其在FireBug中显示为&＃xff1a;
Uint8ClampedArray { 0&＃61;0, 1&＃61;0, 2&＃61;0, 更多...}
为什么要用TypedArray
我们知道Javascript中数字是64位浮点数。则对于一个二进制图片&＃xff08;图片每个像素点是以8位无符号整数存储的&＃xff09;&＃xff0c;如果要将其数据在Javascript数组中使用&＃xff0c;相当于使用了图片8倍的内存来存储一个图片的数据&＃xff0c;这显然是不科学的。而TypedArray能帮助我们只使用原来1/8的内存来存储图片数据。
或者对于WebSocket&＃xff0c;如果用base64进行传输也是一个花费较高的方式&＃xff0c;转而使用二进制传送可能是更好的方式。
当然&＃xff0c;TypedArray还有更多好处&＃xff0c;比如具有更好的性能&＃xff0c;下面我们进行一些小测试来验证这一点。
参与测试的浏览器为&＃xff1a;
FireFox 17.0.1 和 Chrome 23.0.1271.97m
- Test1&＃xff1a;顺序读取速读
var timeArray1 &＃61; [];
var timeArray2 &＃61; [];function check1(){var array &＃61; new Uint8ClampedArray(5000000);for(var i &＃61; array.length; i--;){array[i] &＃61; Math.floor(Math.random() * 100);}var temp;var time1 &＃61; (new Date()).getTime();for(var i &＃61; array.length; i--;){temp &＃61; array[i];}var time2 &＃61; (new Date()).getTime();console.log(time2 - time1);timeArray1.push(time2 - time1);
}function check2(){var array2 &＃61; new Array(5000000);for(var i &＃61; array2.length; i--;){array2[i] &＃61; Math.floor(Math.random() * 100);}var temp;var time3 &＃61; (new Date()).getTime();for(var i &＃61; array2.length; i--;){temp &＃61; array2[i];}var time4 &＃61; (new Date()).getTime();console.log(time4 - time3);timeArray2.push(time4 - time3);
}function timer(__fun, __time, __callback){var now &＃61; 0;function begin(){var timeout &＃61; setTimeout(function(){if(now !&＃61;&＃61; __time){now&＃43;&＃43;;__fun();begin();}else{if(timeArray1.length && timeArray2.length){console.log("timeArray1 &＃61;&＃61; " &＃43; timeArray1 &＃43; ", average &＃61;&＃61; " &＃43; average(timeArray1));console.log("timeArray2 &＃61;&＃61; " &＃43; timeArray2 &＃43; ", average &＃61;&＃61; " &＃43; average(timeArray2));}__callback && __callback();}}, 100);}begin();
}function average(__array){var total &＃61; 0;for(var i &＃61; __array.length; i--;){total &＃43;&＃61; __array[i];}return (total / __array.length);
}timer(check1, 10, function(){timer(check2, 10);
});
可见Uint8ClampedArray的读取速度明显比Array要快&＃xff08;条状柱越长&＃xff0c;代表花费时间越多&＃xff09;。
- Test2&＃xff1a;随机读取
//……function check1(){var array &＃61; new Uint8ClampedArray(5000000);for(var i &＃61; array.length; i--;){array[i] &＃61; Math.floor(Math.random() * 100);}var temp;var time1 &＃61; (new Date()).getTime();for(var i &＃61; array.length; i--;){temp &＃61; array[Math.floor(Math.random() * 5000000)];}var time2 &＃61; (new Date()).getTime();console.log(time2 - time1);timeArray1.push(time2 - time1);
}function check2(){var array2 &＃61; new Array(5000000);for(var i &＃61; array2.length; i--;){array2[i] &＃61; Math.floor(Math.random() * 100);}var temp;var time3 &＃61; (new Date()).getTime();for(var i &＃61; array2.length; i--;){temp &＃61; array2[Math.floor(Math.random() * 5000000)];}var time4 &＃61; (new Date()).getTime();console.log(time4 - time3);timeArray2.push(time4 - time3);
}//……
随即读取中Uint8ClampedArray的读取速度也是比Array要快的。
- Test3&＃xff1a;顺序写入
//……function check1(){var array &＃61; new Uint8ClampedArray(5000000);var time1 &＃61; (new Date()).getTime();for(var i &＃61; array.length; i--;){array[i] &＃61; Math.floor(Math.random() * 100);}var time2 &＃61; (new Date()).getTime();console.log(time2 - time1);timeArray1.push(time2 - time1);
}function check2(){var array2 &＃61; new Array(5000000);var time3 &＃61; (new Date()).getTime();for(var i &＃61; array2.length; i--;){array2[i] &＃61; Math.floor(Math.random() * 100);}var time4 &＃61; (new Date()).getTime();console.log(time4 - time3);timeArray2.push(time4 - time3);
}//……
- Test4&＃xff1a;复制操作&＃xff08;U8C to U8C 和 Array to U8C&＃xff09;
//……function check1(){var array &＃61; new Uint8ClampedArray(5000000);for(var i &＃61; array.length; i--;){array[i] &＃61; Math.floor(Math.random() * 100);}var temp;var array2 &＃61; new Uint8ClampedArray(5000000);var time1 &＃61; (new Date()).getTime();array2.set(array);var time2 &＃61; (new Date()).getTime();console.log(time2 - time1);timeArray2.push(time2 - time1);
}function check2(){var array &＃61; new Array(5000000);for(var i &＃61; array.length; i--;){array[i] &＃61; Math.floor(Math.random() * 100);}var temp;var array2 &＃61; new Uint8ClampedArray(5000000);var time1 &＃61; (new Date()).getTime();array2.set(array);var time2 &＃61; (new Date()).getTime();console.log(time2 - time1);timeArray2.push(time2 - time1);
}//……
可见U8C复制到U8C&＃xff0c;比Array复制到U8C快得多。
参考文献
Typed Array Specification
京公网安备 11010802041100号