Foreach js للمصفوفات والمجموعات كيفية إنشاء مجموعة النقابي في جافا سكريبت. الاستخدام الصريح للمكرر

التعريف والتطبيق

طريقة جافا سكريبت لكل ()يسمح لك بتنفيذ الوظيفة التي تم تمريرها مرة واحدة لكل عنصر في المصفوفة بترتيب فهرس تصاعدي.

يرجى ملاحظة أن وظيفة رد الاتصال تم تمريرها كمعلمة للأسلوب لكل ()لن يتم استدعاؤه لعناصر الصفيف المحذوفة أو المفقودة.

مجموعة من العناصر التي تمت معالجتها باستخدام الطريقة لكل ()مثبتة في الأمام أولاًاستدعاء وظيفة رد الاتصال. إذا تمت إضافة عناصر إلى المصفوفة بعد استدعائها، فلن يتم استدعاء الدالة على هذه العناصر.

إذا تغيرت قيم عناصر المصفوفة الموجودة في وقت التنفيذ، فإن القيمة التي تم تمريرها إلى الدالة ستكون هي القيمة في الوقت الذي يتم فيه تنفيذ الطريقة لكل ()يزورهم. إذا تم حذف العناصر قبل زيارتها، فلن تتم زيارة هذه العناصر. إذا تمت إزالة العناصر التي تمت زيارتها بالفعل أثناء اجتياز المصفوفة، فسيتم تخطي العناصر اللاحقة.

دعم المتصفح

بناء جملة جافا سكريبت:

نسخة جافا سكريبت

قيمه المعامل

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

في المثال التالي، سننظر في كيفية الحصول على مجموع كافة عناصر المصفوفة باستخدام جافا سكريبتطريقة لكل ():

في المثال التالي سوف ننظر في استخدام ثانيةحجة الطريقة لكل ()، والذي يشير إلى كائن يمكننا الرجوع إليه باستخدام الكلمة الرئيسيةهذا داخل وظيفة رد الاتصال:

• I. التكرار على المصفوفات الحقيقية
  1. لكل طريقة والأساليب ذات الصلة
  2. لحلقة
  3. الاستخدام السليم للحلقة for...in
  4. for...of حلقة (الاستخدام الضمني للمكرر)
  5. الاستخدام الصريح للمكرر
• ثانيا. التكرار على كائنات تشبه المصفوفة
  1. استخدام طرق للتكرار على المصفوفات الحقيقية
  2. تحويل إلى مجموعة حقيقية
  3. ملاحظة حول كائنات وقت التشغيل

I. التكرار على المصفوفات الحقيقية

على هذه اللحظةهناك ثلاث طرق للتكرار على عناصر المصفوفة الحقيقية:

1. طريقة Array.prototype.forEach؛
2. الكلاسيكية للحلقة
3. حلقة "صحيحة" تم إنشاؤها من أجل... في الحلقة.

بالإضافة إلى ذلك، قريبًا، مع ظهور معيار ECMAScript 6 (ES 6) الجديد، من المتوقع وجود طريقتين إضافيتين:

1. for...of حلقة (الاستخدام الضمني للمكرر)؛
2. الاستخدام الصريح للمكرر.

1. طريقة forEach والأساليب ذات الصلة

إذا كان مشروعك مصممًا لدعم ميزات معيار ECMAScript 5 (ES5)، فيمكنك استخدام أحد ابتكاراته - طريقة forEach.

مثال الاستخدام:

فار أ = ["أ"، "ب"، "ج"]؛ a.forEach(function(entry) ( console.log(entry); ));

بشكل عام، يتطلب استخدام forEach توصيل مكتبة محاكاة es5-shim للمتصفحات التي لا تدعم هذه الطريقة أصلاً. وتشمل هذه IE 8 وما فوق الإصدارات المبكرةوالتي لا تزال مستخدمة هنا وهناك.

تتمثل ميزة forEach في أنه ليست هناك حاجة للإعلان عن المتغيرات المحلية لتخزين فهرس وقيمة عنصر المصفوفة الحالي، حيث يتم تمريرها تلقائيًا إلى وظيفة رد الاتصال كوسيطات.

إذا كنت قلقًا بشأن التكلفة المحتملة لاستدعاء رد اتصال على كل عنصر، فلا تقلق واقرأ هذا.

تم تصميم forEach للتكرار عبر جميع عناصر المصفوفة، ولكن إلى جانب ذلك، يقدم ES5 العديد من الطرق المفيدة للتكرار عبر جميع العناصر أو بعضها بالإضافة إلى تنفيذ بعض الإجراءات عليها:

• every - يُرجع صحيحًا إذا قام رد الاتصال بإرجاع قيمة يمكن تحويلها إلى صحيح لكل عنصر من عناصر المصفوفة.
• some - يُرجع صحيحًا إذا كان رد الاتصال يُرجع قيمة يمكن تحويلها إلى صحيح بالنسبة لعنصر واحد على الأقل من المصفوفة.
• عامل التصفية - ينشئ مصفوفة جديدة تتضمن عناصر المصفوفة الأصلية التي يعود رد الاتصال لها صحيحًا.
• الخريطة - تقوم بإنشاء مصفوفة جديدة تتكون من القيم التي يتم إرجاعها بواسطة رد الاتصال.
• تقليل - تقليل مصفوفة إلى قيمة واحدة، وتطبيق رد اتصال على كل عنصر من عناصر المصفوفة بدوره، بدءًا من العنصر الأول (يمكن أن يكون مفيدًا لحساب مجموع عناصر المصفوفة ووظائف التلخيص الأخرى).
• تقليل اليمين - يعمل بشكل مشابه لتقليل، ولكنه يتكرر عبر العناصر بترتيب عكسي.

2. للحلقة

جيد قديم للقواعد:

فار أ = ["أ"، "ب"، "ج"]؛ مؤشر فار؛ لـ (الفهرس = 0؛ فهرس< a.length; ++index) { console.log(a); }

