مصاريف Pocket قائمة، ومعظم ميزاته أسئلة حول هذه القائمة. أيّها مبالغ مستردّة؟ كيف تبدو منسّقة بالدولار؟ هل يوجد ما يتجاوز 100 دولار؟ يمكنك الإجابة عن كل هذا بحلقات القسم 2، لكن المصفوفات تأتي مع دوال (methods) تجيب عن كل سؤال منها بسطر واحد مقروء.
\nالمصفوفة قائمة مرتّبة من القيم. وقد رأيت أساسياتها: أقواس مربّعة، ومواضع تبدأ من 0، وlength.
const amounts = [450, 1220, 270];\n\namounts.push(899); // add to the end\nconsole.log(amounts);\nconst last = amounts.pop(); // remove from the end, and get it back\nconsole.log(last, amounts);\namounts[0] = 500; // replace an item by index\nconsole.log(amounts, amounts.includes(1220), amounts.indexOf(270));لحظة: amounts مُصرَّح بها بـ const، ومع ذلك تغيّرت ثلاث مرات. ليس في هذا تناقض. const تعني أن الاسم يشير دائمًا إلى المصفوفة نفسها، ولا تقول شيئًا عمّا بداخلها. push وpop والإسناد بالفهرس كلها تغيّر محتويات تلك المصفوفة الواحدة، لذلك هي مسموحة. وحدها amounts = [...]، أي توجيه الاسم إلى مصفوفة مختلفة، هي التي ترمي خطأ.
هذه الفكرة، أن الاسم يشير إلى قائمة وأن عدّة عمليات تغيّر القائمة نفسها، هي سبب ضرورة معرفة أيّ الدوال تعدّل في المكان (mutate):
\n| تغيّر المصفوفة نفسها | \nتُرجع شيئًا جديدًا وتترك المصفوفة كما هي | \n
|---|---|
push، pop، shift، unshift | \nslice، concat | \n
splice | \nmap، filter | \n
sort، reverse | \ntoSorted، toReversed | \n
التعديل في المكان ليس خطأً، لكنه يفاجئ الناس حين يتشارك جزءان من البرنامج مصفوفة واحدة. والدوال في باقي هذا الدرس لا تعدّل في المكان أبدًا، وهذا جزء كبير من سبب شعبيتها.
\nوالثنائي الذي يُربك الجميع هو slice وsplice، يفصل بينهما حرف واحد وسلوكهما متعاكس:
const amounts = [450, 1220, 270, 899];\n\nconst firstTwo = amounts.slice(0, 2); // copy of indexes 0 and 1\nconsole.log(firstTwo, amounts); // original untouched\n\nconst removed = amounts.splice(1, 1); // remove 1 item at index 1\nconsole.log(removed, amounts); // original changedslice(start, end) تعمل تمامًا مثل دالة النصوص التي تحمل الاسم نفسه: تنسخ جزءًا وتترك الأصل دون مساس. أما splice(start, count) فتقصّ عناصر من المصفوفة نفسها وتُرجع ما أزالته. وإن احتجت يومًا إلى إزالة عنصر دون تغيير الأصل، فاستخدم filter بدلًا منها، وستتعرّف عليها حالًا.
تستدعي map دالة لكل عنصر، وتجمع القيم المُعادة في مصفوفة جديدة بالطول نفسه:
const amounts = [450, 1220, 270];\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\nconst labels = amounts.map(formatMoney);\nconsole.log(labels);\nconsole.log(amounts); // unchangedإنها النسخة المدمجة من دالة applyToAll التي كتبتها في درس الدوال. استخدم map كلما كان السؤال “حوّل كل X إلى Y”: السنتات إلى نصوص بالدولار، أو الدولارات إلى سنتات، أو قيم النموذج الخام إلى قيم نظيفة. يستلم الـ callback كل عنصر بدوره، ويجب أن يُرجع نسخته الجديدة. وكل ما يُرجعه يوضع في الموضع نفسه من النتيجة، لذلك يكون في المخرجات دائمًا عدد العناصر نفسه الذي في المدخلات.
تستدعي filter دالة اختبار لكل عنصر، وتُرجع مصفوفة جديدة فيها فقط العناصر التي أرجع لها الاختبار قيمة truthy:
const amounts = [450, -300, 1220, -50, 270];\nconst spending = amounts.filter((a) => a > 0);\nconst refunds = amounts.filter((a) => a < 0);\nconsole.log(spending, refunds);قد تكون النتيجة أقصر من الأصل، بل قد تكون فارغة، لكن filter لا تغيّر العناصر نفسها أبدًا.
أربع دوال تجيب عن أسئلة البحث، وكل منها تتوقّف بمجرّد أن تعرف الإجابة:
\nconst amounts = [450, 12000, 1220, 15000];\n\nconsole.log(amounts.find((a) => a >= 10000)); // first match: 12000\nconsole.log(amounts.findIndex((a) => a >= 10000)); // its position: 1\nconsole.log(amounts.some((a) => a < 0)); // any refunds? false\nconsole.log(amounts.every((a) => a > 0)); // all positive? truefind تُرجع العنصر نفسه، أو undefined إن لم يطابق شيء. وfindIndex تُرجع موضعه، أو -1. أما some وevery فتُرجعان قيمًا منطقية: “واحد على الأقل” و"جميعها".
لأن filter وmap كلتيهما تُرجعان مصفوفات، يمكنك استدعاء إحداهما على ناتج الأخرى:
const amounts = [450, -300, 12000, 1220];\nconst bigOnes = amounts\n .filter((a) => a >= 1000)\n .map((a) => `$${(a / 100).toFixed(2)}`);\nconsole.log(bigOnes);اقرأها من الأعلى إلى الأسفل كوصفة طبخ: ابدأ بكل المبالغ، واحتفظ بما قيمته 10 دولارات أو أكثر، ثم نسّقها. كل خطوة تستلم مخرجات الخطوة التي قبلها. ووضع كل خطوة في سطر خاص بها يبدأ بالنقطة يُبقي السلاسل الطويلة مقروءة.
\n\n\nحتى الآن تحمل المصفوفات أرقامًا بسيطة. لكن المصاريف الحقيقية لها تسمية ومبلغ وفئة معًا، وهذا يستدعي الكائنات، موضوع الدرس التالي.
\n","toc":[{"id":"sec-1","text":"إنشاء المصفوفات وتغييرها","level":2},{"id":"sec-2","text":"map: حوّل كل عنصر","level":2},{"id":"sec-3","text":"filter: احتفظ ببعض العناصر فقط","level":2},{"id":"sec-4","text":"find وsome وevery: البحث","level":2},{"id":"sec-5","text":"السلسلة: قراءة خطّ معالجة","level":2}],"takeaways":["const تمنع الاسم من الإشارة إلى مصفوفة أخرى، لكن محتويات المصفوفة نفسها يمكن أن تتغيّر عبر push أو pop أو الإسناد بالفهرس.","بعض الدوال تعدّل المصفوفة نفسها (push وpop وsplice وsort)؛ وبعضها يُرجع قيمة جديدة ويتركها دون مساس (slice وmap وfilter).","map تُرجع مصفوفة جديدة بالطول نفسه وقد حُوّل كل عنصر فيها؛ وfilter تُرجع مصفوفة جديدة فيها العناصر التي تجتاز الاختبار فقط.","find تُرجع أول عنصر مطابق أو undefined؛ وsome وevery تجيبان عن أسئلة نعم/لا حول القائمة كلها."],"further":[{"title":"Array (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"},{"title":"Array.prototype.map() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map"},{"title":"Array.prototype.filter() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"}],"quiz":[{"q":"ماذا يطبع هذا الكود؟
\nconst amounts = [450, 1220];\namounts.push(270);\nconsole.log(amounts.length);amounts مُصرَّح بها بـ const.","why":"const تمنع فقط توجيه الاسم إلى قيمة أخرى. أما push فتغيّر المصفوفة التي يشير إليها الاسم أصلًا، وهذا مسموح."},{"text":"3","why":"صحيح. push تضيف 270 إلى نهاية المصفوفة نفسها، فيصبح فيها ثلاثة عناصر."},{"text":"2","why":"push تعدّل المصفوفة في مكانها؛ ولا تُرجع نسخة وتترك الأصلية كما هي."}],"answer":1},{"q":"const amounts = [450, -300, 1220]; ماذا تُرجع amounts.find((a) => a > 5000)؟
[]","why":"المصفوفة الفارغة هي ما تُرجعه filter حين لا يطابق شيء. أما find فتُرجع عنصرًا واحدًا أو لا شيء."},{"text":"-1","why":"-1 هي ما تُرجعه findIndex وindexOf للتعبير عن “غير موجود”. أما find فتُرجع العنصر نفسه."},{"text":"undefined","why":"صحيح. find تُرجع أول عنصر يجتاز الاختبار، وundefined حين لا يجتازه أي عنصر."},{"text":"false","why":"الإجابة المنطقية تأتي من some أو every. أما find فتعطيك العنصر المطابق."}],"answer":2},{"q":"ماذا يطبع هذا الكود؟
\nconst out = [450, 1220].map((c) => {\n c / 100;\n});\nconsole.log(out);[undefined, undefined]","why":"صحيح. للـ callback أقواس معقوفة لكن دون return، فيُرجع undefined لكل عنصر، وتجمع map هذه القيم."},{"text":"[4.5, 12.2]","why":"هذا يتطلّب (c) => c / 100 أو return صريحة داخل الأقواس."},{"text":"[450, 1220]","why":"map تبني نتيجتها دائمًا مما يُرجعه الـ callback، لا من العناصر الأصلية أبدًا."}],"answer":0},{"q":"تحتاج إلى معرفة إن كان لكل مصروف في القائمة فئة. أيّ دالة تناسب؟
","options":[{"text":"filter","why":"filter ستعطيك مصفوفة جديدة، وستظل مضطرًا إلى مقارنة الأطوال. أما every فتجيب عن السؤال مباشرة."},{"text":"some","why":"some تكون صحيحة إن اجتاز عنصر واحد على الأقل. وأنت تحتاج أن تجتاز العناصر كلها."},{"text":"every","why":"صحيح. every تُرجع true فقط إن اجتاز الاختبار جميع العناصر، وتتوقّف عند أول فشل."},{"text":"map","why":"map تحوّل العناصر؛ ولا تجيب عن سؤال نعم/لا حول القائمة."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const amounts = [450, -300, 12000, 1220, -50, 15000];\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\n// Use array methods, not for loops, and never change the array you receive.\n\n// Only the positive amounts\nfunction spendingOnly(amounts) {\n return amounts;\n}\n\n// Every amount formatted with formatMoney\nfunction formatAll(amounts) {\n}\n\n// The first amount of 10000 cents or more, or undefined\nfunction firstBig(amounts) {\n}\n\n// true if any amount is negative\nfunction hasRefund(amounts) {\n return false;\n}\n\nconsole.log(spendingOnly(amounts), formatAll(amounts));\n"},"solution":{"js":"const amounts = [450, -300, 12000, 1220, -50, 15000];\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\n\nfunction spendingOnly(amounts) {\n return amounts.filter((a) => a > 0);\n}\n\nfunction formatAll(amounts) {\n return amounts.map(formatMoney);\n}\n\nfunction firstBig(amounts) {\n return amounts.find((a) => a >= 10000);\n}\n\nfunction hasRefund(amounts) {\n return amounts.some((a) => a < 0);\n}\n\nconsole.log(spendingOnly(amounts), formatAll(amounts));\n"},"checks":[{"id":"spending","test":"const arr = [450, -300, 12000, 1220, -50];\nconst out = spendingOnly(arr);\nreturn Array.isArray(out) && out.join() === '450,12000,1220' && arr.length === 5;\n"},{"id":"format","test":"const out = formatAll([450, -300, 5]);\nreturn Array.isArray(out) && out.join('|') === '$4.50|$-3.00|$0.05';\n"},{"id":"first-big","test":"return firstBig([450, 12000, 15000]) === 12000 && firstBig([10000]) === 10000 && firstBig([1, 2]) === undefined;\n"},{"id":"refund","test":"return hasRefund([450, -1]) === true && hasRefund([450, 0]) === false && hasRefund([]) === false;\n"},{"id":"no-mutation","test":"const arr = [450, -300, 12000];\nspendingOnly(arr); formatAll(arr); firstBig(arr); hasRefund(arr);\nreturn arr.join() === '450,-300,12000';\n"}],"title":"اطرح أسئلة على قائمة","prompt":"أكمل أربع دوال باستخدام دوال المصفوفات بدلًا من حلقات for. ولا يجوز لأيّ منها أن تغيّر المصفوفة التي تستلمها.
spendingOnly(amounts) تُرجع مصفوفة جديدة فيها المبالغ الموجبة فقط.formatAll(amounts) تُرجع كل المبالغ منسّقة بالدالة المعطاة formatMoney.firstBig(amounts) تُرجع أول مبلغ قيمته 10000 سنت أو أكثر، أو undefined.hasRefund(amounts) تُرجع true إن كان أي مبلغ سالبًا.filter، وتحويل كل عنصر هو map، وأول تطابق هو find، وأي تطابق هو some.","يمكنك تمرير formatMoney مباشرة إلى map، دون أقواس: amounts.map(formatMoney).","كل جسم سطر واحد، مثل return amounts.filter((a) => a > 0);."],"explanation":"كل سؤال يقابله دالة واحدة. filter تحتفظ بالعناصر التي يُرجع لها الـ callback شيئًا truthy، وmap تبني مصفوفة بالطول نفسه من القيم التي يُرجعها الـ callback، وfind تُرجع العنصر المطابق الأول نفسه (أو undefined)، وsome تُرجع true بمجرّد أن يجتاز عنصر واحد. ولا تعدّل أيّ من هذه الدوال في المكان، لذلك تبقى مصفوفة المُستدعي كما كانت تمامًا. وتمرير formatMoney مباشرة إلى map ينجح لأن map تستدعيها مع كل عنصر بصفته الوسيط الأول.
spendingOnly تُرجع المبالغ الموجبة فقط","format":"formatAll تنسّق كل المبالغ","first-big":"firstBig تُرجع أول مبلغ قيمته 10000 أو أكثر، أو undefined","refund":"hasRefund تكتشف المبالغ السالبة","no-mutation":"لا تغيّر أيّ من الدوال مصفوفة المدخلات"}},"words":599,"readMinutes":4}