انتقل إلى المحتوى الرئيسي

طرق تكرار الصفيف (خريطة ، عامل تصفية ، تقليل)

@serverSerrverlesskiy

لغة JavaScript لها تفضيل واضح للمصفوفات على هياكل البيانات الأخرى. لديهم الكثير من الحيل المحددة والمريحة ، على سبيل المثال ، مجموعة كاملة من طرق التكرار: map, filter, reduce.

خريطة

Create

ال map () طريقة تخلق🏗️ مصفوفة с جديدة نتيجة استدعاء الوظيفة المحددة ⚙️ لكل عنصر من عناصر المصفوفة.

بناء الجملة

Book

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
// Returns the item for new_array
}[, thisArg])

ال map طريقة استدعاء تمرير callback تعمل مرة واحدة لكل عنصر ، بترتيب حدوثها ، وتقوم ببناء مصفوفة جديدة من نتائج استدعائها. يتم استدعاء وظيفة "callback" فقط لفهارس المصفوفة التي تم تعيين قيم لها ، بما في ذلك "undefined". لا يتم استدعاؤه لعناصر الصفيف المفقودة (أي للفهارس التي لم يتم تحديدها أو حذفها أو تعيين قيمة لها مطلقًا).

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

  • قيمة العنصر ،
  • فهرس العنصر
  • والمصفوفة التي يتم من خلالها المرور.

إذا كان thisArg تم تمرير المعلمة إلى map الطريقة ، سيتم استخدامها على أنهاthis قيمة متىcallback يسمى. وإلا فإن this ستكون القيمةundefined. في النهاية ، قيمةthis كما رأينا من callback يتم تحديد الوظيفة وفقًا للقواعد المعتادة للتعريف this كما رأينا من وظيفة.

لا يعدل التابع "map" المصفوفة التي تم استدعاؤها (على الرغم من أن الوظيفة ⚙️ يمكنها القيام بذلك!).

نطاق العناصر التي تتم معالجتها بواسطة ملفmap تم تعيين الطريقة قبل المكالمة الأولى إلىcallback وظيفة. تمت إضافة العناصر إلى المصفوفة بعد بداية ملفmap الطريقة لن يتم زيارتها من قبل callback وظيفة. إذا تم تعديل العناصر الموجودة في المصفوفة بواسطةcallback function, their values ​​passed to the function will be the values ​​at the time when the map طريقة زياراتهم. العناصر المحذوفة لن تتم زيارتها.

أمثلة:

Math

مثال بسيط

لديك مصفوفة تحتوي على العديد من العناصر ، كل منها يمثل شخصًا مختلفًا👨. يمكن أن يكون هناك الكثير من البيانات هنا: الاسم والعمر ولون الشعر والشخصية المفضلة من السينما ، ولكن في الوقت الحالي كل هذا غير مطلوب - ما عليك سوى الحصول على مجموعة من أرقام جوازات السفر لهؤلاء الأشخاص لمنحهم جميع تصاريح المؤتمر.

محرر مباشر
النتيجة
Loading...

في بعض الحالات ، قد تحتاج إلى عرض مصفوفة من الكائنات ذات المفاتيح المحددة كسلسلة👇:

محرر مباشر
النتيجة
Loading...

إنشاء مصفوفة قيم فهرنهايت من مصفوفة قيم مئوية:

Thermometer

مثال لمعالجة كل عنصر من عناصر المصفوفة باستخدام صيغة معينة👇:

محرر مباشر
النتيجة
Loading...

عرض مصفوفة من الأرقام باستخدام دالة تأخذ وسيطة👇:

محرر مباشر
النتيجة
Loading...

منقي

filter

الfilter () طريقة تخلق🆕 مصفوفة جديدة تحتوي على جميع العناصر التي اجتازت الاختبار المحدد في الوظيفة التي تم تمريرها.

