عندما اكتشفت كيفية استخدام أساليب صفيف JS
.map() و
.filter() و
.reduce() ، فإن كل ما قرأته ونظرت إليه واستمعت إليه بدا معقدًا للغاية. واعتبرت هذه المفاهيم بعض الآليات المستقلة التي لا علاقة لها بأي شيء آخر. كان من الصعب علي فهم جوهرها وفهمها.
سمعت أن هذه أشياء أساسية ، فهمها يشبه الحد الفاصل بين "البادئين" و "غير المستهلين". أود بعد ذلك أن يتم إخباري عن الحقيقة. يتكون في حقيقة أن هذه الطرق الثلاثة ترمز إلى حقيقة أن أسباب فرز بعض الأشياء القابلة للتكرار غالباً ما تتناسب مع واحدة من ثلاث فئات وظيفية.
من خلال الاطلاع على الكود الذي كتبته سابقًا ، أدركت أنه في 95٪ من الحالات عندما تكررت على عناصر السلاسل أو المصفوفات ، قمت بأحد الإجراءات التالية:
- تطبيق سلسلة معينة من التعليمات على كل قيمة (مماثلة لأسلوب
.map() ). - تصفية القيم التي تتطابق مع معيار معين (مثل
.filter() لا). - اختزال مجموعة بيانات إلى قيمة مجمعة واحدة (التناظرية
.reduce() ).
كانت لحظة الحقيقة. عندها فهمت جوهر هذه الأساليب ورأيت علاقتها بما عرفته منذ زمن طويل.
من أجل الممارسة ، أخذت الرمز القديم وقمت بإعادة تشكيله باستخدام هذه الأساليب. هذا تبين أن تكون مفيدة جدا.
والآن ، دون مزيد من اللغط ، دعونا نتحدث عن هذه الأساليب ، وعلى وجه الخصوص ، ننظر في كيفية استخدامها بدلاً من المخططات واسعة النطاق لاستخدام الحلقات.
.Map () الطريقة
يتم استخدام الأسلوب
.map() إذا كنت بحاجة إلى القيام بما يلي:
- من الضروري تنفيذ تسلسل معيّن من الإجراءات على كل عنصر من عناصر الكائن القابل للتكرار.
- من الضروري إرجاع القيمة ، التي من المفترض أنها قد تغيرت.
ضع في اعتبارك مثالًا بسيطًا لكل عنصر من عناصر مجموعة تحتوي على أسعار ، تحتاج إلى البحث عن مبالغ جديدة تشمل الأسعار الأصلية وضريبة المبيعات:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i=0; i < prices.length; i++) { new_prices.push(prices[i] * 1.06); }
إليك كيفية القيام بالشيء نفسه باستخدام
.map() :
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map(price => price * 1.06);
ويستخدم الإنشاءات النحوية موجزة جدا. لذلك دعونا ننظر إلى هذا المثال. يقبل الأسلوب
.map() رد اتصال. هذه هي الوظيفة التي سيتم تطبيقها على عناصر الصفيف. في هذه الحالة ، هي دالة سهم ، يتم التصريح عنها مباشرة بين قوسين بعد إعلان الطريقة.
اسم معلمة
price هو الاسم الذي سيتم استخدامه عند العمل مع عناصر الصفيف. نظرًا لأن وظيفة السهم تحتوي على معلمة واحدة فقط ، فيمكننا الاستغناء عن الأقواس عند الإعلان عنها.
التعبير بعد السهم (
=> ) هو نص رد الاتصال. نظرًا لوجود تعبير واحد فقط في النص الأساسي للوظيفة ، يمكننا الاستغناء عن الأقواس المتعرجة وبدون الكلمة الرئيسية المرتجعة.
إذا وجدت هذا الإدخال غير مفهوم ، فإليك نسخة موسعة قليلاً من هذا المثال:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map((price) => { return price * 1.06 });
طريقة تصفية ()
يتم استخدام طريقة
.filter() في الحالات التي تحتاج فيها بعض العناصر إلى التحديد من الكائن القابل للتكرار. عند استخدام هذه الطريقة ، يجب أن تتذكر أن القيم المطابقة للمرشح مدرجة في النتيجة النهائية ، ولا تُستبعد منها. هذا هو - كل شيء من أجله الدالة مرت
.filter() سيعود
true ، سيتم ترك.
ضع في اعتبارك مثالًا يجب فيه تحديد العناصر الفردية فقط من مجموعة من الأعداد الصحيحة. نحن هنا نستخدم المشغل لأخذ ما تبقى من القسمة ومعرفة ما إذا كان هناك ما تبقى من قسمة كل عنصر من عناصر المصفوفة على 2. إذا كان الباقي 1 ، فهذا يخبرنا أن الرقم المقابل غريب. أولاً ، دعنا ننظر إلى طريقة لحل هذه المشكلة باستخدام حلقة عادية:
const numbers = [1,2,3,4,5,6,7,8]; let odds = []; for(let i=0; i < numbers.length; i++) { if(numbers[i] % 2 == 1) { odds.push(numbers[i]); } }
.filter() الأسلوب
.filter() ، مثل
.map() ، رد اتصال واحد ، والذي سيتم تمرير عناصر الكائن المكرر بدوره:
const numbers = [1,2,3,4,5,6,7,8]; let odds = numbers.filter(num => num % 2);
هنا يتم تنظيم العمل بنفس الطريقة كما في المثال مع
.map() . تستخدم دالة السهم التي تم تمريرها إلى
.filter() معلمة واحدة فقط ، لذلك نحن نفعل دون أقواس. يحتوي جسدها على تعبير واحد فقط ، لذلك يمكن حذفه من الأقواس المعقوفة ومن المقبول القيام به دون
return .
.خفض () الطريقة
والآن وصلنا أخيرًا إلى طريقة.
.reduce() . هو ، في اعتقادي ، هو أكثر الطرق غير المفهومة التي يتم النظر فيها اليوم. يشير اسم هذه الطريقة إلى أنه يستخدم لتقليل العديد من القيم إلى واحدة. ومع ذلك ، يبدو لي أنه من الأسهل التفكير في الأمر كطريقة تسمح لك بجمع قيم معينة من أجزاء ، وليس كطريقة تتيح لك "الانهيار" أو "تقليل" شيء ما.
عند إنشاء الكود الذي تسمى هذه الطريقة ، يتم تعيين قيمة أولية معينة. أثناء تكرار الطريقة على قيم المصفوفة ، يتم تعديل هذه القيمة الأولية ، وفي نموذج معدل ، يتم تمريرها إلى التكرار التالي.
هذه مشكلة كلاسيكية ، لحلها تحتاج إلى حساب مجموع عناصر المصفوفة. في حالتنا ، يتمثل في إيجاد مبلغ التبرعات لمشروع خيري معين:
const donations = [5, 20, 100, 80, 75]; let total = 0; for(let i=0; i < donations.length; i++) { total += donations[i]; }
بخلاف أساليب
.map() و
.filter() ، يحتاج الأسلوب
.reduce() إلى رد اتصال يأخذ معلمتين. هذه هي البطارية والقيمة الحالية. البطارية هي المعلمة الأولى. هو الذي يتم تعديله في كل تكرار وينتقل إلى ما يلي:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; });
.reduce() أيضًا تمرير وسيطة ثانية إلى
.reduce() . هذا هو ما سوف يلعب دور القيمة الأولية للبطارية. لنفترض أننا نريد أن نعرف المبلغ الإجمالي للتبرعات في يومين ، بالنظر إلى أن هذا المبلغ كان بالأمس 450 دولارًا ، ويتم تخزين المعلومات حول التبرعات اليوم في صفيف:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; }, 450);
النتائج
نأمل الآن أن تكون قد اكتشفت أساليب صفيف
.filter() .map() و
.filter() و.
.reduce() . فكر فيها كآليات تعمل على تحسين إمكانية قراءة التعليمات البرمجية الخاصة بك. إنها تتيح لك كتابة برامج مضغوطة أكثر من تلك التي يتم الحصول عليها باستخدام الحلقات التقليدية. لكن قوتهم الأساسية هي أنها تسمح لك بالتعبير بوضوح عن النية التي تقوم عليها الكود.
بفضل هذه الطرق ، سيكون من السهل قراءة التعليمات البرمجية التي تمت كتابتها لبعض الوقت. بدلاً من الخوض في الإنشاءات الموضوعة داخل الحلقات ، والقيام بذلك لمجرد فهم هدفهم النهائي ، يمكنك فقط تكوين فكرة عامة عن أسباب وجود جزء معين من التعليمات البرمجية من خلال رؤية اسم إحدى هذه الطرق.
أعزائي القراء! هل تستخدم أساليب .Map () و .filter () و .reduce () JS؟