إذا كان طول المصفوفة ثابتًا طوال الحلقة، وكانت الحلقة نفسها تنتمي إلى قسم التعليمات البرمجية ذي الأداء الحرج (وهو أمر غير مرجح)، فيمكنك استخدام إصدار "أكثر مثالية" من أجل تخزين طول المصفوفة :

فار أ = ["أ"، "ب"، "ج"]؛ مؤشر فار، لين؛ لـ (index = 0، len = a.length؛ Index< len; ++index) { console.log(a); }

من الناحية النظرية، يجب أن يعمل هذا الرمز بشكل أسرع قليلاً من الكود السابق.

إذا لم يكن ترتيب العناصر مهمًا، فيمكنك المضي قدمًا فيما يتعلق بالتحسين والتخلص من المتغير الخاص بتخزين طول المصفوفة، وتغيير ترتيب البحث إلى العكس:

فار أ = ["أ"، "ب"، "ج"]؛ مؤشر فار؛ for (index = a.length - 1; Index >= 0; --index) ( console.log(a); )

ومع ذلك، في محركات JavaScript الحديثة، عادةً ما لا تعني ألعاب التحسين هذه شيئًا.

3. الاستخدام الصحيح للحلقة for...in

إذا نُصحت باستخدام حلقة for...in، تذكر أن التكرار على المصفوفات ليس هو المقصود منه. على عكس الاعتقاد الخاطئ الشائع، فإن حلقة for...in لا تتكرر عبر مؤشرات المصفوفة، بل من خلال خصائص قابلة للإحصاء للكائن.

ومع ذلك، في بعض الحالات، مثل التكرار على المصفوفات المتفرقة، for...in يمكن أن يكون مفيدًا، طالما أنك تتخذ الاحتياطات اللازمة، كما هو موضح في المثال أدناه:

// أ - مصفوفة متفرقة var a = ; أ = "أ"; أ = "ب"; أ = "ج"; لـ (مفتاح var في a) ( if (a.hasOwnProperty(key) && /^0$|^d*$/.test(key) && مفتاح<= 4294967294) { console.log(a); } }

في هذا المثال، يتم إجراء فحصين عند كل تكرار للحلقة:

1. أن المصفوفة لها خاصية خاصة بها تسمى المفتاح (غير موروثة من النموذج الأولي الخاص بها).
2. هذا المفتاح عبارة عن سلسلة تحتوي على التمثيل العشري لعدد صحيح قيمته أقل من 4294967294. من أين يأتي الرقم الأخير؟ من تعريف فهرس المصفوفة في ES5، والذي يوضح أن أعلى فهرس يمكن أن يحتوي عليه عنصر في المصفوفة هو: (2^32 - 2) = 4294967294 .

بالطبع، ستستغرق عمليات التحقق هذه وقتًا غير ضروري عند تنفيذ الحلقة. ولكن في حالة المصفوفة المتفرقة، تكون هذه الطريقة أكثر كفاءة من حلقة for، لأنه في هذه الحالة يتم تكرار العناصر المحددة بوضوح في المصفوفة فقط. لذلك، في المثال أعلاه، سيتم تنفيذ 3 تكرارات فقط (للفهارس 0 و10 و10000) - مقابل 10001 في حلقة for.

لكي لا تكتب رمز التحقق المرهق هذا في كل مرة تحتاج فيها إلى التكرار عبر مصفوفة، يمكنك كتابته كدالة منفصلة:

الدالة arrayHasOwnIndex(array, key) (إرجاع array.hasOwnProperty(key) && /^0$|^d*$/.test(key) && key<= 4294967294; }

ثم سيتم تقليل جسم الحلقة من المثال بشكل كبير:

لـ (مفتاح في a) ( إذا (arrayHasOwnIndex(a, key)) (console.log(a); ) )

يعتبر رمز التحقق الذي تمت مناقشته أعلاه عالميًا ومناسبًا لجميع الحالات. ولكن بدلاً من ذلك، يمكنك استخدام إصدار أقصر، على الرغم من أنه ليس صحيحًا تمامًا من الناحية الرسمية، ولكنه مع ذلك مناسب لمعظم الحالات:

لـ (مفتاح في a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) (console.log(a); ) )

4. For...of حلقة (الاستخدام الضمني للمكرر)

ES6، الذي لا يزال في حالة المسودة، يجب أن يقدم التكرارات إلى JavaScript.

مكرر هو بروتوكول يتم تنفيذه بواسطة كائن يحدد طريقة قياسية للحصول على سلسلة من القيم (محدودة أو لا نهائية).
يحتوي الكائن على مكرر إذا قام بتعريف الطريقة التالية ()، وهي دالة بدون وسيطات تقوم بإرجاع كائن بخاصيتين:

1. تم (منطقي) - صحيح إذا وصل المكرر إلى نهاية التسلسل القابل للتكرار. وإلا فإن القيمة خاطئة.
2. القيمة - تحدد القيمة التي يتم إرجاعها بواسطة المكرر. قد تكون غير محددة (مفقودة) إذا كانت الخاصية المنجزة صحيحة.

العديد من الكائنات المضمنة، بما في ذلك. المصفوفات الحقيقية لها مكررات بشكل افتراضي. إن أبسط طريقة لاستخدام المكرر على المصفوفات الحقيقية هي استخدام الجديد for...of build.

مثال على استخدام ل...من:

فارفال. var a = ["a"، "b"، "c"]؛ لـ (val of a) (console.log(val); )

في المثال أعلاه، تستدعي حلقة for...of ضمنيًا مُكرِّر كائن المصفوفة للحصول على كل قيمة من المصفوفة.

5. الاستخدام الصريح للمكرر

يمكن أيضًا استخدام المُكرِّرات بشكل صريح، ولكن في هذه الحالة يصبح الكود أكثر تعقيدًا مقارنة بحلقة for...of. يبدو شيء من هذا القبيل:

فار أ = ["أ"، "ب"، "ج"]؛ إدخال فار؛ بينما (!(entry = a.next()).done) (console.log(entry.value);)

ثانيا. التكرار على كائنات تشبه المصفوفة