دائمًا ما تكون نتيجة المرشح مصفوفة. إذا تم إرجاع دالة لعنصر ما🔄 true ✅ (أو أي قيمة "حقيقية") ، يتم تضمين هذا العنصر في النتيجة ، وإلا فلن يتم تضمينه.

بناء الجملة

write

let newArray = arr.filter(function callback(element[, index, [array]])[, thisArg])

وصف

m

الfilter() طريقة استدعاء تمرير callback تعمل مرة واحدة لكل عنصر موجود في المصفوفة وتقوم ببناء مصفوفة جديدة مع جميع القيم التي من أجلها callback عادت الوظيفةtrueأو القيمة التي تصبحtrue ✅ عند الإرسال إلىboolean. الcallback يتم استدعاء الوظيفة فقط لمؤشرات المصفوفة التي تم تعيين قيم لها ؛ لا يتم استدعاؤه للفهارس التي تم إسقاطها أو التي لم يتم تعيين قيم لها مطلقًا. يتم ببساطة تخطي عناصر المصفوفة التي لم يتم التحقق منها بواسطة دالة "رد الاتصال" ولا يتم تضمينها في ملف 🆕 مجموعة جديدة.

الوظيفة⚙️ callback يسمى بثلاث حجج:

  • قيمة العنصر ؛
  • مؤشر العنصر ؛
  • المصفوفة التي يتم المرور من خلالها.

إذا كانthisArg تم تمرير المعلمة إلىfilter() الطريقة ، سيتم استخدامها على أنها this الطريقة ، سيتم استخدامها على أنهاthis ستكون القيمةundefined. في النهاية ، قيمةthis كما يُرى من دالة يتم تحديدها وفقًا للقواعد المعتادة للتعريفthis كما رأينا من وظيفة⚙️.

إن "filter()` الطريقة لا تعدل المصفوفة التي تم استدعاؤها.

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

مثال

math

تصفية جميع القيم الصغيرة

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

محرر مباشر
النتيجة
Loading...

Wow

يقلل

count

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

لا يُقصد بتقليل تعديل عناصر مجموعة مثل الخريطة. مهمتها هي حساب "مجموع" جميع العناصر بطريقة أو بأخرى ، وإعادتها.

يمكن أن تكون القيمة الناتجة أي شيء: رقم ، سلسلة ، كائن ، مصفوفة - كل هذا يتوقف على المشكلة التي يحلها مطور JavaScript.

تأخذ طريقة التخفيض معلمتين:

-وظيفة ، مثلmap, والتي سيتم استدعاؤها بالتسلسل لكل عنصر من عناصر المجموعة ؛ هي القيمة الأولية للمجمع.

تحتوي الوظيفة أيضًا على وسيطتين:

  • الأول هو القيمة المتراكمة (المجمع) ؛
  • عنصر المصفوفة مباشرة.

بناء الجملة

array.reduce(function callback[, initialValue])

وصف

describe

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

في المرة الأولى التي يتم فيها استدعاء الوظيفة ، يمكن أن تأخذ معلمات المُراكم والقيمة الحالية إحدى القيمتين. إذا كانinitialValue يتم تمرير الوسيطة في الاستدعاء لتقليل () ، ثم قيمة accumulator ستكون مساوية لقيمة "initialValue" وقيمة currentValue ستكون مساوية للقيمة الأولى في المصفوفة. إذا لم يتم تحديد قيمة initialValue ، فسيكون المجمع مساويًا للقيمة الأولى في المصفوفة ، وستكون القيمة الحالية مساوية للقيمة الثانية في المصفوفة.

إذا كانت المصفوفة فارغة ولا initialValue حجة محددة ، أTypeError سيتم طرح استثناء. إذا كانت المصفوفة تتكون من عنصر واحد فقط (بغض النظر عن موقعه في المصفوفة) و initialValue لم يتم تحديد الحجة ، أو إذا كانinitialValue تم تحديد الوسيطة ، لكن المصفوفة فارغة ، سيتم إرجاع هذه القيمة دون استدعاء الوظيفة⚙️ callback ...

