سؤالان على كل تطبيق ميزانية أن يجيب عنهما: “كم أنفقت على الطعام؟” و"ما أكبر مصاريفي؟". الأول يحوّل القائمة إلى رقم واحد لكل فئة. والثاني يضع القائمة في ترتيب مفيد. لدى JavaScript دالة لكل منهما، ولكل منهما فخّ واحد شهير.
\nأنت تعرف نمط المُراكِم: ابدأ بقيمة، وحدّثها مع كل عنصر، واستخدمها في النهاية. وreduce هي هذا النمط على شكل دالة:
const expenses = [\n { label: \"Coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n];\n\nconst total = expenses.reduce((sum, e) => sum + e.amount, 0);\nconsole.log(total);تأخذ reduce وسيطين: callback وقيمة ابتدائية (هنا 0). وتستدعي الـ callback مرة لكل عنصر، مع المُراكِم (accumulator) الحالي (sum) والعنصر (e). وكل ما يُرجعه الـ callback يصبح المُراكِم في الاستدعاء التالي. وبعد العنصر الأخير، يكون المُراكِم النهائي هو النتيجة.
مرّر القيمة الابتدائية دائمًا. فدونها تستخدم reduce العنصر الأول مُراكِمًا ابتدائيًا، وهو هنا كائن مصروف كامل لا رقم، ومع القائمة الفارغة ترمي TypeError: Reduce of empty array with no initial value.
يمكن أن يكون المُراكِم أي شيء، بما في ذلك كائن. وهكذا تبني مجاميع لكل فئة:
\nconst expenses = [\n { label: \"Coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n];\n\nconst byCategory = expenses.reduce((totals, e) => {\n totals[e.category] = (totals[e.category] ?? 0) + e.amount;\n return totals;\n}, {});\n\nconsole.log(byCategory);مع كل مصروف، اقرأ المجموع الجاري لفئته (أو 0 إن كانت هذه أول مرة تظهر فيها الفئة؛ وللعامل ?? شرح خاص في الدرس التالي)، وأضف المبلغ، وخزّنه من جديد بالأقواس المربّعة، لأن اسم الخاصية في متغيّر. ثم أرجع الكائن نفسه كي يستلمه الاستدعاء التالي.
وحين تريد تجميع المصاريف نفسها بدلًا من مجموع لكل مجموعة، فهناك اختصار مدمج منذ عام 2024: Object.groupBy(expenses, (e) => e.category) تُرجع كائنًا خصائصه هي الفئات، وقيمه مصفوفات المصاريف المطابقة. إنها مدعومة في كل المتصفّحات الحالية وفي Node.js، وتُقرأ أفضل من مقابلها المكتوب بـ reduce. أما المجاميع فما زالت تحتاج إلى reduce (أو حلقة تمرّ على المجموعات).
reduce قوية، وهذا سبب لاستخدامها باعتدال. إن كانت map أو filter أو حلقة for...of قصيرة تقول الشيء نفسه بوضوح أكبر، ففضّلها. المجاميع والتجميع هي المواضع التي تُقرأ فيها reduce أفضل ما يكون.
يبدو الترتيب سهلًا، لكنه يحتوي على أشهر فخّ في JavaScript:
\nconst amounts = [450, 1220, 99];\namounts.sort();\nconsole.log(amounts);دون تعليمات، تحوّل sort كل عنصر إلى نص وترتّبها كنصوص، مثل الكلمات في القاموس. وبصفتها نصوصًا، تأتي “1220” قبل “450” لأن الحرف “1” يأتي قبل “4”. هذا جيد للكلمات وخاطئ للأرقام.
والحل دالة مقارنة (comparator): دالة تستلم عنصرين، a وb، وتُرجع رقمًا يقول أيّهما يأتي أولًا.
| ما تُرجعه دالة المقارنة | \nالنتيجة | \n
|---|---|
| رقم سالب | \na تأتي قبل b | \n
| رقم موجب | \nb تأتي قبل a | \n
0 | \nيبقى ترتيبهما الحالي | \n
ومع الأرقام، الطرح يُنتج هذا بالضبط:
\nconst amounts = [450, 1220, 99];\nconsole.log([...amounts].sort((a, b) => a - b)); // ascending\nconsole.log([...amounts].sort((a, b) => b - a)); // descendingحين تكون a تساوي 450 وb تساوي 99، يكون a - b موجبًا، فتنتقل 99 إلى الأمام. واقلبها إلى b - a ليأتي الأكبر أولًا.
النصوص تحتاج إلى مقارنة خاصة بها، لأن < تقارن رموز الحروف وتضع كل حرف كبير قبل كل حرف صغير. أما localeCompare فتقارن كما يفعل قاموس لغة حقيقية:
const labels = [\"lunch\", \"Train\", \"coffee\", \"Éclair\"];\nconsole.log(labels.toSorted((a, b) => a.localeCompare(b)));والكائنات تُرتَّب حسب إحدى خصائصها، بالأنماط نفسها: (a, b) => b.amount - a.amount ليأتي الأغلى أولًا، و(a, b) => a.label.localeCompare(b.label) للترتيب الأبجدي.
تعيد sort ترتيب المصفوفة في مكانها وتُرجع المصفوفة نفسها. فإن كان كود آخر يقرأ القائمة، ربما ليعرض المصاريف بترتيب إضافتها، فقد صارت مرتّبة عنده أيضًا. ولهذا ترتّب الأمثلة أعلاه نسخة، [...amounts]. أما الدالة الأحدث toSorted (جزء من JavaScript منذ عام 2023، ومدعومة في كل المتصفّحات الحالية) فتُرجع نسخة مرتّبة مباشرة، فلا تحتاج إلى تذكّر خطوة النسخ:
const expenses = [\n { label: \"Coffee\", amount: 450 },\n { label: \"Train\", amount: 1220 },\n { label: \"Lunch\", amount: 1350 },\n];\nconst biggestFirst = expenses.toSorted((a, b) => b.amount - a.amount);\nconsole.log(biggestFirst.map((e) => e.label), expenses.map((e) => e.label));في الدرس التالي تتعامل مع بيانات غير موجودة أصلًا: خصائص مفقودة، وقيم فارغة، ومجموعتان، Map وSet، صُمّمتا للبحث السريع ولضمان عدم التكرار.
\n","toc":[{"id":"sec-1","text":"reduce: قيم كثيرة تصبح قيمة واحدة","level":2},{"id":"sec-2","text":"التجميع: reduce إلى كائن","level":3},{"id":"sec-3","text":"sort: وضع الأشياء في ترتيبها","level":2},{"id":"sec-4","text":"sort تغيّر الأصل","level":3}],"takeaways":["reduce تمرّ على القائمة حاملةً مُراكِمًا (accumulator)؛ والـ callback يُرجع المُراكِم التالي، والمُراكِم الأخير هو النتيجة.","مرّر دائمًا قيمة ابتدائية إلى reduce، مثل 0 للمجاميع أو {} للتجميع؛ فدونها ترمي القائمة الفارغة خطأ.","دون دالة مقارنة، تقارن sort العناصر على أنها نصوص، فتُرتَّب [450, 1220, 99] لتصبح [1220, 450, 99].","دالة المقارنة تُرجع رقمًا سالبًا لتضع a أولًا، وموجبًا لتضع b أولًا؛ و(a, b) => a - b ترتّب الأرقام تصاعديًا.","sort تعدّل المصفوفة في مكانها؛ استخدم toSorted (أو رتّب نسخة) حين يجب أن يبقى الأصل كما هو."],"further":[{"title":"Array.prototype.reduce() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"},{"title":"Array.prototype.sort() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"},{"title":"Array.prototype.toSorted() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted"}],"quiz":[{"q":"ماذا تُرجع [450, 1220, 99].sort()؟
[99, 450, 1220]","why":"هذا يحتاج إلى دالة مقارنة رقمية. الترتيب الافتراضي يحوّل كل رقم إلى نص ويقارن النصوص."},{"text":"[1220, 450, 99]","why":"صحيح. بصفتها نصوصًا، تأتي “1220” قبل “450” لأن “1” تأتي قبل “4”، وتأتي “450” قبل “99” لأن “4” تأتي قبل “9”."},{"text":"[1220, 99, 450]","why":"النصوص تُقارن حرفًا حرفًا من اليسار، لذلك تُرتَّب “450” قبل “99”."}],"answer":1},{"q":"أيّ دالة مقارنة ترتّب المصاريف من الأغلى إلى الأرخص؟
","options":[{"text":"(a, b) => a.amount - b.amount","why":"هذه تُرجع رقمًا سالبًا حين تكون a أرخص، فتضع الأرخص أولًا. وهذا ترتيب تصاعدي."},{"text":"(a, b) => a.amount > b.amount","why":"هذه تُرجع قيمة منطقية لا رقمًا. ودوال المقارنة يجب أن تُرجع قيمة سالبة أو صفرًا أو موجبة؛ والقيم المنطقية تعطي نتائج غير موثوقة."},{"text":"(a, b) => b.amount - a.amount","why":"صحيح. حين تكون b أغلى، يكون الناتج موجبًا، فتوضع b قبل a. فتأتي المبالغ الأكبر أولًا."}],"answer":2},{"q":"استُدعيت [].reduce((sum, e) => sum + e.amount) على قائمة فارغة. ماذا يحدث؟
reduce(fn, 0)، يجعلها تُرجع 0 للقائمة الفارغة بدلًا من ذلك."},{"text":"تُرجع 0.","why":"فقط إن مرّرت 0 قيمةً ابتدائية. دونها لا تجد reduce ما تبدأ به المُراكِم."},{"text":"تُرجع undefined.","why":"reduce لا تُرجع undefined بهدوء هنا؛ بل ترمي “Reduce of empty array with no initial value”."}],"answer":0},{"q":"تعرض المصاريف مرتّبةً حسب المبلغ في لوحة، وبترتيب إضافتها في لوحة أخرى. واللوحتان تقرآن المصفوفة نفسها expenses. ما الذي يفسد مع expenses.sort(byAmount)؟
sort تُرجع نسخة مرتّبة.","why":"sort تُرجع المصفوفة نفسها التي رتّبتها. إنها تعيد ترتيب الأصل في مكانه."},{"text":"تصبح لوحة “بترتيب الإضافة” مرتّبةً هي الأخرى، لأن sort عدّلت المصفوفة المشتركة.","why":"صحيح. استخدم expenses.toSorted(byAmount) أو [...expenses].sort(byAmount) لترتيب نسخة."},{"text":"ترمي خطأ، لأن المصفوفة مُصرَّح بها بـ const.","why":"const لا تمنع تغيير محتويات المصفوفة، والترتيب لا يفعل إلا إعادة ترتيب المحتويات."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const expenses = [\n { label: \"coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n { label: \"Museum\", amount: 99, category: \"fun\" },\n];\n\n// Sum of all amounts (0 for an empty list)\nfunction totalCents(expenses) {\n return 0;\n}\n\n// An object like { food: 1800, travel: 1220, fun: 99 }\nfunction totalsByCategory(expenses) {\n return {};\n}\n\n// A NEW array, most expensive first; do not reorder the original\nfunction biggestFirst(expenses) {\n return expenses.sort();\n}\n\n// A NEW array sorted by label, A to Z, ignoring upper/lower case\nfunction alphabetical(expenses) {\n return expenses;\n}\n\nconsole.log(totalCents(expenses), totalsByCategory(expenses));\n"},"solution":{"js":"const expenses = [\n { label: \"coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n { label: \"Museum\", amount: 99, category: \"fun\" },\n];\n\nfunction totalCents(expenses) {\n return expenses.reduce((sum, e) => sum + e.amount, 0);\n}\n\nfunction totalsByCategory(expenses) {\n return expenses.reduce((totals, e) => {\n totals[e.category] = (totals[e.category] ?? 0) + e.amount;\n return totals;\n }, {});\n}\n\nfunction biggestFirst(expenses) {\n return expenses.toSorted((a, b) => b.amount - a.amount);\n}\n\nfunction alphabetical(expenses) {\n return expenses.toSorted((a, b) => a.label.localeCompare(b.label));\n}\n\nconsole.log(totalCents(expenses), totalsByCategory(expenses));\n"},"checks":[{"id":"total","test":"return totalCents(expenses) === 3119 && totalCents([]) === 0;\n"},{"id":"by-category","test":"const t = totalsByCategory(expenses);\nreturn t.food === 1800 && t.travel === 1220 && t.fun === 99 && Object.keys(t).length === 3;\n"},{"id":"biggest","test":"const out = biggestFirst(expenses);\nreturn Array.isArray(out) && out.map((e) => e.amount).join() === '1350,1220,450,99';\n"},{"id":"alpha","test":"const out = alphabetical(expenses);\nreturn Array.isArray(out) && out.map((e) => e.label).join() === 'coffee,Lunch,Museum,Train';\n"},{"id":"no-mutation","test":"const list = [{ label: 'b', amount: 1 }, { label: 'a', amount: 2 }];\nconst a = biggestFirst(list);\nconst b = alphabetical(list);\nreturn list[0].label === 'b' && a !== list && b !== list;\n"}],"title":"المجاميع والترتيب","prompt":"أكمل أربع دوال لشاشة الملخّص في Pocket:
\ntotalCents(expenses) تُرجع مجموع كل قيم amount (و0 للقائمة الفارغة). استخدم reduce.totalsByCategory(expenses) تُرجع كائنًا فيه خاصية لكل فئة تحمل مجموع تلك الفئة، مثل { food: 1800, travel: 1220, fun: 99 }.biggestFirst(expenses) تُرجع مصفوفة جديدة مرتّبة حسب amount، الأكبر أولًا.alphabetical(expenses) تُرجع مصفوفة جديدة مرتّبة حسب label من A إلى Z، وتعامل “coffee” و"Coffee" على أنهما متماثلتان.ولا يجوز لأيّ من دالتي الترتيب أن تعيد ترتيب المصفوفة التي تستلمها.
\n","hints":["reduce((sum, e) => sum + e.amount, 0): الـ 0 في النهاية هي القيمة الابتدائية، وهي ما يجعل القائمة الفارغة تعمل.","للفئات، ابدأ من {} وفي الـ callback اكتب totals[e.category] = (totals[e.category] ?? 0) + e.amount; return totals;.","toSorted تُرجع نسخة مرتّبة. الأكبر أولًا هو (a, b) => b.amount - a.amount؛ وحسب التسمية هو (a, b) => a.label.localeCompare(b.label)."],"explanation":"المجموعان كلاهما نمط المُراكِم مكتوبًا بـ reduce. والقيمة الابتدائية تحدّد شكل النتيجة: 0 لرقم، و{} لكائن مجاميع. وفي callback التجميع، تُنشئ الأقواس المربّعة خاصية كل فئة في أول مرة تظهر فيها، وإرجاع totals يمرّر الكائن نفسه إلى الاستدعاء التالي. أما expenses.sort() في كود البداية ففشلت مرتين: رتّبت الكائنات كنصوص (كل كائن يصبح النص “[object Object]”)، وأعادت ترتيب مصفوفة المُستدعي. وtoSorted مع دالة مقارنة تُصلح الأمرين. وتضع localeCompare “coffee” قبل “Lunch”، بينما كانت < ستضع كل تسمية تبدأ بحرف كبير أولًا.
totalCents تجمع المبالغ وتُرجع 0 للقائمة الفارغة","by-category":"totalsByCategory تحسب مجموع كل فئة","biggest":"biggestFirst ترتّب حسب المبلغ، الأكبر أولًا","alpha":"alphabetical ترتّب حسب التسمية، متجاهلةً حالة الأحرف","no-mutation":"تحتفظ المصفوفة الأصلية بترتيبها"}},"words":652,"readMinutes":4}