خمس طرق مثيرة للاهتمام لاستخدام Array.reduce () (وطريقة مملة واحدة)

مرحبا يا هبر! أقدم لكم ترجمة المقال "خمس طرق مثيرة للاهتمام لاستخدام Array.reduce () (وطريقة مملة واحدة)" للكريس فرديناندي.

من بين جميع الأساليب الحديثة للعمل مع المصفوفات ، كان أصعب ما في الأمر هو Array.reduce ().

للوهلة الأولى ، يبدو أنها طريقة بسيطة ومملة لا تؤدي إلا القليل. ولكن على الرغم من مظهره المتواضع ، فإن Array.reduce () يعد إضافة قوية ومرنة إلى مجموعة أدوات المطور الخاصة بك.

اليوم ، دعونا نلقي نظرة على بعض الأشياء المثيرة للاهتمام التي يمكنك القيام بها مع Array.reduce ().

كيف يعمل Array.reduce ()

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

يمكن أن تكون هذه القيمة رقمًا أو سلسلة أو حتى كائنًا أو صفيفًا جديدًا. هذا هو الجزء الذي حيرني دائمًا - لم أفهم مدى مرونته!

بناء الجملة

يأخذ Array.reduce () وسيطين: أسلوب رد الاتصال ، الذي يتم تنفيذه لتشغيل كل عنصر في الصفيف ، والقيمة الأولية initialValue.

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

var myNewArray = [].reduce(function (accumulator, current) { return accumulator;}, starting); }, starting); 

لنلقي نظرة على بعض الأمثلة.

 var myNewArray = [].reduce(function (accumulator, current) { return accumulator;}, starting); 

1. جمع الأرقام

افترض أن لديك مجموعة من الأرقام التي تريد إضافتها معًا. باستخدام Array.forEach () ، يمكننا القيام بشيء مثل هذا:

 var total = 0; [1, 2, 3].forEach(function (num) { total += num; }); 

هذا مثال كليشيه لاستخدام Array.reduce (). كلمة "مُراكم" مربكة ، لذلك في هذا المثال سوف نسميها "مجموع" لأنها ما هي بطبيعتها.

 var total = [1, 2, 3].reduce(function (sum, current) { return sum + current; }, 0);    0    . 

في رد الاتصال ، نضيف القيمة الحالية إلى المقدار الذي له قيمة أولية بقيمة 0 في الدورة الأولى ، ثم 1 (القيمة الأولية 0 بالإضافة إلى قيمة العنصر 1) ، ثم 3 (القيمة الإجمالية 1 بالإضافة إلى قيمة العنصر 2) وما إلى ذلك.
مثال

2. كبديل للجمع بين أساليب الصفيف Array.map () و Array.filter () في خطوة واحدة

تخيل أن هناك العديد من المعالجات في هوجورتس.

 var wizards = [ { name: 'Harry Potter', house: 'Gryfindor' }, { name: 'Cedric Diggory', house: 'Hufflepuff' }, { name: 'Tonks', house: 'Hufflepuff' }, { name: 'Ronald Weasley', house: 'Gryfindor' }, { name: 'Hermione Granger', house: 'Gryfindor' }]; 

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

 //      var hufflepuff = wizards.filter(function (wizard) { return wizard.house === 'Hufflepuff'; }).map(function (wizard) { return wizard.name; }); 

باستخدام طريقة Array.reduce () ، يمكنك الحصول على نفس الصفيف في مسار واحد ، مما يحسن أداءنا. نقوم بتمرير صفيف فارغ ([]) كقيمة أولية. في كل تمريرة ، نتحقق مما إذا كان wizard.house عبارة عن Hufflepuff. إذا كان الأمر كذلك ، فأرسلها إلى newArr (تراكمنا في هذا المثال). إذا لم يكن كذلك ، لا تفعل شيئًا.

في أي حال ، قم بإرجاع newArr للحصول على المتراكم في التمرير التالي.

 //      var hufflepuff = wizards.reduce(function (newArr, wizard) { if (wizard.house === 'Hufflepuff') { newArr.push(wizard.name); } return newArr; }, []); 

مثال

3.إنشاء العلامات من مجموعة

ماذا لو ، بدلاً من إنشاء مجموعة من الأسماء ، نريد إنشاء قائمة غير مرتبة من أساتذة Hufflepuff؟ بدلاً من صفيف فارغ في Array.reduce () كقيمة مبدئية لدينا ، مرر سلسلة فارغة ('') واطلق عليها html.

إذا كان wizard.house مساوياً لـ Hufflepuff ، فإننا نجمع بين سلسلة html و wizard.name ملفوفة في عناصر قائمة الفتح والإغلاق (li). ثم قم بإرجاع HTML كمراكم في الحلقة التالية.

 //      var hufflepuffList = wizards.reduce(function (html, wizard) { if (wizard.house === 'Hufflepuff') { html += '<li>' + wizard.name + '</li>'; } return html; }, ''); 

إضافة فتح وإغلاق عنصر القائمة غير مرتبة قبل وبعد Array.reduce (). أنت الآن جاهز لإضافة العلامات إلى DOM.

 //      var hufflepuffList = '<ul>' + wizards.reduce(function (html, wizard) { if (wizard.house === 'Hufflepuff') { html += '<li>' + wizard.name + '</li>'; } return html; }, '') + '</ul>'; 

مثال

4. تجميع عناصر مماثلة في مجموعة

تحتوي مكتبة lodash على طريقة groupBy () تأخذ مجموعة من العناصر كصفيف وتقوم بتجميعها في كائن بناءً على بعض المعايير.

