`DataView` في JavaScript

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

سنشرح بالتفصيل الاستخدام الأساسي لـ DataView وأمثلة محددة على استخدامه.۔

YouTube Video

DataView في JavaScript

DataView في JavaScript هو واجهة برمجية مريحة لمعالجة البيانات المخزنة في مخزن مؤقت (ArrayBuffer) بتنسيقات مختلفة۔ يتيح ذلك قراءة وكتابة البيانات الثنائية بشكل مرن وفعال، ويلعب دورًا هامًا في اتصالات الشبكات، ومعالجة الملفات، والتكامل مع WebAssembly۔

ما هو DataView؟

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

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

1let buffer = new ArrayBuffer(16);  // Create a 16-byte ArrayBuffer
2let view = new DataView(buffer);    // Manipulate the buffer with a DataView

DataView يحتوي على مُنشئ يقبل ArrayBuffer كمعامل۔ في هذا المثال، يتم إنشاء مخزن مؤقت بحجم 16 بايت، ويتم استخدام DataView للوصول إلى هذا المخزن المؤقت۔ باستخدام DataView، يمكنك تحديد أحجام بايت مختلفة وترتيب البايتات (big-endian أو little-endian) عند قراءة البيانات أو كتابتها المخزنة في المخزن المؤقت۔

الطرق الأساسية لـ DataView

DataView يوفر طرقًا لقراءة وكتابة القيم لأنواع بيانات متنوعة۔ تنقسم هذه الطرق بشكل رئيسي إلى طرق get لقراءة البيانات وطرق set للكتابة۔

تُوضح الطرق الرئيسية أدناه۔

الطرق الخاصة بقراءة القيم

• getInt8(byteOffset): يقرأ عدداً صحيحاً موقّعاً بحجم 1 بايت في التعويض المحدد۔
• getUint8(byteOffset): يقرأ عدداً صحيحاً غير موقّع بحجم 1 بايت في التعويض المحدد۔
• getInt16(byteOffset, littleEndian): يقرأ عدداً صحيحاً موقّعاً بحجم 2 بايت۔
• getUint16(byteOffset, littleEndian): يقرأ عدداً صحيحاً غير موقّع بحجم 2 بايت۔
• getInt32(byteOffset, littleEndian): يقرأ عدداً صحيحاً موقّعاً بحجم 4 بايت۔
• getUint32(byteOffset, littleEndian): يقرأ عدداً صحيحاً غير موقّع بحجم 4 بايت۔
• getFloat32(byteOffset, littleEndian): يقرأ رقمًا عشريًا 4 بايت وفق معيار IEEE 754۔
• getFloat64(byteOffset, littleEndian): يقرأ رقمًا عشريًا 8 بايت وفق معيار IEEE 754۔

طرق لكتابة القيم

• setInt8(byteOffset, value): يكتب عددًا صحيحًا موقعًا بحجم 1 بايت۔
• setUint8(byteOffset, value): يكتب عددًا صحيحًا غير موقع بحجم 1 بايت۔
• setInt16(byteOffset, value, littleEndian): يكتب عددًا صحيحًا موقعًا بحجم 2 بايت۔
• setUint16(byteOffset, value, littleEndian): يكتب عددًا صحيحًا غير موقع بحجم 2 بايت۔
• setInt32(byteOffset, value, littleEndian): يكتب عددًا صحيحًا موقعًا بحجم 4 بايت۔
• setUint32(byteOffset, value, littleEndian): يكتب عددًا صحيحًا غير موقع بحجم 4 بايت۔
• setFloat32(byteOffset, value, littleEndian): يكتب رقمًا عشريًا 4 بايت وفق معيار IEEE 754۔
• setFloat64(byteOffset, value, littleEndian): يكتب رقمًا عشريًا 8 بايت وفق معيار IEEE 754۔

باستخدام هذه الطرق، يمكنك قراءة البيانات المخزنة في ArrayBuffer وكتابتها بسهولة۔

مثال على استخدام DataView

دعنا نلقي نظرة على مثال لكيفية التعامل مع البيانات الثنائية باستخدام DataView۔

المثال 1: كتابة وقراءة عدد صحيح بحجم 16-بت

1let buffer = new ArrayBuffer(4);  // Create a 4-byte buffer
2let view = new DataView(buffer);
3
4// Write a 2-byte integer value in little-endian format
5view.setInt16(0, 32767, true);  // byteOffset: 0, value: 32767, littleEndian: true
6
7// Read the data in little-endian format
8let value = view.getInt16(0, true);
9console.log(value);  // Output: 32767

