حسنًا ، إنه في الواقع كائن ، على سبيل المثال ، يمكننا إنشاء صفيف مثل هذا:
var array = new array (10) ؛
إن القوة والضغط على المصفوفات JavaScript تجلب لنا الراحة. ولكن بشكل عام:
يمكن استخدام الأشياء الشاملة في بيئات مختلفة ، لكنها ليست مناسبة بالضرورة لبيئات مختلفة.
Typedarray هو بالضبط ما حدث لحل المشكلة التي تقوم بها المصفوفات بأشياء كثيرة في JavaScript.
أصلTypedArray هو نوع مخزن مؤقت شائع الطول يسمح بقراءة البيانات الثنائية في المخزن المؤقت.
يتم تقديمه في مواصفات WebGL لحل مشكلة معالجة JavaScript.
تم دعم Typedarray من قبل معظم المتصفحات الحديثة. على سبيل المثال ، يمكنك إنشاء typedarray باستخدام الطريقة التالية:
// إنشاء ArrayBuffer 8 بايت
var B = ArrayBuffer (8) ؛
// قم بإنشاء مرجع لـ B ، type int32 ، وضع البداية هو 0 ، والموقف النهائي هو نهاية المخزن المؤقت
var v1 = new int32array (b) ؛
// قم بإنشاء مرجع لـ B ، والنوع هو UINT8 ، وموضع البداية هو 2 ، والموقف النهائي هو نهاية المخزن المؤقت
var v2 = new uint8array (b ، 2) ؛
// قم بإنشاء مرجع لـ B ، Type Int16 ، وضع البداية هو 2 ، والطول الإجمالي 2
var v3 = new int16array (b ، 2 ، 2) ؛
التصميم المرجعي المخزّن والإنشاء هو:
| عامل | فِهرِس | |||||||
|---|---|---|---|---|---|---|---|---|
| عدد البايتات | ||||||||
| ب = | 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 (نوع [] صفيف)
قم بإنشاء طباعة جديدة ، ويتم تهيئة كل عنصر وفقًا للمصفوفة ، ويتم تحويل العنصر وفقًا لذلك.
TypedArray (ArrayBuffer Buffer ، اختياري غير موقّع بايتوفت ، طول طويل غير موقّع اختياري)
قم بإنشاء typedarray جديد كمرجع إلى المخزن المؤقت ، Byteoffset باعتباره إزاحة وطولها بطوله.
لذلك عادة ما نقوم بإنشاء typedarray بالطريقة التالية:
var array = new Uint8array (10) ؛
أو:
var array = new uint8array ([1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، 10]) ؛
تشغيل البياناتيوفر TypedArray أربع طرق: Setter و Getter و Set و Subarray لعمليات البيانات.
إرجاع عنصر الفهرس المحدد.
مجموعة Void Setter (فهرس طويل غير موقعة ، قيمة النوع )يعين عنصر الفهرس المحدد على القيمة المحددة.
مجموعة باطلة (مجموعة typedarray ، إزاحة طويلة غير موقعة) مجموعة باطلة ( نوع [] صفيف ، إزاحة طويلة غير موقعة) اختيارية غير موقعة)اضبط القيمة وفقًا للمصفوفة ، إزاحة هو موضع الإزاحة.
الطباعة الفرعية ( بداية طويلة ، نهاية طويلة اختيارية)إرجاع typedarray جديد مع بداية البت ونهاية البت.
على سبيل المثال ، يمكن استخدام عناصر القراءة : var array = new uint8array ([1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، 10]) ؛ تنبيه (صفيف [4]) ؛ // 5 يمكن استخدام عناصر الإعداد : var array = new uint8array ([1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، 10]) ؛ تنبيه (صفيف [4]) ؛ // 5array [4] = 12 ؛ تنبيه (صفيف [4]) ؛ // 12 احصل على نسخة ويمكنك استخدامها : var array = new uint8array ([1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، 10]) ؛ var array2 = array.subarray (0) ؛ نوع الصفيف| يكتب | مقاس | يصف | نوع IDL على الويب | النوع ج |
|---|---|---|---|---|
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 على النحو التالي :لماذا تستخدم typedarrayuint8clampedarray {0 = 0 ، 1 = 0 ، 2 = 0 ، المزيد ...}
نحن نعلم أن الأرقام في JavaScript هي أرقام عائمة 64 بت. بالنسبة لصورة ثنائية (يتم تخزين كل بكسل كصاحب صحيح غير موقّع 8 بت) ، إذا كنت ترغب في استخدام بياناتها في صفيف JavaScript ، فهذا يعادل استخدام ذاكرة الصورة 8 مرات لتخزين بيانات الصورة ، والتي من الواضح أنها غير علمية. يمكن أن يساعدنا TypedArray في استخدام 1/8 فقط من الذاكرة الأصلية لتخزين بيانات الصورة.
أو بالنسبة إلى WebSocket ، فهي أيضًا طريقة أكثر تكلفة للنقل باستخدام BASE64 ، وقد يكون التحول إلى النقل الثنائي طريقة أفضل.
بالطبع ، لدى TypedArray المزيد من الفوائد ، مثل الحصول على أداء أفضل. دعونا نفعل بعض الاختبارات الصغيرة للتحقق من ذلك.
المتصفحات المشاركة في الاختبار هي :Test1: قراءة سرعة القراءة المتسلسلةFirefox 17.0.1 و Chrome 23.0.1271.97m
var timearray1 = [] ؛
var timearray2 = [] ؛
وظيفة check1 () {
var array = new Uint8ClampedArray (5000000) ؛
لـ (var i = array.length ؛ i-؛) {
Array [i] = Math.Floor (Math.Random () * 100) ؛
}
var temp ؛
var time1 = (date date ()). getTime () ؛
لـ (var i = array.length ؛ i-؛) {
temp = صفيف [i] ؛
}
var time2 = (date date ()). 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 = (date date ()). getTime () ؛
لـ (var i = array2.length ؛ i-؛) {
temp = array2 [i] ؛
}
var time4 = (New Date ()). getTime () ؛
console.log (time4 - time3) ؛
timearray2.push (time4 - time3) ؛
}
وظيفة مؤقت (__ متعة ، __time ، __callback) {
var الآن = 0 ؛
وظيفة البداية () {
var timeout = setTimeOut (function () {
إذا (الآن! == __TIME) {
الآن ++ ؛
__هزار()؛
يبدأ()؛
}آخر{
if (timearray1.length && timearray2.length) {
console.log ("timearray1 ==" + timearray1 + "، متوسط ==" + المتوسط (timearray1)) ؛
console.log ("timearray2 ==" + timearray2 + "، متوسط ==" + المتوسط (timearray2)) ؛
}
__callback && __callback () ؛
}
} ، 100) ؛
}
يبدأ()؛
}
متوسط الوظيفة (__ array) {
var total = 0 ؛
لـ (var i = __array.length ؛ i-؛) {
المجموع += __array [i] ؛
}
العودة (المجموع / __array.length) ؛
}
Timer (Check1 ، 10 ، function () {
مؤقت (Check2 ، 10) ؛
}) ؛
يمكن ملاحظة أن سرعة القراءة لـ Uint8ClampedArray أسرع بكثير من سرعة الصفيف (كلما طال الوقت ، كلما استغرق الأمر).
Test2: قراءة عشوائية// ...
وظيفة check1 () {
var array = new Uint8ClampedArray (5000000) ؛
لـ (var i = array.length ؛ i-؛) {
Array [i] = Math.Floor (Math.Random () * 100) ؛
}
var temp ؛
var time1 = (date date ()). getTime () ؛
لـ (var i = array.length ؛ i-؛) {
Temp = Array [Math.Floor (Math.Random () * 5000000)] ؛
}
var time2 = (date date ()). 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 = (date date ()). getTime () ؛
لـ (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: الكتابة المتسلسلة// ...
وظيفة check1 () {
var array = new Uint8ClampedArray (5000000) ؛
var time1 = (date date ()). getTime () ؛
لـ (var i = array.length ؛ i-؛) {
Array [i] = Math.Floor (Math.Random () * 100) ؛
}
var time2 = (date date ()). getTime () ؛
console.log (time2 - time1) ؛
timearray1.push (time2 - time1) ؛
}
وظيفة check2 () {
var array2 = صفيف جديد (5000000) ؛
var time3 = (date date ()). getTime () ؛
لـ (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: Copy Operation (U8C to U8C and Array to U8C)// ...
وظيفة check1 () {
var array = new Uint8ClampedArray (5000000) ؛
لـ (var i = array.length ؛ i-؛) {
Array [i] = Math.Floor (Math.Random () * 100) ؛
}
var temp ؛
var array2 = new uint8clampedarray (5000000) ؛
var time1 = (date date ()). getTime () ؛
Array2.set (صفيف) ؛
var time2 = (date date ()). getTime () ؛
console.log (time2 - time1) ؛
timearray2.push (time2 - time1) ؛
}
وظيفة check2 () {
var array = صفيف جديد (5000000) ؛
لـ (var i = array.length ؛ i-؛) {
Array [i] = Math.Floor (Math.Random () * 100) ؛
}
var temp ؛
var array2 = new uint8clampedarray (5000000) ؛
var time1 = (date date ()). getTime () ؛
Array2.set (صفيف) ؛
var time2 = (date date ()). getTime () ؛
console.log (time2 - time1) ؛
timearray2.push (time2 - time1) ؛
}
// ...
يمكن ملاحظة أن نسخ U8C إلى U8C أسرع بكثير من نسخ الصفيف إلى U8C.