الاختلافات بين forEach () و map () التي يجب أن يعرفها كل مطور

تحتوي JavaScript على بعض الطرق المفيدة التي تساعدنا على التكرار من خلال المصفوفات الخاصة بنا. النوعان الأكثر استخدامًا للتكرار هما Array.prototype.map()و Array.prototype.forEach().

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

في هذه المقالة سوف ننظر إلى ما يلي:

  • تعريفات
  • القيمة المعادة
  • القدرة على ربط طرق أخرى
  • التحولية
  • سرعة الأداء
  • افكار اخيرة

تعريفات

و mapيتلقى الأسلوب وظيفة كمعلمة. ثم يطبقه على كل عنصر ويعيد مصفوفة جديدة تمامًا مملوءة بنتائج استدعاء الوظيفة المتوفرة.

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

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) // >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]

مثل map، forEach()تستقبل الطريقة دالة كوسيطة وتنفذها مرة واحدة لكل عنصر مصفوفة. ومع ذلك ، بدلاً من إرجاع مصفوفة جديدة مثل map، فإنها تعود undefined.

const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass

1. القيمة المعادة

الفرق الأول بين map()و forEach()هو القيمة المعادة. ل forEach()إرجاع الأسلوب undefinedو map()عائدات مجموعة جديدة مع عناصر تحويلها. حتى لو قاموا بنفس الوظيفة ، تظل القيمة المعادة مختلفة.

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 

2. القدرة على ربط طرق أخرى

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

هذا شيء لا يمكنك فعله forEach()لأنه ، كما قد تتخيل ، يعود undefined.

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined myAwesomeArray.map(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>>return value: 55 

3. التحوّل

بشكل عام ، تعني كلمة "mutate" تغيير أو تبديل أو تعديل أو تحويل. وفي عالم JavaScript ، لها نفس المعنى.

الكائن القابل للتغيير هو كائن يمكن تعديل حالته بعد إنشائه. إذن ، ماذا عن forEachوفيما mapيتعلق بالتحول؟

حسنًا ، وفقًا لوثائق MDN:

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

map()لا يغير المصفوفة التي يتم استدعاؤها عليها (على الرغم من أنه callback، في حالة الاستدعاء ، قد يحدث ذلك)

جافا سكريبت غريب .

GIF

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

حسنًا ، في رأيي ، هذا التعريف غير واضح. ولمعرفة أيهما لا يغير المصفوفة الأصلية ، علينا أولاً التحقق من كيفية عمل هاتين الطريقتين.

تقوم map()الطريقة بإرجاع مصفوفة جديدة تمامًا تحتوي على عناصر محولة ونفس كمية البيانات. في حالة forEach()، حتى إذا تم إرجاعها undefined، فإنها ستغير المصفوفة الأصلية بالامتداد callback.

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

4. سرعة الأداء

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

يمكنك التحقق من ذلك بنفسك باستخدام هذا المثال أدناه أو باستخدام jsPerf لمعرفة أيهما أسرع.

const myAwesomeArray = [1, 2, 3, 4, 5] const startForEach = performance.now() myAwesomeArray.forEach(x => (x + x) * 10000000000) const endForEach = performance.now() console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`) const startMap = performance.now() myAwesomeArray.map(x => (x + x) * 10000000000) const endMap = performance.now() console.log(`Speed [map]: ${endMap - startMap} miliseconds`) 

افكار اخيرة

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

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

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

اقرأ المزيد من مقالاتي على مدونتي

صورة فرانك ف. على Unsplash