في تطوير الويب الحديث، تعد معالجة البيانات أمرًا ضروريًا لضمان تطبيقات سلسة وسريعة الاستجابة. سواء كنت تقوم بتصفية المنتجات، أو البحث عن عناصر محددة، أو تحويل البيانات للعرض، فإن المعالجة الفعالة للبيانات تضمن تشغيل تطبيقك بسلاسة ويوفر تجربة مستخدم رائعة.

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

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

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

نظرة عامة على المقال

• فهم طريقة التخفيض

• جافا سكريبت تقلل بناء الجملة

• تصغير مثال جافا سكريبت

• حالات الاستخدام المختلفة لطريقة التخفيض

• استبدال خريطة JavaScript والتصفية والبحث باستخدام تقليل

• خاتمة

فهم طريقة التخفيض

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

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

جافا سكريبت تقليل بناء الجملة

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

حدود:

: الوظيفة المطلوب تنفيذها على كل عنصر، والتي تأخذ الوسائط التالية:

التراكم: القيمة المتراكمة التي تم إرجاعها مسبقًا في الاستدعاء الأخير لاستدعاء رد الاتصال، أو القيمة الأولية، إذا تم توفيرها.

القيمة الحالية: العنصر الحالي الذي تتم معالجته في المصفوفة.

الفهرس (اختياري): فهرس العنصر الحالي الذي تتم معالجته في المصفوفة.

صفيف (اختياري): تم استدعاء تقليل المصفوفة.

القيمة الأولية: قيمة لاستخدامها كوسيطة أولى للاستدعاء الأول لرد الاتصال. إذا لم يتم توفير القيمة الأولية، فسيتم استخدام العنصر الأول (المصفوفة [0]) في المصفوفة كقيمة تراكم أولية، ولن يتم تنفيذ رد الاتصال على العنصر الأول.

جافا سكريبت تقليل المثال

إليك مثال أساسي عن كيفية استخدام طريقة تقليل جافا سكريبت

باستخدام JavaScript اختزل إلى Sum

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

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

• (0 1) -> 1

• (1 2) -> 3

• (3 3) -> 6

• (6 4) -> 10

حالات الاستخدام المختلفة لطريقة التخفيض

تعتبر طريقة التخفيض متعددة الاستخدامات ويمكن تطبيقها على مجموعة واسعة من السيناريوهات. فيما يلي بعض حالات الاستخدام الشائعة مع التوضيحات ومقتطفات التعليمات البرمجية.

تقليل مجموعة من الكائنات

لنفترض أن لديك مجموعة من الكائنات وتريد تلخيص خاصية معينة.

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];


const totalPrice = products.reduce((acc, curr) => acc   curr.price, 0);
console.log(totalPrice); // Output: 2250

في هذا المثال، قم بتقليل التكرارات على كل كائن منتج، وإضافة خاصية السعر إلى المجمع (acc)، والذي يبدأ عند 0.

تقليل صفيف إلى كائن

يمكنك استخدام التصغير لتحويل المصفوفة إلى كائن. يمكن أن يكون هذا مفيدًا عندما تريد تجميع مصفوفة باستخدام خاصيتها

const items = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' },
  { name: 'Banana', category: 'Fruit' }
];

const groupedItems = items.reduce((acc, curr) => {
  if (!acc[curr.category]) {
    acc[curr.category] = [];
  }
  acc[curr.category].push(curr.name);
  return acc;
}, {});

console.log(groupedItems);
// Output: { Fruit: ['Apple', 'Banana'], Vegetable: ['Carrot'] }

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

تسطيح مصفوفة من المصفوفات

يمكن لطريقة التخفيض أن تقوم بتسوية مصفوفة من المصفوفات في مصفوفة واحدة كما هو موضح أدناه

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flatArray = nestedArrays.reduce((acc, curr) => acc.concat(curr), []);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

هنا، نقوم بتقليل تسلسل كل مصفوفة متداخلة (curr) إلى المجمع (acc)، والذي يبدأ كمصفوفة فارغة.

إزالة التكرارات من صفيف

يمكن أيضًا استخدام طريقة التخفيض لإزالة التكرارات من المصفوفة

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

استبدال خريطة JavaScript وتصفيتها والعثور عليها باستخدام تقليل

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

استخدام تقليل لاستبدال الخريطة

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

const numbers = [1, 2, 3, 4];

const doubled = numbers.reduce((acc, curr) => {
  acc.push(curr * 2);
  return acc;
}, []);

console.log(doubled); // Output: [2, 4, 6, 8]

في هذا المثال، قم بتقليل التكرارات على كل رقم، ومضاعفته، ودفع النتيجة إلى المصفوفة المجمعة (acc).

استخدام تقليل لاستبدال الفلتر

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

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(evens); // Output: [2, 4, 6]

هنا، قم بتقليل عمليات التحقق إذا كان الرقم الحالي (curr) زوجيًا. إذا كان الأمر كذلك، فسيتم إضافة الرقم إلى مصفوفة المجمع (acc).

استخدام تقليل لاستبدال البحث

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

const numbers = [1, 3, 5, 6, 7, 8];

const firstEven = numbers.reduce((acc, curr) => {
  if (acc !== undefined) return acc;
  return curr % 2 === 0 ? curr : undefined;
}, undefined);

console.log(firstEven); // Output: 6

خاتمة

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