بالإضافة إلى المصفوفات الحقيقية، هناك أيضًا في JavaScript كائنات تشبه المصفوفة . ما يشتركون فيه مع المصفوفات الحقيقية هو أن لديهم خاصية طول وخصائص مسماة كأرقام تتوافق مع عناصر المصفوفة. تتضمن الأمثلة DOM لمجموعة NodeList والمصفوفة الزائفة للوسائط، المتوفرة داخل أي وظيفة/طريقة.

1. استخدام طرق للتكرار على المصفوفات الحقيقية

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

يمكن تطبيق بنيات for و for...in على الكائنات الشبيهة بالمصفوفات بنفس الطريقة التي يتم تطبيقها بها على المصفوفات الحقيقية.

تنطبق forEach وطرق Array.prototype الأخرى أيضًا على الكائنات المشابهة للمصفوفة. للقيام بذلك تحتاج إلى استخدام Function.call أو Function.apply .

على سبيل المثال، إذا كنت تريد تطبيق forEach على خاصية ChildNodes لكائن Node، فستفعل ذلك على النحو التالي:

Array.prototype.forEach.call(node.childNodes, function(child) ( // افعل شيئًا باستخدام الكائن الفرعي));

لتسهيل إعادة استخدام هذه الخدعة، يمكنك الإعلان عن مرجع للأسلوب Array.prototype.forEach في متغير منفصل واستخدامه كاختصار:

// (بافتراض أن جميع التعليمات البرمجية أدناه موجودة في نفس النطاق) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // افعل شيئًا باستخدام الكائن الفرعي));

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

2. تحويل إلى مجموعة حقيقية

هناك أيضًا طريقة أخرى بسيطة جدًا للتكرار على كائن يشبه المصفوفة: تحويله إلى مصفوفة حقيقية واستخدام أي من الطرق التي تمت مناقشتها أعلاه للتكرار على المصفوفات الحقيقية. للتحويل، يمكنك استخدام الأسلوب Array.prototype.slice العام، والذي يمكن تطبيقه على أي كائن يشبه المصفوفة. ويتم ذلك بكل بساطة، كما هو موضح في المثال أدناه:

var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);

على سبيل المثال، إذا أردت تحويل مجموعة NodeList إلى مصفوفة فعلية، فستحتاج إلى رمز مثل هذا:

var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);

3. ملاحظة حول كائنات وقت التشغيل

إذا قمت بتطبيق أساليب Array.prototype على كائنات وقت التشغيل (مثل مجموعات DOM)، فيجب أن تدرك أن هذه الأساليب ليست مضمونة للعمل بشكل صحيح في جميع بيئات وقت التشغيل (بما في ذلك المتصفحات). يعتمد هذا على سلوك كائن معين في بيئة تنفيذ معينة، أو بشكل أكثر دقة، على كيفية تنفيذ العملية المجردة HasProperty في هذا الكائن. تكمن المشكلة في أن معيار ES5 نفسه يسمح بإمكانية سوء تصرف الكائن فيما يتعلق بهذه العملية (انظر الفقرة 8.6.2).

لذلك، من المهم اختبار تشغيل أساليب Array.prototype في كل بيئة تشغيل (متصفح) تخطط لاستخدام تطبيقك فيها.

• I. التكرار على المصفوفات الحقيقية
  1. لكل طريقة والأساليب ذات الصلة
  2. لحلقة
  3. الاستخدام السليم للحلقة for...in
  4. for...of حلقة (الاستخدام الضمني للمكرر)
  5. الاستخدام الصريح للمكرر
• 1. استخدام طرق للتكرار على المصفوفات الحقيقية
  2. تحويل إلى مجموعة حقيقية
  3. ملاحظة حول كائنات وقت التشغيل

I. التكرار على المصفوفات الحقيقية

1. طريقة Array.prototype.forEach؛
2. الكلاسيكية للحلقة
3. حلقة "صحيحة" تم إنشاؤها من أجل... في الحلقة.

1. for...of حلقة (الاستخدام الضمني للمكرر)؛
2. الاستخدام الصريح للمكرر.

1. طريقة forEach والأساليب ذات الصلة

مثال الاستخدام:
var a = ["a"، "b"، "c"]؛ a.forEach(function(entry) ( console.log(entry); ));
بشكل عام، يتطلب استخدام forEach توصيل مكتبة محاكاة es5-shim للمتصفحات التي لا تدعم هذه الطريقة أصلاً. وتشمل هذه الإصدارات IE 8 والإصدارات الأقدم، والتي لا تزال قيد الاستخدام في بعض الأماكن.

تتمثل ميزة forEach في أنه ليست هناك حاجة للإعلان عن المتغيرات المحلية لتخزين فهرس وقيمة عنصر المصفوفة الحالي، حيث يتم تمريرها تلقائيًا إلى وظيفة رد الاتصال كوسيطات.

إذا كنت قلقًا بشأن التكلفة المحتملة لاستدعاء رد اتصال على كل عنصر، فلا تقلق واقرأ هذا.

تم تصميم ForEach للتكرار على جميع عناصر المصفوفة، ولكن بالإضافة إلى ذلك، يقدم ES5 العديد من الطرق المفيدة للتكرار عبر كل العناصر أو بعضها بالإضافة إلى تنفيذ بعض الإجراءات عليها:

• every - يُرجع صحيحًا إذا قام رد الاتصال بإرجاع قيمة يمكن تحويلها إلى صحيح لكل عنصر من عناصر المصفوفة.
• some - يُرجع صحيحًا إذا كان رد الاتصال يُرجع قيمة يمكن تحويلها إلى صحيح بالنسبة لعنصر واحد على الأقل من المصفوفة.
• عامل التصفية - ينشئ مصفوفة جديدة تتضمن عناصر المصفوفة الأصلية التي يعود رد الاتصال لها صحيحًا.
• الخريطة - تقوم بإنشاء مصفوفة جديدة تتكون من القيم التي يتم إرجاعها بواسطة رد الاتصال.
• تقليل - تقليل مصفوفة إلى قيمة واحدة، وتطبيق رد اتصال على كل عنصر من عناصر المصفوفة بدوره، بدءًا من العنصر الأول (يمكن أن يكون مفيدًا لحساب مجموع عناصر المصفوفة ووظائف التلخيص الأخرى).
• تقليل اليمين - يعمل بشكل مشابه لتقليل، ولكنه يتكرر عبر العناصر بترتيب عكسي.

