يمثل كائن Array مجموعة من العناصر. يساعد في الحفاظ على مجموعة كبيرة من البيانات لتجنب ارتباك المتغيرات المتعددة ، وبالتالي فرزها. إذا أراد المستخدم تطبيق أي طريقة أو خاصية إضافية على كائن Array ، فلن يحتاج إلى تطبيق تلك الخاصية / الطريقة الجديدة واحدة تلو الأخرى على كل عنصر. بدلاً من ذلك ، يمكن إجراؤه بشكل فعال باستخدام مصفوفة JavaScript ' النموذج المبدئي ' البناء. يساعد هذا المُنشئ في تطبيق الأساليب والخصائص الجديدة على كائن Array المطلوب.
يشرح هذا الدليل استخدام مُنشئ Array “prototype” في JavaScript.
كيفية استخدام منشئ 'النموذج الأولي' للصفيف في JavaScript؟
المصفوفة ' النموذج المبدئي 'المُنشئ لإضافة أساليب وخصائص جديدة إلى كائن Array بمساعدة وظيفة JavaScript. يتم تطبيق الخاصية المُنشأة لجميع قيم الصفيف ، كاسمها وقيمتها افتراضيًا.
بناء الجملة
Array.prototype.name = القيمة
في الصيغة أعلاه ، ' اسم 'الخاصية المضافة حديثًا بـ' قيمة 'الذي ينطبق على كائن المصفوفة بالكامل.
دعنا نستخدم الخاصية المعرفة أعلاه عمليا بمساعدة تركيبها.
كود HTML
أولاً ، ألق نظرة على كود HTML المذكور:
< ص > ال 'النموذج المبدئي' منشئ يساعد في إضافة الأساليب الجديدة / خصائص المصفوفة المحددة ( ) هدف. ص >< زر عند النقر = 'jsFunc ()' > احصل على كل طول سلسلة زر >
< ص بطاقة تعريف = 'عينة' > ص >
< ص بطاقة تعريف = 'ل' > ص >
في سطور الكود أعلاه:
- ال ' ”العلامة تحدد بيان الفقرة.
- ال ' <زر> 'تضمّن العلامة زرًا مع حدث' onclick 'لاستدعاء الوظيفة المحددة' jsFunc () 'عند النقر على الزر.
- الاخيرتين ' تضيف العلامات 'فقرات فارغة مع المعرفات المخصصة لها' عينة 'و' الفقرة '، على التوالي.
ملحوظة: يتم اتباع كود HTML هذا في جميع الأمثلة الواردة في هذا الدليل.
مثال 1: تطبيق مُنشئ 'النموذج الأولي' لحساب طول كائن المصفوفة عن طريق إضافة طريقة جديدة
يستخدم هذا المثال مُنشئ 'النموذج الأولي' لحساب طول كل سلسلة داخل كائن Array بمساعدة طريقة مضافة حديثًا.
كود جافا سكريبت
اتبع كود JavaScript المحدد:
< النصي >Array.prototype.stringLength = وظيفة ( ) {
ل ( أين تي = 0 ؛ ر < هذا. الطول. تي ++ ) {
هذا [ ر ] = هذا [ ر ] .طول؛
}
} ؛
وظيفة شبيبة ( ) {
فار str = [ 'لغة البرمجة' و 'CSS' و 'جافا سكريبت' ] ؛
document.getElementById ( 'عينة' ) .innerHTML = str؛
الطول ( ) ؛
document.getElementById ( 'ل' ) .innerHTML = str؛
}
النصي >
في سطور التعليمات البرمجية أعلاه:
- تطبيق البنية الأساسية للصفيف ' النموذج المبدئي 'المُنشئ الذي يضيف طريقة جديدة' طول سلسلة 'تحديد وظيفة.
- بعد ذلك ، في تعريف الوظيفة ، ' ل 'حلقة متكررة فوق جميع مؤشرات كائن Array لإيجاد طولها باستخدام خاصية' length '.
- بعد ذلك ، ' jsFunc () يعرّف 'كائن Array مخزن في المتغير' str '.
- ثم ' document.getElementById () يصل أسلوب 'إلى أول فقرة فارغة عبر معرّفها' sample 'لعرض كائن Array' str '.
- أخيرًا ، اربط كائن صفيف 'str' بـ ' طول سلسلة() 'لحساب طول السلسلة لكل فهرس مصفوفة ثم إلحاقه بالفقرة الفارغة التالية التي يكون معرفها' الفقرة '.
انتاج |
هنا ، يُظهر الإخراج طول كل سلسلة من كائن Array الهدف بمساعدة طريقة 'stringLength ()' المضافة حديثًا عبر مُنشئ Array 'prototype'.
مثال 2: تطبيق مُنشئ 'النموذج الأولي' لإنشاء طريقة جديدة 'myUcase' وتطبيقها على كائن مصفوفة
يستخدم هذا المثال مُنشئ 'prototype' لإنشاء طريقة 'myUcase' جديدة وتطبيقها على كائن Array الهدف.
كود جافا سكريبت
دعنا ننتقل إلى رمز جافا سكريبت المذكور أدناه:
< النصي >Array.prototype.myUcase = وظيفة ( ) {
ل ( يترك ر = 0 ؛ ر < هذا. الطول. تي ++ ) {
هذا [ ر ] = هذا [ ر ] .إلى الحالة العليا ( ) ؛
}
} ؛
وظيفة شبيبة ( ) {
const arrObj = [ 'لغة البرمجة' و 'css' و 'جافا سكريبت' و 'تتفاعل' ] ؛
arrObj.myUcase ( ) ؛
document.getElementById ( 'عينة' ) .innerHTML = arrObj ؛
}
النصي >
هنا ، ينشئ مُنشئ 'النموذج الأولي' طريقة جديدة تسمى ' myUcase 'التي تستخدم' الأحرف الكبيرة 'في تعريف الوظيفة لتحويل كل سلسلة من كائن Array إلى' UpperCase '. في الوظيفة الأخيرة ، يتم استدعاء الطريقة المخصصة أيضًا في المصفوفة.
انتاج |
كما رأينا ، فإن كل سلسلة من كائن Array تستحوذ على نقرة زر بسبب طريقة “myUcase ()” المطبقة.
خاتمة
لاستخدام المصفوفة ' النموذج المبدئي ”منشئ في JavaScript ، قم بربط الطريقة / الخاصية الجديدة بها. تحدد وظيفة تحدد وظائف وظيفة أخرى بطريقة مخصصة وفقًا للمتطلبات. شرح هذا الدليل بإيجاز استخدام مُنشئ Array “prototype” في JavaScript.