`ArrayBuffer` في JavaScript

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

سنشرح كل شيء عن ArrayBuffer، بدءاً من الأساسيات إلى استخداماته، وأنواعه المتعلقة، وتطبيقاته العملية.۔

YouTube Video

ArrayBuffer في JavaScript

ArrayBuffer في JavaScript هو كائن للتعامل مع البيانات الثنائية منخفضة المستوى، وهو مفيد بشكل خاص لمعالجة البيانات الثنائية في WebAPIs، وعمليات الملفات، والاتصالات الشبكية.۔

ما هو ArrayBuffer

ArrayBuffer هو هيكل بيانات للتعامل مع البيانات الثنائية بطول ثابت.۔ يسمح بمعالجة البيانات الثنائية الخام التي لا يمكن معالجتها باستخدام مصفوفات أو كائنات JavaScript العادية.۔

لا يستطيع ArrayBuffer نفسه معالجة البيانات مباشرة.۔ بدلاً من ذلك، يتم قراءة البيانات وكتابتها باستخدام TypedArray أو DataView استنادًا إلى ArrayBuffer.۔

يكون ArrayBuffer مفيداً بشكل خاص في الحالات التالية۔

• عند معالجة البيانات الثنائية المستلمة من الشبكة
• عند الحاجة إلى مشاركة البيانات بكفاءة في Web Worker.
• عند تنفيذ معالجة الصور أو التصيير ثلاثي الأبعاد باستخدام Canvas أو WebGL.
• عند معالجة الملفات (خصوصاً الملفات الثنائية).

إنشاء ArrayBuffer

أولاً، لنبدأ بكيفية إنشاء كائن ArrayBuffer.۔ ArrayBuffer يخصص الذاكرة بوحدات البايت، لذلك تحدد حجمه عند إنشائه.۔

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• في هذا المثال، يتم تخصيص مخزن مؤقت بحجم 16 بايت.۔ هذا المخزن المؤقت لا يحتوي على أي بيانات حتى الآن.۔

معالجة البيانات باستخدام TypedArray

لا يمكنك الوصول مباشرة إلى ArrayBuffer، لذا تستخدم TypedArray لقراءة البيانات وكتابتها.۔ TypedArray يوفر أنواعًا مختلفة من العروض مثل Int8Array و Float32Array، مما يتيح الوصول الفعال إلى البيانات الثنائية.۔

مثال باستخدام Int8Array

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42

• Int8Array يمكنه تخزين البيانات في كل بايت، مما يسمح للمخزن المؤقت بحمل 8 عناصر.۔ بهذه الطريقة، باستخدام أنواع مختلفة من المشاهد، يمكنك معالجة البيانات بكفاءة۔

أمثلة أخرى على TypedArray

تحتوي JavaScript على أنواع مختلفة من TypedArray۔ على سبيل المثال، إذا كنت ترغب في معالجة الأعداد الصحيحة غير الموقعة ذات 32 بت، يمكنك استخدام Uint32Array۔

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• يمكن لـ Uint32Array تخزين البيانات في وحدات من 4 بايت، لذا يمكن للذاكرة المؤقتة أن تحتوي على أربعة عناصر۔ من المهم اختيار TypedArray المناسب استنادًا إلى نوع البيانات التي تعالجها۔

معالجة البيانات بمرونة باستخدام DataView

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

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

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

مراعاة ترتيب البايتات (Endianness)

عند استخدام DataView، يجب أيضًا مراعاة ترتيب البايتات (Endianess)۔ اعتمادًا على بنية الحاسوب، قد يختلف الترتيب الذي يتم به تخزين البيانات في الذاكرة۔ توفر أساليب DataView خيارات لتحديد ترتيب البايتات۔

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

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

تطبيقات ArrayBuffer

ArrayBuffer أداة قوية تُستخدم بشكل شائع في تطوير الويب وواجهات برمجة التطبيقات (APIs) في المتصفحات۔ دعنا نلقي نظرة على بعض أمثلة التطبيقات۔

تلقي ومعالجة البيانات الثنائية

على سبيل المثال، يمكنك جلب بيانات ثنائية من الخادم باستخدام XMLHttpRequest أو واجهة برمجة التطبيقات fetch ومعالجتها كـ ArrayBuffer۔

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });

• في هذا المثال، يتم جلب بيانات الصورة من الخادم ومعالجتها كـ Uint8Array۔ بهذه الطريقة، يمكنك معالجة البيانات المستلمة من الخادم باستخدام ArrayBuffer۔

الاستخدام في WebGL

في WebGL، يتم استخدام ArrayBuffer لمعالجة البيانات الثنائية بكفاءة مثل بيانات القمم وبيانات اللون۔

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• في هذا المثال، يتم استخدام Float32Array لتحديد إحداثيات القمم لمستطيل وإرسالها إلى مخزن مؤقت في WebGL۔

إدارة الذاكرة وArrayBuffer

ArrayBuffer يدير الذاكرة على مستوى البايت، مما يجعله فعالاً للغاية، ولكن يجب أن تكون حذراً أيضاً في إدارة الذاكرة۔ عند التعامل مع بيانات ثنائية كبيرة، من المهم تحرير ArrayBuffers غير المستخدمة بشكل صحيح۔ على الرغم من أن JavaScript ينفذ جمع القمامة تلقائياً، إذا استمر الرجوع إلى ArrayBuffer، فقد يتسبب ذلك في تسريب الذاكرة۔

الملخص

ArrayBuffer يوفر الأساس لمعالجة البيانات الثنائية في JavaScript۔ من خلال دمج TypedArray وDataView، يمكن معالجة البيانات الثنائية بكفاءة ومرونة۔ إنها أدوات لا غنى عنها في تطوير الويب، خاصة في العديد من المواقف التي تتضمن معالجة البيانات الثنائية مثل الاتصال بالشبكة وWebGL۔ من خلال فهمها بشكل صحيح واستخدامها بشكل مناسب، يمكنك تحسين الأداء والكفاءة۔

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

YouTube Video