أعتقد أن كل متعلم JavaScript سوف يفهم أنواع البيانات الأساسية المختلفة من JS. المصفوفات هي مجموعات البيانات. هذا مفهوم أساسي وبسيط للغاية. ليس لديه الكثير من المحتوى ، وليس من الصعب تعلمه جيدًا. لكن المهم في هذا المقال ليس هو الصفيف الذي نراه عادة ، ولكن ArrayBuffer.
يتم تلخيص العديد من الأشياء التي كتبتها عمداً لأنهم يريدون إكمال بعض الوظائف المحددة. يمكن اعتبارها مذكرات ، وينطبق الشيء نفسه على هذه المقالة! لقد كنت أدرس المعرفة المتعلقة بآبار واجهة برمجة تطبيقات الصوت والاتصال الصوتي منذ بعض الوقت. يركز المحتوى على تدفق تدفقات الصوت بين مختلف العقد السمعية. الآن ، أحتاج إلى فهم نوع تنسيق البيانات الذي يكون عليه الصوت إلى الدفق ، وبالتالي فإن البحث في ArrayBuffer مهم بشكل خاص.
نموذج مكدس الصفيف في الذاكرة
اكتساب صفيف
كيفية إنشاء مجموعة في JavaScript:
نسخة الكود كما يلي:
[element0 ، element1 ، ... ، elementn]
صفيف جديد (element0 ، element1 ، ... ، elementn)
مجموعة جديدة (ArrayLength)
حدده مباشرة ، أو قم بإنشاء صفيف عبر المنشئ ، بالطبع ، يمكنك أيضًا استخدام وسائل أخرى:
نسخة الكود كما يلي:
"صفيف" .split ("") ؛
"صفيف" .match (/a | r/g) ؛
انتظر ، هناك العديد من الطرق. لكنني أخشى أن الكثير من الناس ليسوا واضحين بشأن نوع الهيكل الذي يوجد في الداخل.
نموذج المكدس
في الصفيف ، يمكننا وضع الكثير من بيانات أنواع البيانات المختلفة ، مثل:
نسخة الكود كما يلي:
var arr = [21 ، "li jing" ، date () ، function () {} ، ، null] ؛
تحتوي الصفيف أعلاه على أرقام ، سلاسل ، كائنات ، وظائف ، غير محددة و NULL في وقت واحد. يمكننا وصف واجهة البيانات أعلاه بطريقة ملموسة:
نسخة الكود كما يلي:
كومة
+---------------------------------------------------------------------------------------------------------------------------------
| 21 | +-------------------------+
+ ----------+ | |
| "لي جينغ" | | |
+ ----------+ | + ---------+ |
| [الرجوع] | -----------> | كائن | |
+ ----------+ | + ---------+ |
| [الرجوع] | -------------------->+ ---------+ |
+ ----------+ | | وظيفة | |
| غير محدد | | + ---------+ |
+ ----------+ | |
| فارغ | +-------------------------+
+ -----------+ تم إنشاؤه بواسطة باريت لي
يتم تقسيم أنواع بيانات JavaScript إلى نوعين ، أحدهما هو نوع القيمة والآخر هو نوع المرجع. تشمل الأنواع المرجعية الشائعة الكائن والمصفوفة. في نموذج التخزين الخاص بالمصفوفة ، إذا كانت بيانات نوع القيمة تشبه الرقم والسلسلة ، فسيتم دفع البيانات مباشرة إلى المكدس ، بينما سيتم دفع نوع المرجع فقط في فهرس القيمة. يتمثل مفهوم لغة C في حفظ مؤشر البيانات فقط ، ويتم تخزين هذه البيانات في كتلة معينة من الكومة. المكدس غير مستقل ، ويمكن أيضًا تخزين المكدس في المكدس.
حسنًا ، هذا كل شيء لشرح الصفيف. دعنا نتحدث عن المعرفة ذات الصلة بـ ArrayBuffer بالتفصيل.
arraybuffer
ما هو الويب؟ ما هي القضية الأساسية التي تحتاج الويب إلى مناقشتها؟ أعتقد أن هناك نقطتان: واحدة هي البيانات والآخر هو نقل البيانات. بالنسبة لعرض البيانات ، فهي معقدة ويجب أن يكون هذا شيئًا على الطبقة العليا من الويب. ArrayBuffer الذي سيتم مناقشته في هذه المقالة هو نوع البيانات الأساسي ، ولا يمكن حتى أن يطلق عليه نوع البيانات. من السهل القراءة والكتابة بطرق أخرى.
تعريف النقاط الرسمية:
ArrayBuffer هو نوع بيانات يستخدم لتمثيل مخزن مؤقت للبيانات الثنائية ذات الطول الثابت. لا يمكنك معالجة محتويات arraybuffer مباشرة ؛ بدلاً من ذلك ، يمكنك إنشاء كائن ArrayBufferview الذي يمثل المخزن المؤقت بتنسيق محدد ، واستخدام ذلك لقراءة وكتابة محتويات المخزن المؤقت.
المخزن المؤقت الأصلي الذي يمثل البيانات الثنائية ، والذي يتم استخدامه لتخزين بيانات أنواع مختلفة من المصفوفات. لا يمكن قراءة أو كتاب ArrayBuffer مباشرة ، ولكن يمكن تمريرها إلى كائن مكتوب أو كائن Dataview حسب الحاجة لتفسير المخزن المؤقت الأصلي.
إنه عازلة خام للبيانات الثنائية. على الرغم من أن JavaScript هي لغة ضعيفة من النوع ، إلا أنها لها قيود على نوع وحجم البيانات. نحتاج إلى قراءة محتوى المخزن المؤقت بطريقة منظمة (اكتبه) من خلال بنية بيانات معينة.
إنشاء المخزن المؤقت الأصلي
يمكن أن يقوم مُنشئ ArrayBuffer بإنشاء مخزن مؤقت لـ RAW:
نسخة الكود كما يلي:
var buffer = new ArrayBuffer (30) ؛
من وحدة التحكم في الكروم يمكنك أن ترى:
يحتوي مثيل العازلة على سمة بطول بايت ، يتم استخدامها للحصول على حجم المخزن المؤقت ، وهي طريقة شريحة مدعومة فقط بواسطة IE11+ و IOS6+ ، والتي تستخدم لاعتراض طول المخزن المؤقت.
نسخة الكود كما يلي:
شريحة ArrayBuffer (
بداية طويلة غير موقعة
نهاية طويلة غير موقعة اختيارية
) ؛
يمكنك اختبار هذا العرض التوضيحي:
نسخة الكود كما يلي:
var buffer = new ArrayBuffer (12) ؛
var x = new int32array (buffer) ؛
x [1] = 1234 ؛
var slice = buffer.slice (4) ؛
var y = new int32array (شريحة) ؛
console.log (x [1]) ؛
console.log (y [0]) ؛
x [1] = 6789 ؛
console.log (x [1]) ؛
console.log (y [0]) ؛
المصفوفات المستندة إلى البيانات
تمثل أنواع الصفيف المكتوبة وجهات نظر مختلفة من كائنات ArrayBuffer القابلة للمعالجة والمعالجة. جميع أنواع الصفيف لها أطوال ثابتة.
نسخة الكود كما يلي:
حجم الاسم (بالبايت) الوصف
int8array 1 8 بت مكملة تكملة عدد صحيح
uint8array 1 integer غير موقعة 8 بت
INT16Array 2 16 بت مكملة موقعة
uint16array 2 16 بت عدد صحيح غير موقعة
int32array 4 32-bit اثنين تكملة عدد صحيح موقّع
uint32array 4 32 بت عدد صحيح غير موقّع
Float32array 4 32 بت IEEE رقم نقطة العائمة
Float64array 8 64 بت IEEE العائمة رقم نقطة
INT هو عدد صحيح ، UINT هو بلاستيك غير موقّع ، وتعويم هو نوع نقطة عائمة. هذه هي المفاهيم الأساسية في لغة C ، لذلك لن أشرحها بالتفصيل. نظرًا لأن هذه الهياكل المشاهدات متشابهة ، فإن هذه المقالة تشرح فقط نوع Float32array ، ويمكن للقراء التعلم منه واحدًا تلو الآخر.
Float32array يشبه إلى حد كبير الصفيف ، باستثناء أن كل عنصر عبارة عن بيانات عائمة 32 بت (4 بايت). float32array بمجرد إنشاؤه ، لا يمكن تعديل حجمه.
يمكننا إنشاء float32array مباشرة:
نسخة الكود كما يلي:
var x = new float32array (2) ؛
x [0] = 17 ؛
console.log (x [0]) ؛ // 17
console.log (x [1]) ؛ // 0
console.log (X.Length) ؛ // 2
يجب أن يكون هناك مفهوم بأنه لا يزال صفيفًا ، لكن كل عنصر في الصفيف هو نوع بيانات عائم 32 بت ، على سبيل المثال:
نسخة الكود كما يلي:
var x = new float32array ([17 ، -45.3]) ؛
console.log (x [0]) ؛ // 17
console.log (x [1]) ؛ // -45.29999923706055
console.log (X.Length) ؛ // 2
نقوم بتعيين قيمة الصفيف مباشرة إلى X ، كائن Float32array ، ثم سيتم تحويله إلى رقم عائم 32 بت قبل التخزين.
نظرًا لأن كل عنصر من عناصر صفيف الفئة هذا من نفس النوع ، في نموذج المكدس ، سيتم دفعها جميعًا إلى المكدس. لذلك ، فإن المصفوفة المعروفة هي نوع قيمة ، وليس نوع مرجع! يجب ملاحظة ذلك ويمكن أن ينعكس أيضًا في الأمثلة التالية:
نسخة الكود كما يلي:
var x = new float32array ([17 ، -45.3]) ؛
var y = new float32array (x) ؛
console.log (x [0]) ؛ // 17
console.log (x [1]) ؛ //-45.29999923706055
console.log (X.Length) ؛ // 2
x [0] = -2 ؛
console.log (y [0]) ؛ // 17 ، لم تتغير قيمة Y
انسخ قيمة x إلى y ، تعديل x [0] ، y [0] ولا يوجد تغيير.
بالإضافة إلى الطريقة أعلاه ، يمكننا أيضًا إنشاء صفيف بيانات بطرق أخرى:
نسخة الكود كما يلي:
var buffer = new ArrayBuffer (12) ؛
var x = new float32array (buffer ، 0 ، 2) ؛
var y = new float32array (buffer ، 4 ، 1) ؛
x [1] = 7 ؛
console.log (y [0]) ؛ // 7
اشرح لماذا يتم إرجاع 7 هنا.
نسخة الكود كما يلي:
Arraybuffer (12)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
/ / /
x (Float32Raray)
الإزاحة: 0
بطول بايت: 4
الطول: 2
Arraybuffer (12)
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
/ / /
ذ
أنشأه باريت لي
هل لا يزال لديك أي أسئلة بعد قراءة الرسم التوضيحي أعلاه؟ لا أعتقد أنني بحاجة إلى الاستمرار في التوضيح. يمكن اعتبار وحدة ArrayBuffer 1 ، في حين أن وحدة Float32array هي 4.
كائن Dataview
يقوم كائن DataView بتشغيل البيانات بدقة أكبر ، لكنني لا أعتقد أنها مثيرة للاهتمام. يمكن للمصفوفات المختلفة المستندة إلى البيانات المذكورة أعلاه إرضاء التطبيق بشكل أساسي ، لذلك سأذكره هنا فقط ، مثال بسيط:
نسخة الكود كما يلي:
var buffer = new ArrayBuffer (12) ؛
var x = new dataview (buffer ، 0) ؛
X.SetInt8 (0 ، 22) ؛
X.SetFloat32 (1 ، Math.PI) ؛
console.log (x.getInt8 (0)) ؛ // 22
console.log (x.getfloat32 (1)) ؛ // 3.1415927410125732
إذا كنت مهتمًا ، فيمكنك الانتقال إلى http://www.javascripture.com/dataview للحصول على معلومات مفصلة.
ArrayBuffer في XHR2
يستخدم ArrayBuffer على نطاق واسع. سواء أكان WebSocket و Webaudio أو Ajax ، وما إلى ذلك ، طالما أن عملية البيانات الكبيرة في الواجهة الأمامية أو ترغب في تحسين أداء معالجة البيانات ، يجب أن يكون ArrayBuffer أمرًا لا غنى عنه.
XHR2 ليس جديدًا. ربما تكون قد استخدمت الميزات ذات الصلة ، لكنك لا تعرف أن هذا هو ما هو XHR2. الشيء الأكثر أهمية هو XHR.Responsetype ، والذي يتم استخدامه لتعيين تنسيق البيانات للاستجابة. المعلمات الاختيارية هي: "Text" أو "ArrayBuffer" أو "Blob" أو "Document". لاحظ أن إعداد (أو تجاهل) XHR.Responsetype = '' سيقوم بتعيين الاستجابة على "النص" بشكل افتراضي. هناك علاقة مقابلة مثل هذه:
نسخة الكود كما يلي:
طلب الرد
نص domstring
Arraybuffer ArrayBuffer
Blob Blob
وثيقة وثيقة
خذ كستناء:
نسخة الكود كما يلي:
var xhr = new xmlhttprequest () ؛
XHR.Open ('get' ، '/path/to/image.png' ، true) ؛
XHR.ResponSetype = 'ArrayBuffer' ؛
xhr.onload = function (e) {
// this.response == uint8array.buffer
var uint8array = new uint8array (this. response) ؛
} ؛
xhr.send () ؛
قمنا بتعيين الخاصية على ArrayBuffer في XHR.Responsetype ، حتى نتمكن من استخدام صفيف قائم على البيانات لقبول البيانات التي نحصل عليها!
ملخص
تقدم هذه المقالة بشكل أساسي كيف يتم تخزين الصفيف في نموذج المكدس ، ويصف أيضًا بالتفصيل نوع البيانات الثنائية لـ ArrayBuffer ، المخزن المؤقت الأصلي. في تطوير الويب ، يعد تخزين البيانات وتخزين البيانات جزءًا مهمًا ، آمل أن تجذب الانتباه!
قد تكون هناك أخطاء في سرد هذه المقالة ، يرجى تصحيحها أكثر!