دعنا نقول أننا بحاجة إلى مجموعة من الأرقام.

إذا كنا نريد تجميع جميع العناصر في أرقام حسب قيمة عددهم الصحيح ، فيجب القيام بذلك باستخدام lodash.

 var numbers = [6.1, 4.2, 6.3]; // returns {'4': [4.2], '6': [6.1, 6.3]} _.groupBy(numbers, Math.floor); 

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

 var words = ['one', 'two', 'three']; // returns {'3': ['one', 'two'], '5': ['three']} _.groupBy(words, 'length'); 

إنشاء دالة groupBy () باستخدام Array.reduce ()

يمكنك إعادة إنشاء نفس الوظيفة باستخدام أسلوب Array.reduce ().

نقوم بإنشاء groupBy () وظيفة مساعدة ، والتي تأخذ مجموعة ومعايير الفرز كوسائط. داخل groupBy () ، سنقوم بتشغيل Array.reduce () للصفيف الخاص بنا ، لتمرير كائن فارغ ({}) كنقطة بداية وإرجاع النتيجة.

 var groupBy = function (arr, criteria) { return arr.reduce(function (obj, item) { // Some code will go here... }, {}); }; 

داخل Array.reduce () ، ندعو وظيفة رد الاتصال للتحقق مما إذا كان المعيار هو وظيفة مطبقة على عنصر أو خاصية عنصر. ثم نحصل على قيمتها من العنصر الحالي.

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

 var groupBy = function (arr, criteria) { return arr.reduce(function (obj, item) { //   ,        //  var key = typeof criteria === 'function' ? criteria(item) : item[criteria]; //    ,  . if (!obj.hasOwnProperty(key)) { obj[key] = []; } //     obj[key].push(item); //      return obj; }, {});}; 

عرض توضيحي لوظيفة المساعد المكتملة.

شكر خاص لتوم بريمر لمساعدته. يمكن العثور على وظيفة المساعد وأكثر من ذلك بكثير في Vanilla JS Toolkit .

5. الجمع بين البيانات من مصدرين في مجموعة

أذكر قائمتنا من المعالجات.

 var wizards = [ { name: 'Harry Potter', house: 'Gryfindor' }, { name: 'Cedric Diggory', house: 'Hufflepuff' }, { name: 'Tonks', house: 'Hufflepuff' }, { name: 'Ronald Weasley', house: 'Gryfindor' }, { name: 'Hermione Granger', house: 'Gryfindor' }]; 

ماذا لو كان هناك مجموعة بيانات مختلفة - كائن مع منزل ونقاط حصل عليها كل ساحر.

 var points = { HarryPotter: 500, CedricDiggory: 750, RonaldWeasley: 100, HermioneGranger: 1270 }; 

تخيل أننا نريد دمج مجموعتي البيانات في صفيف واحد مع عدد النقاط المضافة إلى بيانات كل معالج في صفيف المعالجات. كيف نفعل ذلك؟

طريقة Array.reduce () مثالية لهذا!

 var wizardsWithPoints = wizards.reduce(function (arr, wizard) { //     points,     // var key = wizard.name.replace(' ', ' '); //     ,  , //   0. if (points[key]) { wizard.points = points[key]; } else { wizard.points = 0; } //   wizard   . arr.push(wizard); //  . return arr; }, []); 

مثال على دمج البيانات من مصدرين في صفيف .

6. الجمع بين البيانات من مصدرين في كائن

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

 var wizardsAsAnObject = wizards.reduce(function (obj, wizard) { //      points,     // var key = wizard.name.replace(' ', ' '); //     ,  , //   0. if (points[key]) { wizard.points = points[key]; } else { wizard.points = 0; } //   name delete wizard.name; //   wizard    obj[key] = wizard; //   return obj; }, {}); 

مثال على دمج البيانات من مصدرين في كائن .

هل يجب علي استخدام Array.reduce ()؟

لقد تطورت طريقة Array.reduce () من أسلوب جافا سكريبت المفضل. لذلك هل يستحق استخدامه؟ ومتى؟

يحتوي الأسلوب Array.reduce () على دعم مستعرض رائع. يعمل في جميع المتصفحات الحديثة وفي IE9. منذ فترة طويلة مدعومة من قبل متصفحات المحمول. إذا كنت بحاجة إلى المزيد ، فيمكنك إضافة polyfill لإرجاع الدعم في IE6.

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

كما ذكرنا من قبل ، فإن طريقة Array.reduce () ، بشكل عام ، تبسط الأشياء الأكثر تعقيدًا. مثال جيد هو مجموعة المساعدة groupBy ().

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

عن المؤلف

كريس فرديناندي يساعد الناس على تعلم جافا سكريبت الفانيليا. إنه يعتقد أن هناك طريقة أبسط وأكثر موثوقية للقيام بالأشياء على الإنترنت.

كريس هو مؤلف سلسلة دليل Vanilla JS Pocket ، وهو مؤلف منهج أكاديمية Vanilla JS ، ومقدم برنامج Vanilla JS Podcast . تتم قراءة الرسالة الإخبارية الاستشارية للمطور من قبل الآلاف من المطورين كل يوم من أيام الأسبوع.

قام بتدريب المطورين في مؤسسات مثل Chobani و Boston Globe ، واستخدمت مكوناته الإضافية لجافا سكريبت من قِبل Apple و Harvard Business School. وصف كريس كوير ، مؤسس CSS-Tricks و CodePen ، أعماله بأنها "نقلت إلى ما لا نهاية".

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