• في هذا المثال، تُستخدم طريقة setInt16 لكتابة عدد صحيح موقع بحجم 16-بت بصيغة little-endian، وتُستخدم طريقة getInt16 لقراءة القيمة بصيغة little-endian۔

المثال 2: كتابة وقراءة رقم عشري

1let buffer = new ArrayBuffer(8);  // Create an 8-byte buffer
2let view = new DataView(buffer);
3
4// Write an 8-byte floating-point number
5view.setFloat64(0, 3.14159, false);  // byteOffset: 0, value: 3.14159, bigEndian: false
6
7// Read the data in big-endian format
8let pi = view.getFloat64(0, false);
9console.log(pi);  // Output: 3.14159

• في هذا المثال، تُستخدم طريقة setFloat64 لكتابة رقم عشري بحجم 64-بت بصيغة big-endian، وتُستخدم طريقة getFloat64 لقراءة القيمة۔

حول ترتيب البايتات (Endianness)

دعنا نرى مثالاً على قراءة وكتابة القيم بتنسيقي big-endian وlittle-endian باستخدام DataView۔

 1// Example: Handling Endianness with DataView in TypeScript
 2// Create an ArrayBuffer of 4 bytes
 3const buffer = new ArrayBuffer(4);
 4const view = new DataView(buffer);
 5
 6// Store the same number (0x12345678) in both endian formats
 7// By default, DataView uses big-endian
 8view.setUint32(0, 0x12345678); // Big-endian
 9console.log("Big-endian (default):");
10console.log(buffer);
11
12// Overwrite the buffer with little-endian
13view.setUint32(0, 0x12345678, true); // Little-endian
14console.log("Little-endian:");
15console.log(buffer);
16
17// Read values back in both endian modes
18const bigEndianValue = view.getUint32(0); // Big-endian read
19const littleEndianValue = view.getUint32(0, true); // Little-endian read
20
21console.log("Read as Big-endian:", bigEndianValue.toString(16));
22console.log("Read as Little-endian:", littleEndianValue.toString(16));

في طرق DataView، يتم تخزين البيانات افتراضيًا بصيغة big-endian (ترتيب البايتات من الأكثر أهمية إلى الأقل أهمية)، ولكن يمكن تحديد صيغة little-endian اختياريًا۔ صيغة little-endian تعكس ترتيب البايتات (من الأقل أهمية إلى الأكثر أهمية)۔ من المهم التعامل مع ترتيب البايتات (Endianness) بشكل صحيح لأن الأنظمة المختلفة وبروتوكولات الشبكة المختلفة تستخدم ترتيبات بايت مختلفة۔

الفرق عن TypedArray

دعنا نلقي نظرة على الاختلافات بين DataView وTypedArray۔

 1// Example: TypedArray vs DataView
 2
 3// Create a 8-byte buffer
 4const buffer = new ArrayBuffer(8);
 5
 6// --- Using TypedArray (Int32Array) ---
 7const int32View = new Int32Array(buffer);
 8int32View[0] = 42;
 9int32View[1] = 100;
10
11console.log("TypedArray (Int32Array):");
12console.log(int32View); // Int32Array [42, 100]
13
14// --- Using DataView ---
15const dataView = new DataView(buffer);
16
17// Write different types of data at arbitrary byte offsets
18dataView.setInt8(0, 65);         // 1 byte
19dataView.setUint16(1, 500, true); // 2 bytes, little-endian
20dataView.setFloat32(3, 3.14, true); // 4 bytes, little-endian
21
22console.log("\nDataView:");
23console.log("Int8 at 0:", dataView.getInt8(0));      // 65
24console.log("Uint16 at 1:", dataView.getUint16(1, true)); // 500
25console.log("Float32 at 3:", dataView.getFloat32(3, true)); // 3.14
26
27/*
28Output:
29TypedArray (Int32Array):
30Int32Array [42, 100]
31
32DataView:
33Int8 at 0: 65
34Uint16 at 1: 500
35Float32 at 3: 3.140000104904175
36*/

TypedArray توفر أيضًا عمليات على المخزن المؤقت باستخدام ArrayBuffer، ولكن TypedArray مناسبة لتشغيل البيانات المتجاورة ذات الطول والتنسيق الثابتين لكل نوع بيانات۔ من ناحية أخرى، يمكن لـDataView التعامل بشكل مرن مع الأنواع المختلفة من البيانات ويتيح التحكم أيضًا في ترتيب البايتات۔ لذلك، تُعتبر DataView مناسبة لتحليل وإنشاء البيانات الثنائية المعقدة۔

الملخص

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

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

YouTube Video