الدليل الشامل لطرق مصفوفة JavaScript - تقليل

reduce()تقلل هذه الطريقة مجموعة من القيم إلى قيمة واحدة فقط. يمكن أن تكون القيمة الفردية التي يتم إرجاعها من أي نوع.

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

بناء الجملة

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);

• newValue - الرقم الجديد أو المصفوفة أو السلسلة أو العنصر الذي تم إرجاعه
• arr - المصفوفة الجاري تشغيلها
• accumulator - القيمة المرجعة للتكرار السابق
• currentValue - العنصر الحالي في المصفوفة
• index - فهرس العنصر الحالي
• array- المصفوفة الأصلية التي reduce()تم استدعاءها
• initialValue - رقم أو مصفوفة أو سلسلة أو كائن يعمل كقيمة أولية للإخراج النهائي

أمثلة

ES5

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

ES6

const numbers = [1, 2, 3]; const sum = numbers.reduce((total, current) => { return total + current; }, 0); const sumOneLiner = numbers.reduce((total, current) => total + current, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6 console.log(sumOneLiner); // 6

كل شيء عن initialValue

initialValue قدمت

و initialValueالحجة هي اختيارية. إذا تم توفيرها ، فسيتم استخدامها كقيمة تراكمية أولية ( total) في الاستدعاء الأول لوظيفة رد الاتصال:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }, 1); console.log(product); // 24

نظرًا لأن initialValue1 يتم توفيره بعد وظيفة رد النداء ، reduce()يبدأ في بداية المصفوفة ويعين العنصر الأول (2) كقيمة حالية ( current). ثم يتكرر خلال بقية المصفوفة ، محدثًا قيمة المجمع والقيمة الحالية على طول الطريق.

initialValue محذوف

إذا initialValueلم يتم توفيره ، فسيبدأ التكرار عند العنصر الثاني في المصفوفة (في الفهرس 1) ، مع accumulatorمساوٍ للعنصر الأول في المصفوفة currentValueويساوي العنصر الثاني:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }); console.log(product);

في هذا المثال ، لا initialValueيتم توفير no ، لذلك يتم reduce()تعيين العنصر الأول من المصفوفة كقيمة تراكمية ( totalتساوي 2) ، وتعيين العنصر الثاني من المصفوفة كقيمة حالية ( currentValueتساوي 3). ثم يتكرر خلال بقية المصفوفة.

عند تصغير مجموعة من السلاسل:

const strings = ['one', 'two', 'three']; const numberString = strings.reduce((acc, curr) => { return acc + ', ' + curr; }); console.log(numberString); // "one, two, three"

في حين أنه من السهل حذف المعامل initialValueإذا كان التابع الخاص بك reduce()سيعيد عددًا أو سلسلة بسيطة ، يجب عليك تضمين واحد إذا كان سيعيد مصفوفة أو كائن.

إرجاع كائن

يعد تحويل مجموعة من السلاسل إلى كائن واحد يوضح عدد المرات التي تظهر فيها كل سلسلة في المصفوفة أمرًا بسيطًا. ما عليك سوى تمرير كائن فارغ ( {}) على النحو التالي initialValue:

const pets = ["dog", "chicken", "cat", "dog", "chicken", "chicken", "rabbit"]; const petCounts = pets.reduce(function(obj, pet) { if (!obj[pet]) { // if the pet doesn't yet exist as a property of the accumulator object, // add it as a property and set its count to 1 obj[pet] = 1; } else { // pet exists, so increment its count obj[pet]++; } return obj; // return the modified object to be used as accumulator in the next iteration }, {}); // initialize the accumulator as an empty object console.log(petCounts); /* { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

العودة والصفيف

بشكل عام ، إذا كنت تخطط لإرجاع مصفوفة ، map()فغالبًا ما يكون الخيار الأفضل. يخبر المترجم (والآخرين الذين يقرؤون الكود الخاص بك) أن كل عنصر في المصفوفة الأصلية سيتم تحويله وإعادته كمصفوفة جديدة متساوية الطول.

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

لنفترض أن لديك قائمة تسوق كمجموعة من السلاسل ، لكنك تريد إزالة جميع الأطعمة التي لا تحبها من القائمة. يمكنك استخدامه filter()لتصفية كل ما لا يعجبك map()وإرجاع مجموعة جديدة من السلاسل ، أو يمكنك فقط استخدام reduce():

const shoppingList = ['apples', 'mangoes', 'onions', 'cereal', 'carrots', 'eggplants']; const foodsIDontLike = ['onions', 'eggplants']; const newShoppingList = shoppingList.reduce((arr, curr) => { if (!foodsIDontLike.includes(curr)) { arr.push(curr); } return arr; }, []); console.log(newShoppingList); // ["apples", "mangoes", "cereal", "carrots"]

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