2. للحلقة

فار أ = ["أ"، "ب"، "ج"]؛ مؤشر فار؛ لـ (الفهرس = 0؛ فهرس< a.length; ++index) { console.log(a); }
إذا كان طول المصفوفة ثابتًا طوال الحلقة، وكانت الحلقة نفسها تنتمي إلى قسم التعليمات البرمجية ذي الأداء الحرج (وهو أمر غير مرجح)، فيمكنك استخدام إصدار "أكثر مثالية" من أجل تخزين طول المصفوفة :

فار أ = ["أ"، "ب"، "ج"]؛ مؤشر فار، لين؛ لـ (index = 0، len = a.length؛ Index< len; ++index) { console.log(a); }
من الناحية النظرية، يجب أن يعمل هذا الرمز بشكل أسرع قليلاً من الكود السابق.

إذا لم يكن ترتيب العناصر مهمًا، فيمكنك المضي قدمًا فيما يتعلق بالتحسين والتخلص من المتغير الخاص بتخزين طول المصفوفة، وتغيير ترتيب البحث إلى العكس:

فار أ = ["أ"، "ب"، "ج"]؛ مؤشر فار؛ for (index = a.length - 1; Index >= 0; --index) ( console.log(a); )
ومع ذلك، في محركات JavaScript الحديثة، عادةً ما لا تعني ألعاب التحسين هذه شيئًا.

3. الاستخدام الصحيح للحلقة for...in

ومع ذلك، في بعض الحالات، مثل التكرار على المصفوفات المتفرقة، for...in يمكن أن يكون مفيدًا، طالما أنك تتخذ الاحتياطات اللازمة، كما هو موضح في المثال أدناه:

// أ - مصفوفة متفرقة var a = ; أ = "أ"; أ = "ب"; أ = "ج"; لـ (مفتاح var في a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && مفتاح<= 4294967294) { console.log(a); } }
في هذا المثال، يتم إجراء فحصين عند كل تكرار للحلقة:

1. أن المصفوفة لها خاصية خاصة بها تسمى المفتاح (غير موروثة من النموذج الأولي الخاص بها).
2. هذا المفتاح عبارة عن سلسلة تحتوي على التمثيل العشري لعدد صحيح قيمته أقل من 4294967294. من أين يأتي الرقم الأخير؟ من تعريف فهرس المصفوفة في ES5، والذي يوضح أن أعلى فهرس يمكن أن يحتوي عليه عنصر في المصفوفة هو: (2^32 - 2) = 4294967294 .

لكي لا تكتب رمز التحقق المرهق هذا في كل مرة تحتاج فيها إلى التكرار عبر مصفوفة، يمكنك كتابته كدالة منفصلة:

الدالة arrayHasOwnIndex(array, key) (إرجاع array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294; }
ثم سيتم تقليل جسم الحلقة من المثال بشكل كبير:

لـ (مفتاح في a) ( إذا (arrayHasOwnIndex(a, key)) (console.log(a); ) )
يعتبر رمز التحقق الذي تمت مناقشته أعلاه عالميًا ومناسبًا لجميع الحالات. ولكن بدلاً من ذلك، يمكنك استخدام إصدار أقصر، على الرغم من أنه ليس صحيحًا تمامًا من الناحية الرسمية، ولكنه مع ذلك مناسب لمعظم الحالات:

لـ (مفتاح في a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) (console.log(a); ) )

4. For...of حلقة (الاستخدام الضمني للمكرر)

مكرر هو بروتوكول يتم تنفيذه بواسطة كائن يحدد طريقة قياسية للحصول على سلسلة من القيم (محدودة أو لا نهائية).
المُكرِّر هو كائن يُعرّف الطريقة التالية () - وهي دالة بدون وسيطات تقوم بإرجاع كائن بخاصيتين:

1. تم (منطقي) - صحيح إذا وصل المكرر إلى نهاية التسلسل القابل للتكرار. وإلا فإن القيمة خاطئة.
2. القيمة - تحدد القيمة التي يتم إرجاعها بواسطة المكرر. قد تكون غير محددة (مفقودة) إذا كانت الخاصية المنجزة صحيحة.

مثال على استخدام ل...من:

فارفال. var a = ["a"، "b"، "c"]؛ لـ (val of a) (console.log(val); )
في المثال أعلاه، تستدعي حلقة for...of ضمنيًا مُكرِّر كائن المصفوفة للحصول على كل قيمة من المصفوفة.

5. الاستخدام الصريح للمكرر

فار أ = ["أ"، "ب"، "ج"]؛ var it = a.entries(); إدخال فار؛ بينما (!(entry = it.next()).done) (console.log(entry.value);)
في هذا المثال، تقوم طريقة Array.prototype.entries بإرجاع مكرر يتم استخدامه لعرض قيم المصفوفة. في كل تكرار، تحتوي قيمة الإدخال على مصفوفة من النموذج [key, value] .

ثانيا. التكرار على كائنات تشبه المصفوفة

1. استخدام طرق للتكرار على المصفوفات الحقيقية

يمكن تطبيق بنيات for و for...in على الكائنات الشبيهة بالمصفوفات بنفس الطريقة التي يتم تطبيقها بها على المصفوفات الحقيقية.

تنطبق ForEach وطرق Array.prototype الأخرى أيضًا على الكائنات المشابهة للصفيف. للقيام بذلك تحتاج إلى استخدام Function.call أو Function.apply .

على سبيل المثال، إذا كنت تريد تطبيق forEach على خاصية ChildNodes لكائن Node، فستفعل ذلك على النحو التالي:

Array.prototype.forEach.call(node.childNodes, function(child) ( // افعل شيئًا باستخدام الكائن الفرعي));
لتسهيل إعادة استخدام هذه الخدعة، يمكنك الإعلان عن مرجع للأسلوب Array.prototype.forEach في متغير منفصل واستخدامه كاختصار:

// (بافتراض أن جميع التعليمات البرمجية أدناه موجودة في نفس النطاق) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // افعل شيئًا باستخدام الكائن الفرعي));
إذا كان كائن يشبه المصفوفة يحتوي على مكرر، فيمكن استخدامه بشكل صريح أو ضمني للتكرار على الكائن بنفس طريقة المصفوفات الحقيقية.

2. تحويل إلى مجموعة حقيقية

var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
على سبيل المثال، إذا أردت تحويل مجموعة NodeList إلى مصفوفة فعلية، فستحتاج إلى رمز مثل هذا:

var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
تحديث: كما هو مذكور في تعليقات rock و torbasow، في ES6 يمكنك استخدام طريقة Array.from الأكثر وضوحًا بدلاً من Array.prototype.slice.

3. ملاحظة حول كائنات وقت التشغيل

لذلك، من المهم اختبار تشغيل أساليب Array.prototype في كل بيئة تشغيل (متصفح) تخطط لاستخدام تطبيقك فيها.

ال لكل ()تنفذ الطريقة وظيفة مقدمة مرة واحدة لكل عنصر من عناصر المصفوفة.

يتم تخزين مصدر هذا المثال التفاعلي في مستودع GitHub. إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية، فيرجى استنساخ https://github.com/mdn/interactive-examples وإرسال طلب سحب إلينا.

بناء الجملة

حدود

قيمة الإرجاع

وصف

يستدعي الدالة forEach() دالة رد الاتصال المتوفرة مرة واحدة لكل عنصر في مصفوفة بترتيب تصاعدي. ولا يتم استدعاؤه لخصائص الفهرس التي تم حذفها أو لم تتم تهيئتها. (بالنسبة للمصفوفات المتفرقة، .)

يتم استدعاء رد الاتصال بثلاث وسائط:

1. قيمة العنصر
2. مؤشر العنصر
3. كائن المصفوفة الذي يتم اجتيازه

إذا تم توفير معلمة thisArg إلى forEach()، فسيتم استخدامها كقيمة رد اتصال. يتم تحديد قيمة thisArg التي يمكن ملاحظتها في النهاية عن طريق رد الاتصال وفقًا للقواعد المعتادة لتحديد ما تراه الدالة.

يتم تعيين نطاق العناصر التي تتم معالجتها بواسطة forEach() قبل الاستدعاء الأول لرد الاتصال. العناصر التي يتم إلحاقها بالمصفوفة بعد بدء استدعاء forEach() لن تتم زيارتها عن طريق رد الاتصال. إذا تم تغيير أو حذف العناصر الموجودة في المصفوفة، فإن قيمتها التي تم تمريرها إلى رد الاتصال ستكون هي القيمة في الوقت الذي يزورهم فيه forEach()؛ العناصر التي تم حذفها قبل زيارتها لا تتم زيارتها. إذا تمت إزالة العناصر التي تمت زيارتها بالفعل (على سبيل المثال، باستخدام Shift()) أثناء التكرار، فسيتم تخطي العناصر اللاحقة. (انظر هذا المثال أدناه.)

ينفذ forEach() وظيفة رد الاتصال مرة واحدة لكل عنصر من عناصر المصفوفة؛ على عكس الخريطة () أو تقليل () فإنها تُرجع دائمًا القيمة غير المحددة وغير قابلة للتسلسل. حالة الاستخدام النموذجية هي تنفيذ آثار جانبية في نهاية السلسلة.

لا يقوم forEach() بتغيير المصفوفة التي يتم استدعاؤها عليها. (ومع ذلك، رد الاتصال قد يفعل ذلك)

لا توجد طريقة لإيقاف أو قطع حلقة forEach() بخلاف طرح استثناء. إذا كنت بحاجة إلى مثل هذا السلوك، فإن طريقة forEach() هي الأداة الخاطئة.

يمكن تحقيق الإنهاء المبكر من خلال:

طرق المصفوفة: every() و some() و find() و findIndex() تختبر عناصر المصفوفة باستخدام مسند يُرجع قيمة صحيحة لتحديد ما إذا كانت هناك حاجة إلى المزيد من التكرار.

أمثلة

لا توجد عملية للقيم غير المهيأة (صفائف متفرقة)

تحويل حلقة for إلى forEach

طباعة محتويات المصفوفة

ملحوظة:من أجل عرض محتوى المصفوفة في وحدة التحكم، يمكنك استخدام console.table() ، الذي يطبع نسخة منسقة من المصفوفة.

يوضح المثال التالي طريقة بديلة باستخدام forEach() .

تسجل التعليمة البرمجية التالية سطرًا لكل عنصر في المصفوفة:

الدالة logArrayElements(element, Index, array) ( console.log("a[" + Index + "] = " + element)) // لاحظ أنه تم تخطي الفهرس 2، حيث لا يوجد عنصر في // هذا الموضع في صفيف... .forEach(logArrayElements) // السجلات: // a = 2 // a = 5 // a = 9

باستخدام هذا Arg

المثال التالي (المفتعل) يقوم بتحديث خصائص الكائن من كل إدخال في المصفوفة:

عداد الدالة () ( this.sum = 0 this.count = 0 ) Counter.prototype.add = function(array) ( array.forEach(function(entry) ( this.sum += input ++this.count )، هذا ) // ^---- ملاحظة) const obj = new Counter() obj.add() obj.count // 3 obj.sum // 16

بما أن المعلمة thisArg (هذا) متوفرة لـ forEach()، فسيتم تمريرها إلى رد الاتصال في كل مرة يتم استدعاؤها. يستخدمها رد الاتصال كقيمة this.

وظيفة نسخ الكائن

يقوم التعليمة البرمجية التالية بإنشاء نسخة من كائن معين.

هناك طرق مختلفة لإنشاء نسخة من كائن. ما يلي هو مجرد طريقة واحدة ويتم تقديمه لشرح كيفية عمل Array.prototype.forEach() باستخدام وظائف خاصية التعريف ECMAScript 5 Object.*.

نسخة الوظيفة (obj) ( نسخة const = Object.create (Object.getPrototypeOf (obj)) const PropNames = Object.getOwnPropertyNames (obj) PropNames.forEach (function (name) ( const desc = Object.getOwnPropertyDescriptor (obj، name) كائن .defineProperty(copy, name, desc)) )) إرجاع نسخة ) const obj1 = ( a: 1, b: 2 ) const obj2 = Copy(obj1) // يبدو obj2 مثل obj1 الآن

إذا تم تعديل المصفوفة أثناء التكرار، فقد يتم تخطي العناصر الأخرى.

يسجل المثال التالي "واحد" و"اثنان" و"أربعة".

عندما يحتوي الإدخال على القيمة "two" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.!}

لا يقوم forEach() بإنشاء نسخة من المصفوفة قبل التكرار.

دع الكلمات = ["واحد"، "اثنين"، "ثلاثة"، "أربعة"] الكلمات.forEach(function(word) (console.log(word) if (word === "two") (words.shift( ) ) )) // واحد // اثنان // أربعة

تتسطح مجموعة

المثال التالي هنا فقط لغرض التعلم. إذا كنت تريد تسوية مصفوفة باستخدام طرق مدمجة، فيمكنك استخدام Array.prototype.flat() (والتي من المتوقع أن تكون جزءًا من ES2019، ويتم تنفيذها بالفعل في بعض المتصفحات).

/** * تسوية المصفوفة التي تم تمريرها في مصفوفة ذات بعد واحد * * @params (array) arr * @returns (array) */ function flatten(arr) ( const result = arr.forEach((i) => ( if (Array. isArray(i)) ( result.push(...flatten(i)) ) else ( result.push(i) )) نتيجة الإرجاع ) // مشكلة الاستخدام const = , 8, 9]] flatten(problem) //

ملاحظة حول استخدام الوعود أو الوظائف غير المتزامنة

تحديد

التوافق المتصفح

يتم إنشاء جدول التوافق الموجود في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.

تحديث بيانات التوافق على GitHub

آخر تحديث: 26/03/2018

يمثل كائن Array مصفوفة ويوفر عددًا من الخصائص والأساليب التي يمكننا من خلالها التعامل مع المصفوفة.

تهيئة المصفوفة

يمكنك إنشاء مصفوفة فارغة باستخدام الأقواس المربعة أو مُنشئ المصفوفة:

مستخدمو var = new Array(); فار الناس = ; console.log(users); // مصفوفة console.log(people); //مجموعة مصفوفة

يمكنك تهيئة مصفوفة على الفور بعدد معين من العناصر:

var users = new Array("Tom", "Bill", "Alice"); var People = ["Sam"، "John"، "Kate"]; console.log(users); // ["توم"، "بيل"، "أليس"] console.log(people); // ["سام"، "جون"، "كيت"]

يمكنك تعريف مصفوفة وإضافة عناصر جديدة إليها أثناء التقدم:

مستخدمو var = new Array(); المستخدمين = "توم"; المستخدمين = "كيت"; console.log(users); // "توم" console.log(users); // غير معرف

لا يهم أنه افتراضيًا يتم إنشاء المصفوفة بطول صفري. باستخدام الفهارس، يمكننا استبدال عنصر أو آخر في مصفوفة عند فهرس محدد.

طول

لمعرفة طول المصفوفة، استخدم خاصية الطول:

var Fruit = new Array(); الفاكهة = "التفاح"؛ الفاكهة = "الكمثرى"؛ الفاكهة = "الخوخ"؛ document.write("في عنصر فاكهة المصفوفة " + Fruit.length + ":
"); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

في الواقع، طول المصفوفة سيكون فهرس العنصر الأخير زائد واحد. على سبيل المثال:

مستخدمو var = new Array(); // لا يوجد أي عنصر في المصفوفة users = "Tom"; المستخدمين = "كيت"; المستخدمين = "سام"; ل(فار ط = 0؛ ط

إخراج المتصفح:

توم كيت غير محدد غير محدد سام

على الرغم من أننا لم نضيف عناصر للمؤشرين 2 و 3، فإن طول المصفوفة في هذه الحالة سيكون الرقم 5. كل ما في الأمر هو أن العناصر ذات المؤشرات 2 و 3 ستكون لها قيمة غير محددة.

نسخ مصفوفة. شريحة()

يمكن أن يكون نسخ المصفوفة سطحيًا أو سطحيًا (نسخة ضحلة) وعميقًا (نسخة عميقة).

بالنسبة للنسخ الضحل، يكفي تعيين متغير بقيمة متغير آخر يخزن مصفوفة:

var users = ["Tom"، "Sam"، "Bill"]؛ console.log(users); // ["Tom"، "Sam"، "Bill"] varpeople = users; // نسخ الأشخاص الضحلة = "مايك"؛ // تغيير العنصر الثاني console.log(users); // ["توم"، "مايك"، "بيل"]

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

وهذا السلوك ليس مرغوبًا دائمًا. على سبيل المثال، نريد أن تشير المتغيرات إلى مصفوفات منفصلة بعد النسخ. وفي هذه الحالة، يمكنك استخدام النسخ العميق باستخدام طريقة الشريحة ():

var users = ["Tom"، "Sam"، "Bill"]؛ console.log(users); // ["Tom"، "Sam"، "Bill"] varpeople = users.slice(); // نسخة عميقة People = "Mike"; // تغيير العنصر الثاني console.log(users); // ["توم"، "سام"، "بيل"] console.log(people); // ["توم"، "مايك"، "بيل"]

في هذه الحالة، بعد النسخ، ستشير المتغيرات إلى مصفوفات مختلفة، ويمكننا تغييرها بشكل منفصل عن بعضها البعض.

تسمح لك طريقة الشريحة () أيضًا بنسخ جزء من المصفوفة:

var users = ["Tom"، "Sam"، "Bill"، "Alice"، "Kate"]؛ فار الناس = users.slice(1, 4); console.log(people); // ["سام"، "بيل"، "أليس"]

يتم تمرير طريقة الشريحة () فهارس البداية والنهاية، والتي تستخدم لاسترداد القيم من المصفوفة. أي أنه في هذه الحالة، ينتقل التحديد في المصفوفة الجديدة من الفهرس 1 إلى الفهرس 4، دون تضمينه. وبما أن فهرسة المصفوفة تبدأ من الصفر، فإن المصفوفة الجديدة ستحتوي على العنصر الثاني والثالث والرابع.

يدفع()

تضيف طريقة الدفع () عنصرًا إلى نهاية المصفوفة:

فاكهة فار = ; Fruit.push("التفاح"); Fruit.push("الكمثرى"); Fruit.push("الخوخ"); Fruit.push("الكرز"،"المشمش
"); document.write (الفاكهة)؛ // التفاح والكمثرى والخوخ والكرز والمشمش

البوب ​​()

تقوم طريقة pop() بإزالة العنصر الأخير من المصفوفة:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"]؛ فار lastFruit = Fruit.pop(); // استخرج العنصر الأخير من المصفوفة document.write(lastFruit + "
"); document.write("في عنصر فاكهة المصفوفة " + Fruit. length + ":
"); for(var i=0; i ");

إخراج المتصفح:

البرقوق تحتوي مجموعة الفاكهة على عنصرين: التفاح والكمثرى

يحول()

يقوم الأسلوب Shift() باسترداد وإزالة العنصر الأول من المصفوفة:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"]؛ var firstFruit = Fruit.shift(); document.write(firstFruit + "
"); document.write("في عنصر فاكهة المصفوفة " + Fruit. length + ":
"); for(var i=0; i ");

إخراج المتصفح:

التفاح تحتوي مجموعة الفاكهة على عنصرين: الكمثرى والخوخ

إلغاء النقل ()

يضيف التابع unshift()‎ عنصرًا جديدًا إلى بداية المصفوفة:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"]؛ Fruit.unshift("المشمش"); document.write(fruit);

إخراج المتصفح:

المشمش، التفاح، الكمثرى، البرقوق

إزالة عنصر حسب الفهرس. لصق او جمع()

تقوم طريقة splice () بإزالة العناصر الموجودة في فهرس محدد. على سبيل المثال، إزالة العناصر من الفهرس الثالث:

var users = ["Tom"، "Sam"، "Bill"، "Alice"، "Kate"]؛ تم حذف فار = users.splice(3); console.log(deleted); // [ "أليس"، "كيت" ] console.log(users); // [ "توم"، "سام"، "بيل" ]

تقوم طريقة الشريحة بإرجاع العناصر التي تمت إزالتها.

في هذه الحالة، يتم الحذف من بداية المصفوفة. إذا قمت بتمرير فهرس سلبي، فسيتم إجراء الحذف من نهاية المصفوفة. على سبيل المثال، دعونا نزيل العنصر الأخير:

var users = ["Tom"، "Sam"، "Bill"، "Alice"، "Kate"]؛ فار محذوف = users.splice(-1); console.log(deleted); // [ "كيت"] console.log(users); // [ "توم"، "سام"، "بيل"، "أليس" ]

يسمح لك إصدار إضافي من الطريقة بتحديد فهرس النهاية للحذف. على سبيل المثال، لنحذف الفهرس الأول إلى الثالث:

var users = ["Tom"، "Sam"، "Bill"، "Alice"، "Kate"]؛ تم حذف فار = users.splice(1,3); console.log(deleted); // [ "Sam"، "Bill"، "Alice" ] console.log(users); // [ "توم"، "كيت" ]

يتيح لك إصدار آخر من التابع splice إدراج عناصر جديدة بدلاً من العناصر المحذوفة:

var users = ["Tom"، "Sam"، "Bill"، "Alice"، "Kate"]؛ فار محذوف = users.splice(1,3, "Ann", "Bob"); console.log(deleted); // [ "Sam"، "Bill"، "Alice" ] console.log(users); // [ "توم"، "آن"، "بوب"، "كيت" ]

في هذه الحالة، نقوم بحذف ثلاثة عناصر من الفهارس الأول إلى الثالث وإدراج عنصرين بدلاً من ذلك.

كونكات ()

يتم استخدام طريقة concat() لدمج المصفوفات:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"]؛ var الخضار = ["طماطم"، "خيار"، "بطاطس"]؛ منتجات var = Fruit.concat(vegetables); ل(فار ط = 0؛ ط< products.length; i++) document.write(products[i] + "
");

في هذه الحالة، ليس من الضروري دمج المصفوفات من نفس النوع فقط. أنواع مختلفة ممكنة:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"]؛ أسعار فار = ; منتجات فار = Fruit.concat(prices);

ينضم()

يجمع الأسلوب join() كافة عناصر المصفوفة في سلسلة واحدة:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"، "مشمش"، "خوخ"]؛ var FruitString = Fruit.join("، "); document.write(fruitString);

يتم تمرير طريقة join () الفاصل بين عناصر المصفوفة. في هذه الحالة، سيتم استخدام الفاصلة والمسافة ("،") كفاصل.

نوع()

تقوم طريقة الترتيب () بفرز المصفوفة بترتيب تصاعدي:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"، "مشمش"، "خوخ"]؛ Fruit.sort(); ل(فار ط=0; ط< fruit.length; i++) document.write(fruit[i] + "
");

إخراج المتصفح:

المشمش الكمثرى الخوخ البرقوق التفاح

يعكس()

تعمل الطريقة العكسية () على عكس المصفوفة للخلف:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"، "مشمش"، "خوخ"]؛ Fruit.reverse(); ل(فار ط = 0؛ ط< fruit.length; i++) document.write(fruit[i] + "
");

إخراج المتصفح:

الخوخ، المشمش، البرقوق، الكمثرى، التفاح

بالاشتراك مع طريقة الفرز () يمكنك فرز المصفوفة بترتيب تنازلي:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"، "مشمش"، "خوخ"]؛ Fruit.sort().reverse(); ل(فار ط = 0؛ ط< fruit.length; i++) document.write(fruit[i] + "
");

إخراج المتصفح:

التفاح، البرقوق، الخوخ، الكمثرى، المشمش

العثور على فهرس العنصر

تقوم طريقتا IndexOf() و lastIndexOf() بإرجاع فهرس التضمين الأول والأخير لعنصر في المصفوفة. على سبيل المثال:

Var Fruit = ["تفاح"، "كمثرى"، "برقوق"، "تفاح"، "كمثرى"]؛ var firstIndex = Fruit.indexOf("apples"); var lastIndex = Fruit.lastIndexOf("apples"); varotherIndex = Fruit.indexOf("cherries"); document.write(firstIndex); // 0 document.write(lastIndex); // 3 document.write(otherIndex); // -1

قيمة firstIndex هي 0 لأن التضمين الأول لسطر "التفاحات" في المصفوفة يكون عند الفهرس 0، والأخير عند الفهرس 3.

إذا لم يكن العنصر موجودًا في المصفوفة، ففي هذه الحالة تقوم طريقتا IndexOf() و lastIndexOf() بإرجاع القيمة -1.

كل()

تتحقق الطريقة every() مما إذا كانت جميع العناصر تطابق شرطًا معينًا:

أرقام المتغير = [ 1, -12, 8, -4, 25, 42 ]; حالة الوظيفة (القيمة، الفهرس، المصفوفة) ( var result = false; if (value > 0) ( result = true; ) return result; ); تم تمرير فار = أرقام.كل(حالة); document.write(passed); // خطأ شنيع

يتم تمرير الأسلوب every() دالة تمثل الشرط كمعلمة. تأخذ هذه الوظيفة ثلاث معلمات:

حالة الوظيفة (القيمة، الفهرس، الصفيف) ()

تمثل معلمة القيمة عنصر الصفيف الحالي الذي يتم تكراره، وتمثل معلمة الفهرس فهرس ذلك العنصر، وتقوم معلمة الصفيف بتمرير مرجع إلى الصفيف.

في هذه الوظيفة يمكننا التحقق من قيمة العنصر الذي تم تمريره للتأكد من توافقها مع بعض الشروط. على سبيل المثال، في هذا المثال، نتحقق من كل عنصر في المصفوفة لمعرفة ما إذا كان أكبر من الصفر. وإذا كانت أكبر، فإننا نعيد القيمة true، أي أن العنصر يحقق الشرط. إذا كان أقل، فسيتم إرجاع خطأ - العنصر لا يفي بالشرط.

ونتيجة لذلك، عندما يتم استدعاء الأسلوب Numbers.every(condition)، فإنه يتكرر عبر جميع عناصر مصفوفة الأرقام ويمررها واحدًا تلو الآخر إلى الدالة الشرطية. إذا أعادت هذه الدالة القيمة true لجميع العناصر، فإن التابع every() يُرجع القيمة true. إذا لم يتطابق عنصر واحد على الأقل مع الشرط، فستُرجع الطريقة every() false .

بعض()

تشبه الطريقة some() الطريقة every()، ولكنها تتحقق فقط مما إذا كان عنصر واحد على الأقل يطابق الشرط. وفي هذه الحالة، تُرجع الدالة some()‎ القيمة true . إذا لم تكن هناك عناصر مطابقة للشرط في المصفوفة، فسيتم إرجاع خطأ:

أرقام المتغير = [ 1, -12, 8, -4, 25, 42 ]; حالة الوظيفة (القيمة، الفهرس، المصفوفة) ( var result = false; if (value === 8) ( result = true; ) return result; ); تم تمرير فار = أرقام.بعض(الحالة); // حقيقي

منقي()

يقبل التابع filter()‎، مثل some() و every() ، دالة شرطية. ولكن في الوقت نفسه تقوم بإرجاع مجموعة من تلك العناصر التي تستوفي هذا الشرط:

أرقام المتغير = [ 1, -12, 8, -4, 25, 42 ]; حالة الوظيفة (القيمة، الفهرس، المصفوفة) ( var result = false; if (value > 0) ( result = true; ) return result; ); var filteredNumbers = number.filter(condition); ل(فار ط = 0؛ ط< filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
");

إخراج المتصفح:

1 8 25 42

forEach () والخريطة ()

تتكرر أساليب forEach() وmap() على العناصر وتنفذ عمليات معينة عليها. على سبيل المثال، لحساب مربعات الأرقام في مصفوفة، يمكنك استخدام الكود التالي:

أرقام المتغير = [1، 2، 3، 4، 5، 6]؛ ل(فار ط = 0؛ ط "); }

ولكن باستخدام طريقة forEach() يمكنك تبسيط هذا البناء:

أرقام المتغير = [1، 2، 3، 4، 5، 6]؛ دالة مربع(قيمة، فهرس، صفيف) ( var result = value * value; document.write("مربع الرقم " + value + " هو " + result + ")
"); ); number.forEach(square);

تأخذ طريقة forEach () نفس الوظيفة كمعلمة، والتي، عند التكرار على العناصر، يتم تمرير العنصر الحالي الذي يتم تكراره ويتم تنفيذ العمليات عليه.

تشبه طريقة Map() طريقة forEach؛ كما أنها تأخذ أيضًا دالة تنفذ عمليات على عناصر المصفوفة كمعلمة، لكن طريقة Map() تُرجع مصفوفة جديدة مع نتائج العمليات على عناصر المصفوفة.

على سبيل المثال، لنستخدم التابع Map لحساب مربعات الأرقام في المصفوفة:

أرقام المتغير = [1، 2، 3، 4، 5، 6]؛ مربع الوظيفة (القيمة، الفهرس، الصفيف) ( نتيجة الإرجاع = القيمة * القيمة؛ )؛ var SquareArray = number.map(square); document.write(squareArray);

تستقبل الوظيفة التي تم تمريرها إلى طريقة الخريطة () العنصر الحالي الذي يتم تكراره، وتنفذ العمليات عليه وترجع بعض القيمة. ثم تنتقل هذه القيمة إلى SquareArray الناتج