TypedArray في JavaScript

تشرح هذه المقالة TypedArray في JavaScript۔

سنشرح بالتفصيل المفهوم الأساسي لـ TypedArray، وكل نوع، وكيفية استخدامهم، والحالات الخاصة للاستخدام.۔

YouTube Video

TypedArray في JavaScript

TypedArray في JavaScript هو كائن لمعالجة البيانات الثنائية المؤقتة بكفاءة۔ TypedArray يخصص ويعالج الذاكرة بناءً على أنواع بيانات محددة۔ على عكس المصفوفات العادية، يمكن أن تحتوي TypedArray فقط على بيانات ثنائية بحجم ثابت، وليس أنواع بيانات عشوائية۔

البنية الأساسية لـ TypedArray

المكونات الرئيسية لـ TypedArray هي ArrayBuffer وTypedArray نفسه۔

• ArrayBuffer: هو مخزن مؤقت بحجم ثابت يخصص البيانات الثنائية في الذاكرة۔ هذا المخزن المؤقت هو مجرد منطقة بيانات ولا يمكن القراءة منه أو الكتابة إليه مباشرة۔
• TypedArray: هو كائن مغلف يطبق نوع بيانات معين على المخزن المؤقت، مما يتيح الوصول إلى البيانات ومعالجتها۔

مثال على الاستخدام الأساسي

فيما يلي مثال على إنشاء ArrayBuffer ثم إنشاء TypedArray بناءً عليه۔

 1// Create a 16-byte buffer
 2const buffer = new ArrayBuffer(16);
 3
 4// Create a TypedArray (Uint8Array) to handle 8-bit unsigned integers
 5const uint8Array = new Uint8Array(buffer);
 6
 7// Set data
 8uint8Array[0] = 255;
 9uint8Array[1] = 128;
10
11// Retrieve data
12console.log(uint8Array[0]); // 255
13console.log(uint8Array[1]); // 128

• في هذا المثال، يتم إنشاء ArrayBuffer، ثم يتم إنشاء Uint8Array بناءً على هذا المخزن المؤقت۔ يتم التعامل مع كل عنصر كعدد صحيح غير موقع مكون من 8 بت، حيث يتم تخزين القيم فقط ضمن النطاق المحدد۔

أنواع TypedArray

توجد أنواع مختلفة من TypedArray لكل نوع من البيانات۔ الرئيسية منها هي كالتالي۔

هذه الأنواع من TypedArray كفوءة من حيث الذاكرة وفعّالة للتعامل مع كميات كبيرة من البيانات۔

التعامل مع TypedArrays

يمكنك الوصول إلى البيانات في TypedArray باستخدام الفهارس تمامًا مثل المصفوفة العادية، ولكن يتم توفير عدة طرق خاصة أيضًا۔

تعيين القيم

في TypedArray، يمكنك تعيين قيم متعددة دفعة واحدة باستخدام دالة set۔

1const buffer = new ArrayBuffer(8);
2const int16Array = new Int16Array(buffer);
3
4// Set values
5int16Array.set([10, 20, 30]);
6
7console.log(int16Array[0]); // 10
8console.log(int16Array[1]); // 20
9console.log(int16Array[2]); // 30

• يستخدم هذا الكود الطريقة set لتعيين عدة قيم دفعة واحدة إلى مصفوفة من نوع Int16Array، ويعرض كل عنصر في وحدة التحكم.۔

الحصول على مصفوفة فرعية

للحصول على جزء من TypedArray كمصفوفة فرعية، استخدم دالة subarray۔ هذا يشير إلى نفس المخزن المؤقت مثل TypedArray الأصلي۔

1const int16Array = new Int16Array([1, 2, 3, 4, 5]);
2
3// Get a subarray containing elements from the 2nd to the 4th
4const subArray = int16Array.subarray(1, 4);
5
6console.log(subArray); // Int16Array [2, 3, 4]

• يسترجع هذا الكود مجموعة محددة من العناصر من مصفوفة من نوع Int16Array باستخدام الطريقة subarray ويعرض الجزء الفرعي في وحدة التحكم.۔

نسخ المخازن المؤقتة