القيمة الأولية للبطارية

hatchng

دعنا نحسب القيمة الأولية. في المثال يساوي0, لأننا نحسب القيمة العددية - مجموع الأعمار. بدلاً من الصفر ، يمكن أن يكون هناك أي رقم / سلسلة أخرى (فارغة أو لا) / كائن / مصفوفة - مهما كانت القيمة التي تبدأ في التراكم منها. على سبيل المثال ، دعنا نجمع أسماء جميع الأصدقاء في سطر واحد 👇:

محرر مباشر
النتيجة
Loading...

هنا ، كانت القيمة الأولية هي السلسلة " Friends: ", التي أضيفت إليها أسماء جميع الأصدقاء تدريجياً.

إذا لم تحدد القيمة الأصلية بشكل صريح ، فإن الأول 1️⃣ يصبح عنصر المصفوفة ضمنيًا. في هذه الحالة ، لم يعد يتم استدعاء الوظيفة الخاصة بها.

مثال

جمع كل القيم في المصفوفة:

محرر مباشر
النتيجة
Loading...

ونفس الشيء في سطر واحد من التعليمات البرمجية:

محرر مباشر
النتيجة
Loading...

تسلسل

unity

تدعم برمجة JavaScript ملفات chaining نمط - الجمع بين وظائف متعددة في سلسلة واحدة مع الإرسال المتسلسل للنتيجة.

يتم استدعاء جميع التوابع الثلاثة التي تم تحليلها في سياق مصفوفة ، ويعيد اثنان منها 2️⃣ أيضًا مصفوفة. وبالتالي ، من السهل جدًا الجمع بينهما.

على سبيل المثال ، لنحسب العمر الإجمالي لجميع الأولاد 👇:

محرر مباشر
النتيجة
Loading...

أو يمكننا جمع أرقام جوازات سفر الفتيات لشراء تذاكر طيران إلى لاس فيغاس 👇:

محرر مباشر
النتيجة
Loading...

استنتاج

مع هذه الميزات الرائعة⚙️ الكود📟 يصبح أسهل للقراءة. لذلك ، فيما يلي قائمة بالمقالات التي تتناول المزيد من التفاصيل حول هذا الموضوع.

مشاكل؟

Problem

Write to Discord chat.

مشاكل؟

Question

دالة يجب استدعاؤها لكل عنصر من عناصر المصفوفة؟

  1. currentValue
  2. array
  3. callback

طريقة تنشئ مصفوفة جديدة بنتيجة استدعاء الوظيفة المحددة لكل عنصر من عناصر المصفوفة:

  1. map
  2. filter
  3. reduce

يمكن أن تكون القيمة الناتجة لطريقة التخفيض:

  1. رقم
  2. صفيف
  3. أي شيء

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

  1. map
  2. filter
  3. reduce

يتم استخدام المعلمة الاختيارية أو القيمة كملف this عند استدعاء callback وظيفة:

  1. array
  2. index
  3. thisArg

طريقة تنشئ مصفوفة جديدة بكل العناصر التي اجتازت التحقق المحدد في الدالة التي تم تمريرها:

  1. map
  2. filter
  3. reduce

الجمع بين عدة وظائف في سلسلة واحدة مع النقل المتسلسل للنتيجة:

  1. الوحدة
  2. التسلسل
  3. الاندماج

لفهم مقدار ما تعلمته في هذا الدرس ، قم بإجراء الاختبار فيmobile application من مدرستنا في هذا الموضوع.

JS Camp

الروابط

  1. Simplify your JavaScript - use map, reduce and filter
  2. 15 useful javascript examples of map, reduce and filter
  3. Array.prototype.map()
  4. Array.prototype.filter()
  5. Array.prototype.reduce()

المساهمون✨

الشكر يعود إلى هؤلاء الأشخاص الرائعين (emoji key):


AlisaNasibullina

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!