كوني مطورًا ، أحب أن أشير إلى الشفرة خاصة في JavaScript. وفقًا لتجربتي ، يعد استخدام وظيفة الاختزال أحد أصعب المهام في JS. اسمحوا لي أولا أن أشرح مفهوم الحد!
في ويكيبيديا ، لديها العديد من الأسماء بمعنى.
الحد
طية
تجميع
مجموع
ضغط
إنها وظيفة تطوي قائمة في أي نوع بيانات. الأمر كله يتعلق بتقسيم الهيكل إلى قيمة واحدة. انها مثل للطي مربع! مع التقليل ، يمكنك تحويل صفيف [1،2،3،4،5] إلى الرقم 15 عن طريق إضافتها كلها.
كيف تم ذلك في الماضي؟لنفترض أنك قد تحتاج إلى حلقة لطي قائمة إلى رقم ، يمكنك القيام بما يلي:
const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; let total = 0; for (let i = 0; i < numbers.length; i++) { total = add(total, numbers[i]); } console.log(total);
ومع ذلك ، باستخدام وظيفة الاختزال ، فأنت تحتاج فقط إلى حلقة للتعامل مع "وظيفة الإضافة". الرمز سيكون مثل:
const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; numbers.reduce(add);
انظر ، هذه هي الطريقة التي جعلت من السهل الترميز!
في الوقت الحالي ، انتبه إلى جافا سكريبت التي لا يمكنها استخدام الحلقات أو التكرار أو أساليب الصفيف مثل forEach أو بعضها أو البحث أو ما إلى ذلك. لذلك ، ثلاثة فقط اليسار هي الخريطة ، وتصفية والحد. ومع ذلك ، فإن عملنا كمبرمجين لم يتغير. ما زلنا بحاجة إلى ثلاثة أنواع من الوظائف في تطبيقاتنا.
-> تصفية القوائم
-> تحويل القوائم
-> تحويل القوائم إلى أنواع البيانات بمعنى. سلسلة ، منطقية ، عدد ، كائن
يمكن التعامل بسهولة مع التحدي أعلاه من خلال تصفية الأدوات ورسم الخرائط والحد منها.
Array.filter قوائم القضاةماذا يحدث إذا كنت تريد إزالة قائمة جديدة مع بعض العناصر ، مثل عندما يبحث المستخدم في قائمة جهات الاتصال الخاصة بك؟ وبالتالي ، ببساطة إنشاء وظيفة تقوم بإرجاع صواب أو خطأ على أساس مدخلاتها (مسند).
const isEven = (x) => x % 2 === 0;
الآن ، قم بتوصيله بفلتر لتطبيق ذلك على قائمة كاملة.
const numbers = [1, 2, 3, 4, 5]; numbers.filter(isEven);
Array.map يحول القوائمتحويل القوائم إلى قوائم أخرى هو تطوير الواجهة الأمامية باختصار. لذلك ، تغطي الخريطة الكثير من أعمال قائمتك.
لنفترض أن تطبيقنا يستدعي واجهة برمجة التطبيقات (API) لقائمة المستخدمين ، ونحن بحاجة إلى إظهار اسم كل مستخدم على الشاشة. ببساطة إنشاء وظيفة تقوم بإرجاع اسم المستخدم.
const getUserName = (user) => user.name;
الآن ، قم بتوصيله بالخريطة لتشغيلها مقابل قائمة كاملة من المستخدمين.
users.map(getUserName)
Array.reduce يمكن أن تفعل ذلك لكيستخدم Array.reduce معلمتين
1) قيمة أولية (وهو اختياري)
إذا لم تقم بتوفير القيمة الأولية ، فقم بتخفيض الإعدادات الافتراضية للعنصر في القائمة الأولى.
لتلخيص الأرقام البسيطة ، ستكتب:
[1, 2, 3].reduce((total, current) => total + current);/source> In case, you give an initial value of zero, you will use this code: <source lang="markdown"> [{ age: 1 }, { age: 2 }, { age: 3 }] .reduce((total, obj) => total + obj.age, 0);
2) المخفض
عندما تقلل الحلقات من القائمة ، فإنها تغذي المعلمتين أدناه إلى المخفض:
-> القيمة الحالية: القيمة الحالية لا تحتاج إلى شرح ، تمامًا مثل استخدام المصفوفة [i] في حلقة عادية. ومع ذلك ، فإن التراكم هو مصطلح كمبيوتر يبدو مخيفًا وهو بسيط بالفعل.
-> Accumulator: عندما تتصفح المستخدمين ، كيف يمكنك تتبع العمر الإجمالي؟ تحتاج بعض المتغير العداد للحفاظ عليه. هذا هو المجمع. هذه هي القيمة النهائية التي سيتم تخفيضها عند الانتهاء.
في كل خطوة من خطوات الدورة ، تغذي مركم الماضي والعنصر الحالي إلى المخفض. ما يعود المخفض يصبح تراكم المقبل. تنتهي الدورة عندما تنتهي القائمة ولديها قيمة مخفضة واحدة.
إذا كنت تشعر أن وظائف الخريطة والتصفية لا تكفي ، فيمكنك تشغيل اللعبة بتقليل. يمكن أن تفعل كل ما تقوم به الخريطة والمرشح وجميع الأشياء الأخرى التي تنطوي على حلقة فوق صفيف.
لنأخذ مثالاً لحساب عمر المستخدمين. ضع في اعتبارك أن أعمار المستخدمين 29.30 و 31 و 32.
const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ];
من ناحية أخرى ، يمكن للخريطة والمرشح فقط إرجاع المصفوفات ، لكننا بحاجة إلى رقم!
users.map(?); users.filter(?);
إذا كانت لدينا حلقات ، فسنذهب إلى المستخدمين ونحصِّل أعمارهم في عداد! ومع ذلك ، يمكن أن يكون أسهل لتقليل الوظيفة.
users.reduce((total, currentUser) => total + currentUser.age, 0);
الآن ، يمكن أن يكون استخدام console.log في كل خطوة أسهل طريقة للتعامل مع أعلاه.
const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ]; const reducer = (total, currentUser) => { console.log('current total:', total); console.log('currentUser:', currentUser); // just for spacing console.log('\n'); return total + currentUser.age; } users.reduce(reducer, 0);
تلخيص الكود كله في 6 خطوات هنا:
-> أولا ، تحديد تقليل وظيفة والمعلمات 3 لها.
-> عن طريق توفير القيمة الأولية ، تهيئة المجمع. سوف يتغير كل حلقة.
-> الآن ، ابدأ تنفيذ الحلقات فوق الصفيف المحدد.
-> القبض على currentItem من مجموعة لتلك الدورة.
-> لقد حان الوقت للاتصال المخفض مع تراكم و currentItem وحفظه كمراكم جديد
-> أخيرًا ، يتم تغيير المجمع عند انتهاء الحلقة وإعادتها.