يمكن أيضًا نسخ المخزن المؤقت لـ TypedArray إلى TypedArray آخر۔ باستخدام دالة set، يمكنك النسخ من موقع محدد۔

1const srcArray = new Uint8Array([10, 20, 30, 40]);
2const destArray = new Uint8Array(4);
3
4// Copy
5destArray.set(srcArray);
6
7console.log(destArray); // Uint8Array [10, 20, 30, 40]

• ينسخ هذا الكود محتويات مصفوفة من نوع Uint8Array إلى مصفوفة أخرى باستخدام الطريقة set، ويعرض المصفوفة المنسوخة في وحدة التحكم.۔

استخدام DataView

بينما يتعامل TypedArray مع المخازن المؤقتة مع نوع بيانات ثابت، يوفر DataView واجهة تتيح التلاعب المرن بالبيانات الثنائية مع إزاحات وأنواع بيانات عشوائية۔ هذا يتيح مزج أنواع مختلفة داخل نفس المخزن المؤقت۔

 1const buffer = new ArrayBuffer(8);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer at offset 0
 5dataView.setInt32(0, 12345);
 6
 7// Write a 32-bit floating-point number at offset 4
 8dataView.setFloat32(4, 12.34);
 9
10console.log(dataView.getInt32(0)); // 12345
11console.log(dataView.getFloat32(4)); // 12.34000015258789

• يستخدم هذا الكود كائن DataView لكتابة أنواع مختلفة من البيانات—أعداد صحيحة 32-بت وأعداد عشرية عائمة 32-بت—على نفس الذاكرة المؤقتة ويتحقق من النتائج.۔

• DataView يوفر مرونة أكبر في الوصول إلى البيانات مقارنة بـ TypedArray، وهو مفيد بشكل خاص عند التعامل مع ملفات ذات تنسيق ثنائي أو بروتوكولات الشبكة۔

حالات استخدام TypedArray

TypedArray يُستخدم بشكل رئيسي للتعامل بكفاءة مع كميات كبيرة من البيانات الثنائية۔ تشمل حالات الاستخدام المحددة ما يلي۔

معالجة الصور

يُستخدم TypedArray عند التعامل مع معلومات البكسل في بيانات الصور۔ باستخدام Uint8Array، يمكنك تخزين قيم RGBA لكل بكسل وإجراء تحرير ومعالجة للصور۔

 1const width = 100;
 2const height = 100;
 3const imageData = new Uint8Array(width * height * 4); // RGBA
 4
 5// Set pixel data
 6for (let i = 0; i < imageData.length; i += 4) {
 7    imageData[i] = 255;     // Red
 8    imageData[i + 1] = 0;   // Green
 9    imageData[i + 2] = 0;   // Blue
10    imageData[i + 3] = 255; // Alpha
11}

• ينشئ هذا الكود بيانات صورة بعرض 100 وارتفاع 100 بصيغة RGBA باستخدام مصفوفة من نوع Uint8Array، ويضبط جميع وحدات البكسل إلى اللون الأحمر.۔

التعامل مع WebAssembly

يتم استخدام TypedArray لتبادل البيانات الثنائية بين JavaScript و WebAssembly۔ من خلال مشاركة مساحة ذاكرة JavaScript و WebAssembly باستخدام ArrayBuffer، يمكن تبادل البيانات بسرعة۔

معالجة بيانات الصوت والفيديو

TypedArray يلعب دورًا هامًا في معالجة الصوت والفيديو۔ يمكنك تخزين أشكال موجات الصوت في Float32Array لإجراء التشغيل والمعالجة۔

الخاتمة

TypedArray هو أداة قوية لمعالجة كميات كبيرة من البيانات الثنائية بكفاءة۔ إنها مفيدة بشكل خاص في التطبيقات الحساسة للأداء مثل معالجة الصور وWebAssembly ومعالجة بيانات الصوت والفيديو۔ يحتوي TypedArray على واجهة برمجة تطبيقات مشابهة للمصفوفات العادية، لكن هناك قيود تتعلق باستخدام الذاكرة وأنواع البيانات، لذلك يتطلب الأمر تمييزًا صحيحًا في الاستخدام۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video