มันเป็นวัตถุจริง ๆ เราสามารถสร้างอาร์เรย์เช่นนี้:
var array = อาร์เรย์ใหม่ (10);
พลังและการมีอำนาจทุกอย่างของอาร์เรย์ JavaScript นำมาซึ่งความสะดวกแก่เรา แต่โดยทั่วไปพูด:
ทุกสิ่งรอบด้านสามารถใช้ในสภาพแวดล้อมที่หลากหลาย แต่ไม่จำเป็นต้องเหมาะกับสภาพแวดล้อมที่หลากหลาย
TypedArray เป็นสิ่งที่เกิดขึ้นอย่างแม่นยำในการแก้ปัญหาที่อาร์เรย์ทำสิ่งต่าง ๆ ใน JavaScript มากเกินไป
ต้นทางTypedArray เป็นประเภทบัฟเฟอร์ความยาวคงที่ทั่วไปที่อนุญาตให้อ่านข้อมูลไบนารีในบัฟเฟอร์
มันถูกนำมาใช้ในข้อกำหนด WebGL เพื่อแก้ไขปัญหาของการประมวลผลข้อมูลไบนารี JavaScript
TypedArray ได้รับการสนับสนุนจากเบราว์เซอร์ที่ทันสมัยที่สุด ตัวอย่างเช่นคุณสามารถสร้าง typedArray โดยใช้วิธีการต่อไปนี้:
// สร้าง ArrayBuffer 8 ไบต์
var b = new ArrayBuffer (8);
// สร้างการอ้างอิงของ B, พิมพ์ INT32, ตำแหน่งเริ่มต้นคือ 0 และตำแหน่งสุดท้ายคือจุดสิ้นสุดของบัฟเฟอร์
var v1 = ใหม่ int32Array (b);
// สร้างการอ้างอิงของ B, ประเภทคือ UINT8, ตำแหน่งเริ่มต้นคือ 2 และตำแหน่งสุดท้ายคือจุดสิ้นสุดของบัฟเฟอร์
var v2 = ใหม่ uint8array (b, 2);
// สร้างการอ้างอิงของ B, ประเภท INT16, ตำแหน่งเริ่มต้นคือ 2 และความยาวทั้งหมดคือ 2
var v3 = ใหม่ 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 | ||||||
ซึ่งหมายความว่าองค์ประกอบที่ 0 ของอาร์เรย์ V1 ของประเภท INT32 คือ 0-3 ไบต์ของประเภท ArrayBuffer และอื่น ๆ
ตัวสร้างข้างต้นเราสร้าง TypedArray ผ่าน ArrayBuffer และในความเป็นจริง TypedArray ให้ตัวสร้าง 3 ตัวเพื่อสร้างอินสแตนซ์
TypedArray (ความยาวยาวที่ไม่ได้ลงชื่อ)
สร้าง typedArray ใหม่ที่มีความยาวเป็นความยาวคงที่
TypedArray (TypedArray Array)
TypedArray (ประเภท [] อาร์เรย์)
สร้าง TypedArray ใหม่แต่ละองค์ประกอบจะเริ่มต้นตามอาร์เรย์และองค์ประกอบจะถูกแปลงตามนั้น
TypedArray (ArrayBuffer Buffer, Long ByteOffset ที่ไม่ได้ลงชื่อเลือกยาว, ความยาวที่ไม่ได้ลงนามเป็นตัวเลือก)
สร้าง TypedArray ใหม่เป็นการอ้างอิงถึงบัฟเฟอร์ ByteOffset เป็นออฟเซ็ตและความยาวเริ่มต้นตามความยาว
ดังนั้นเรามักจะสร้าง TypedArray ด้วยวิธีต่อไปนี้:
var array = ใหม่ uint8array (10);
หรือ:
var array = ใหม่ uint8array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
การดำเนินการข้อมูลTypedArray มีวิธีการสี่วิธี: Setter, Getter, Set และ Subarray สำหรับการดำเนินการข้อมูล
ส่งคืนองค์ประกอบของดัชนีที่ระบุ
Setter Void Set (ดัชนียาวที่ไม่ได้ลงชื่อ, ค่า ประเภท )ตั้งค่าองค์ประกอบของดัชนีที่ระบุเป็นค่าที่ระบุ
Void Set ( TypedArray Array, Offset ที่ไม่ได้ลงนามยาว) ชุด โมฆะ ( Type [] อาร์เรย์, ออฟเซ็ตยาวที่ไม่ได้ลงชื่อ) เป็นตัวเลือก)ตั้งค่าตามอาร์เรย์ออฟเซ็ตคือตำแหน่งออฟเซ็ต
TypedArray subarray (เริ่มยาว, ปลายยาวเป็นทางเลือก)ส่งคืน TypedArray ใหม่ด้วยบิตเริ่มต้นและจุดสิ้นสุด
ตัวอย่างเช่นองค์ประกอบการอ่านสามารถใช้ : var array = ใหม่ uint8array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); แจ้งเตือน (อาร์เรย์ [4]); // 5 องค์ประกอบการตั้งค่าสามารถใช้ : var array = ใหม่ uint8array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); แจ้งเตือน (อาร์เรย์ [4]); // 5Array [4] = 12; แจ้งเตือน (อาร์เรย์ [4]); // 12 รับสำเนาและคุณสามารถใช้ : var array = ใหม่ uint8array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); var array2 = array.subarray (0); ประเภทอาร์เรย์| พิมพ์ | ขนาด | อธิบาย | ประเภทเว็บ 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 | หมายเลขจุดลอยตัว IEEE 32 บิต | 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 เป็น :ทำไมต้องใช้ TypedArrayuint8clampedarray {0 = 0, 1 = 0, 2 = 0, เพิ่มเติม ... }
เรารู้ว่าตัวเลขใน JavaScript เป็นหมายเลขจุดลอยตัว 64 บิต สำหรับภาพไบนารี (แต่ละพิกเซลจะถูกเก็บไว้เป็นจำนวนเต็ม 8 บิตที่ไม่ได้ลงนาม) หากคุณต้องการใช้ข้อมูลในอาร์เรย์ JavaScript มันจะเทียบเท่ากับการใช้หน่วยความจำ 8 เท่าของภาพเพื่อเก็บข้อมูลของภาพ TypedArray สามารถช่วยเราใช้หน่วยความจำดั้งเดิม 1/8 ของ 1/8 เพื่อจัดเก็บข้อมูลภาพ
หรือสำหรับ WebSocket มันเป็นวิธีที่แพงกว่าในการถ่ายโอนด้วย Base64 และการเปลี่ยนไปใช้การถ่ายโอนไบนารีอาจเป็นวิธีที่ดีกว่า
แน่นอนว่า TypedArray มีประโยชน์มากกว่าเช่นมีประสิทธิภาพที่ดีขึ้น มาทดสอบเล็ก ๆ กันเพื่อตรวจสอบสิ่งนี้กันเถอะ
เบราว์เซอร์ที่เข้าร่วมในการทดสอบคือ :test1: การอ่านความเร็วในการอ่านตามลำดับFirefox 17.0.1 และ Chrome 23.0.1271.97m
var timearray1 = [];
var timearray2 = [];
ฟังก์ชั่น check1 () {
var array = ใหม่ uint8clampedarray (5000000);
สำหรับ (var i = array.length; i-;) {
อาร์เรย์ [i] = math.floor (math.random () * 100);
-
var temp;
var time1 = (วันที่ใหม่ ()). getTime ();
สำหรับ (var i = array.length; i-;) {
temp = array [i];
-
var time2 = (วันที่ใหม่ ()). getTime ();
console.log (time2 - time1);
timearray1.push (time2 - time1);
-
ฟังก์ชั่น check2 () {
var array2 = อาร์เรย์ใหม่ (5000000);
สำหรับ (var i = array2.length; i-;) {
array2 [i] = math.floor (math.random () * 100);
-
var temp;
var time3 = (วันที่ใหม่ ()). getTime ();
สำหรับ (var i = array2.length; i-;) {
temp = array2 [i];
-
var time4 = (วันที่ใหม่ ()). getTime ();
console.log (time4 - time3);
timearray2.push (time4 - time3);
-
ตัวจับเวลาฟังก์ชั่น (__ fun, __time, __Callback) {
var now = 0;
ฟังก์ชั่นเริ่มต้น () {
var timeout = settimeout (function () {
ถ้า (ตอนนี้! == __time) {
ตอนนี้ ++;
__สนุก();
เริ่ม();
}อื่น{
if (timearray1.length && timearray2.length) {
console.log ("timearray1 ==" + timearray1 + ", เฉลี่ย ==" + ค่าเฉลี่ย (timearray1));
console.log ("timearray2 ==" + timearray2 + ", เฉลี่ย ==" + ค่าเฉลี่ย (timearray2));
-
__CALLBACK && __CALLBACK ();
-
}, 100);
-
เริ่ม();
-
ฟังก์ชั่นเฉลี่ย (อาร์เรย์ __) {
var total = 0;
สำหรับ (var i = __array.length; i-;) {
ทั้งหมด += __ARRAY [i];
-
return (Total / __ARRAY.Length);
-
จับเวลา (check1, 10, function () {
ตัวจับเวลา (Check2, 10);
-
จะเห็นได้ว่าความเร็วในการอ่านของ Uint8ClampedArray นั้นเร็วกว่าอาร์เรย์ (ยิ่งบาร์นานเท่าไหร่ก็ยิ่งใช้เวลามากขึ้น)
test2: การอ่านแบบสุ่ม-
ฟังก์ชั่น check1 () {
var array = ใหม่ uint8clampedarray (5000000);
สำหรับ (var i = array.length; i-;) {
อาร์เรย์ [i] = math.floor (math.random () * 100);
-
var temp;
var time1 = (วันที่ใหม่ ()). getTime ();
สำหรับ (var i = array.length; i-;) {
temp = array [math.floor (math.random () * 5000000)];
-
var time2 = (วันที่ใหม่ ()). getTime ();
console.log (time2 - time1);
timearray1.push (time2 - time1);
-
ฟังก์ชั่น check2 () {
var array2 = อาร์เรย์ใหม่ (5000000);
สำหรับ (var i = array2.length; i-;) {
array2 [i] = math.floor (math.random () * 100);
-
var temp;
var time3 = (วันที่ใหม่ ()). getTime ();
สำหรับ (var i = array2.length; i-;) {
temp = array2 [math.floor (math.random () * 5000000)];
-
var time4 = (วันที่ใหม่ ()). getTime ();
console.log (time4 - time3);
timearray2.push (time4 - time3);
-
-
Uint8ClampedArray อ่านได้เร็วกว่าอาร์เรย์
test3: การเขียนตามลำดับ-
ฟังก์ชั่น check1 () {
var array = ใหม่ uint8clampedarray (5000000);
var time1 = (วันที่ใหม่ ()). getTime ();
สำหรับ (var i = array.length; i-;) {
อาร์เรย์ [i] = math.floor (math.random () * 100);
-
var time2 = (วันที่ใหม่ ()). getTime ();
console.log (time2 - time1);
timearray1.push (time2 - time1);
-
ฟังก์ชั่น check2 () {
var array2 = อาร์เรย์ใหม่ (5000000);
var time3 = (วันที่ใหม่ ()). getTime ();
สำหรับ (var i = array2.length; i-;) {
array2 [i] = math.floor (math.random () * 100);
-
var time4 = (วันที่ใหม่ ()). getTime ();
console.log (time4 - time3);
timearray2.push (time4 - time3);
-
-
test4: การดำเนินการคัดลอก (U8C ถึง U8C และอาร์เรย์เป็น U8C)-
ฟังก์ชั่น check1 () {
var array = ใหม่ uint8clampedarray (5000000);
สำหรับ (var i = array.length; i-;) {
อาร์เรย์ [i] = math.floor (math.random () * 100);
-
var temp;
var array2 = ใหม่ uint8clampedarray (5000000);
var time1 = (วันที่ใหม่ ()). getTime ();
array2.set (อาร์เรย์);
var time2 = (วันที่ใหม่ ()). getTime ();
console.log (time2 - time1);
timearray2.push (time2 - time1);
-
ฟังก์ชั่น check2 () {
var array = อาร์เรย์ใหม่ (5000000);
สำหรับ (var i = array.length; i-;) {
อาร์เรย์ [i] = math.floor (math.random () * 100);
-
var temp;
var array2 = ใหม่ uint8clampedarray (5000000);
var time1 = (วันที่ใหม่ ()). getTime ();
array2.set (อาร์เรย์);
var time2 = (วันที่ใหม่ ()). getTime ();
console.log (time2 - time1);
timearray2.push (time2 - time1);
-
-
จะเห็นได้ว่าการคัดลอก U8C ถึง U8C นั้นเร็วกว่าการคัดลอกอาร์เรย์ไปยัง U8C มาก