??)، وتختار Map للبحث والعدّ وSet للقيم الفريدة.","html":"البيانات الحقيقية فيها ثغرات. بعض المصاريف لها ملاحظة وبعضها لا. وبعضها أُرفق به إيصال. والإعداد الذي لم يغيّره المستخدم قط لا يُحفظ أصلًا. على Pocket أن يتعامل مع كل هذا دون أن ينهار، ودون أن يخلط بين “لا شيء” وقيمة حقيقية مثل الصفر.
\nقراءة خاصية غير موجودة في كائن أمر لا بأس به؛ فتحصل على undefined. أما قراءة خاصية من undefined فليست كذلك:
const expense = { label: \"Coffee\", amount: 450 };\nconsole.log(expense.receipt); // undefined: fine\n\ntry {\n console.log(expense.receipt.url); // reading .url of undefined\n} catch (error) {\n console.log(error.message);\n}TypeError: Cannot read properties of undefined (reading 'url') ربما يكون الخطأ الأكثر شيوعًا في JavaScript كلها. (الـ try/catch هنا موجودة فقط كي يستمر المثال في العمل فتقرأ الرسالة؛ والقسم 5 يشرحها كما ينبغي.) والرسالة تخبرك بالضبط بما حدث: شيء ما قبل .url كان undefined.
وقبل أن تمدّ يدك إلى الحل، تذكّر الفرق بين القيمتين “الفارغتين”. undefined تعني عادةً “لم يُضبط قط”: خاصية مفقودة، أو معامل لم يمرّره أحد، أو متغيّر بلا قيمة. أما null فتُضبط عن قصد لتعني “فارغ عمدًا”. قد يخزّن Pocket القيمة receipt: null لمصروف اختار المستخدم ألّا يرفق به إيصالًا.
العامل ?. يقرأ الخاصية فقط إن لم يكن ما على يساره null أو undefined. فإن كان كذلك، يتوقّف التعبير كله ويعطي undefined بدلًا من أن يرمي خطأ:
const withReceipt = { label: \"Train\", receipt: { url: \"/r/88.png\" } };\nconst withoutReceipt = { label: \"Coffee\" };\n\nconsole.log(withReceipt.receipt?.url);\nconsole.log(withoutReceipt.receipt?.url);\nconsole.log(withoutReceipt.tags?.[0]); // works with brackets\nconsole.log(withoutReceipt.format?.()); // and with callsضع ?. مباشرة بعد الجزء الذي قد يكون مفقودًا. ففي expense.receipt?.url أنت تقول: “expense يجب أن يكون موجودًا، أما receipt فقد لا يكون”.
?. تعطيك undefined، وفي العادة تريد قيمة بديلة. تعرّفت على || للقيم الافتراضية في القسم 2، ومعها عيبها: إنها تلجأ إلى البديل مع كل قيمة falsy، بما في ذلك 0 و"". أما عامل nullish coalescing ?? (أي “البديل عند غياب القيمة”) فلا يلجأ إلى البديل إلا مع null وundefined:
const settings = { dailyLimit: 0, nickname: \"\" };\n\nconsole.log(settings.dailyLimit || 5000); // 5000: the user's 0 is lost\nconsole.log(settings.dailyLimit ?? 5000); // 0: kept\nconsole.log(settings.nickname ?? \"friend\"); // \"\": kept\nconsole.log(settings.currency ?? \"USD\"); // missing: default usedاستخدم ?? للقيم الافتراضية. ولا تستخدم || إلا حين تريد فعلًا استبدال النصوص الفارغة والأصفار أيضًا. ويجتمع العاملان مع ?. بشكل طبيعي:
const expense = { label: \"Coffee\" };\nconst receiptUrl = expense.receipt?.url ?? \"No receipt\";\nconsole.log(receiptUrl);وهناك أيضًا صيغة إسناد، settings.currency ??= "USD"، تضبط الخاصية فقط إن كانت حاليًا null أو undefined.
في الدرس السابق استخدمت كائنًا عاديًا لحساب مجاميع الفئات. الكائنات تعمل جيدًا مع السجلّات ذات أسماء الخصائص المعروفة. أما المجموعة التي تكبر مع البيانات، ومفاتيحها قيم لا تعرفها مسبقًا، فلها في JavaScript بنية مخصّصة: Map:
\nconst counts = new Map();\nfor (const category of [\"food\", \"travel\", \"food\", \"fun\", \"food\"]) {\n counts.set(category, (counts.get(category) ?? 0) + 1);\n}\n\nconsole.log(counts.get(\"food\"), counts.has(\"rent\"), counts.size);\nfor (const [category, count] of counts) {\n console.log(`${category}: ${count}`);\n}set(key, value) تخزّن، وget(key) تقرأ (أو تعطي undefined)، وhas(key) تفحص، وdelete(key) تحذف، وsize تعدّ المدخلات. وحلقة for...of تعطيك أزواج [key, value] بترتيب إضافتها الأول.
لماذا لا تستخدم كائنًا دائمًا؟ الـ Map تقبل أي قيمة مفتاحًا، بما في ذلك الأرقام والكائنات، بينما يحوّل الكائن كل مفتاح إلى نص. ولها size حقيقية. وليست لها خصائص موروثة تتعثّر بها: فالكائن الذي مفاتيحه نصوص يكتبها المستخدم قد يتصادم مع أسماء مدمجة مثل constructor. والخيار الافتراضي الجيد: الكائنات للسجلّات ذات الحقول الثابتة، والـ Maps لجداول البحث المبنية من البيانات.
الـ Set مجموعة تظهر فيها كل قيمة مرة واحدة على الأكثر. وإضافة قيمة موجودة أصلًا لا تفعل شيئًا:
\nconst categories = [\"food\", \"travel\", \"food\", \"fun\", \"travel\"];\nconst unique = new Set(categories);\n\nconsole.log(unique.size, unique.has(\"fun\"));\nunique.add(\"food\"); // already there: no change\nconsole.log([...unique]); // back to an array, in first-seen order[...new Set(list)] هي الطريقة المعتمدة في سطر واحد لإزالة التكرار من مصفوفة. وhas أسرع بكثير من includes على مصفوفة كبيرة، لأن الـ Set لا تبحث عنصرًا عنصرًا. وقد أضافت الإصدارات الحديثة من JavaScript عمليات على المجموعات مثل union وintersection، وهي متاحة في كل المتصفّحات الحالية.
بهذا تكتمل أدوات Pocket للتعامل مع البيانات: المصفوفات والكائنات والـ Maps والـ Sets، وعوامل التعامل مع القيم المفقودة. وفي القسم 4، يذهب كل ذلك إلى صفحة ويب حقيقية.
\n","toc":[{"id":"sec-1","text":"الخطأ الذي ستراه أكثر من غيره","level":2},{"id":"sec-2","text":"السلسلة الاختيارية: ?.","level":2},{"id":"sec-3","text":"القيم الافتراضية بـ ??","level":2},{"id":"sec-4","text":"Map: البحث بأي مفتاح","level":2},{"id":"sec-5","text":"Set: كل قيمة مرة واحدة","level":2}],"takeaways":["قراءة خاصية منundefined أو null ترمي TypeError؛ أما ?. فتتوقّف وتُرجع undefined بدلًا من ذلك.","?? توفّر قيمة افتراضية فقط مع null وundefined، فتنجو القيم الحقيقية مثل 0 و""، على عكس ||.","استخدم ?. فقط حيث تكون البيانات اختيارية فعلًا؛ فنثرها في كل مكان يُخفي أخطاء حقيقية.","الـ Map تخزّن أزواجًا من المفاتيح والقيم بمفاتيح من أي نوع، وتحفظ ترتيب الإضافة، ولها get وset وhas وsize.","الـ Set تخزّن كل قيمة مرة واحدة على الأكثر، لذلك تُزيل [...new Set(list)] التكرار."],"further":[{"title":"Optional chaining (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining"},{"title":"Nullish coalescing operator (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing"},{"title":"Map (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"},{"title":"Set (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set"}],"quiz":[{"q":"قد يكون للمصروف كائن receipt وقد لا يكون. أيّ تعبير يقرأ url الإيصال دون أن يرمي خطأ أبدًا؟
expense.receipt.url","why":"حين تكون receipt تساوي undefined، فإن قراءة .url منها ترمي “Cannot read properties of undefined”."},{"text":"expense?.receipt.url","why":"?. هنا تحمي من غياب expense، لكن الجزء الاختياري هنا هو receipt، وقراءة .url منه ما زالت ترمي خطأ."},{"text":"expense.receipt?.url","why":"صحيح. إن كانت receipt تساوي null أو undefined، يتوقّف التعبير كله وتكون قيمته undefined."}],"answer":2},{"q":"نسبة البقشيش المحفوظة لدى مستخدم هي 0. ماذا يعطي const tip = saved.tip ?? 15;؟
0","why":"صحيح. ?? لا تلجأ إلى البديل إلا مع null وundefined، و0 ليست أيًّا منهما."},{"text":"15","why":"هذا ما كانت ستعطيه ||، لأن 0 قيمة falsy. وتجنّب هذا بالضبط هو سبب وجود ??."},{"text":"undefined","why":"للطرف الأيسر قيمة حقيقية، هي 0، فتُرجعها ??."}],"answer":0},{"q":"تحتاج إلى عدّ المصاريف في كل فئة، ثم لاحقًا عرض الفئات بترتيب ظهورها الأول. أيّها الأنسب؟
","options":[{"text":"مصفوفة أسماء فئات، مع استخدامindexOf للعثور على كل واحدة.","why":"البحث في مصفوفة مع كل مصروف يصبح بطيئًا، والأعداد تحتاج إلى مصفوفة ثانية يجب إبقاؤها متزامنة معها."},{"text":"Set من أسماء الفئات.","why":"الـ Set تسجّل أن القيمة موجودة، لكنها لا تستطيع تخزين عدد بجانبها."},{"text":"Map من الفئة إلى العدد.","why":"صحيح. get/set تحدّثان الأعداد مباشرة، والـ Map تتذكّر ترتيب الإضافة حين تمرّ عليها."},{"text":"نص فيه الفئات مفصولة بفواصل.","why":"النصوص غير قابلة للتعديل ويجب تقسيمها والبحث فيها كل مرة؛ إنها ليست مصمّمة للبحث."}],"answer":2},{"q":"ماذا تُرجع new Set(["food", "travel", "food", "fun"]).size؟
4","why":"الـ Set تتجاهل القيم الموجودة فيها أصلًا، لذلك لا تُضاف “food” الثانية."},{"text":"3","why":"صحيح. تحمل الـ Set القيم “food” و"travel" و"fun"، كلًّا منها مرة واحدة."},{"text":"2","why":"لا تُحذف إلا “food” المكرّرة؛ أما “travel” و"fun" فتظهر كل منهما مرة واحدة وتبقيان."}],"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\", receipt: { url: \"/r/88.png\" } },\n { label: \"Lunch\", amount: 1350, category: \"food\", receipt: null },\n { label: \"Gift\", amount: 5000 },\n];\n\n// The receipt's url, or \"No receipt\" (receipt may be missing or null)\nfunction receiptLabel(expense) {\n return expense.receipt.url;\n}\n\n// settings may be undefined; a saved limit of 0 is a real choice\nfunction dailyLimit(settings) {\n return settings.dailyLimit || 5000;\n}\n\n// A Map from category to how many expenses have it;\n// expenses without a category count as \"other\"\nfunction countByCategory(expenses) {\n}\n\n// Each category once, in the order first seen (missing ones as \"other\")\nfunction uniqueCategories(expenses) {\n return expenses.map((e) => e.category);\n}\n\nconsole.log(receiptLabel(expenses[1]), dailyLimit({ dailyLimit: 0 }));\n"},"solution":{"js":"const expenses = [\n { label: \"Coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\", receipt: { url: \"/r/88.png\" } },\n { label: \"Lunch\", amount: 1350, category: \"food\", receipt: null },\n { label: \"Gift\", amount: 5000 },\n];\n\nfunction receiptLabel(expense) {\n return expense.receipt?.url ?? \"No receipt\";\n}\n\nfunction dailyLimit(settings) {\n return settings?.dailyLimit ?? 5000;\n}\n\nfunction countByCategory(expenses) {\n const counts = new Map();\n for (const e of expenses) {\n const category = e.category ?? \"other\";\n counts.set(category, (counts.get(category) ?? 0) + 1);\n }\n return counts;\n}\n\nfunction uniqueCategories(expenses) {\n return [...new Set(expenses.map((e) => e.category ?? \"other\"))];\n}\n\nconsole.log(receiptLabel(expenses[1]), dailyLimit({ dailyLimit: 0 }));\n"},"checks":[{"id":"receipt","test":"return receiptLabel(expenses[1]) === '/r/88.png' && receiptLabel(expenses[0]) === 'No receipt' && receiptLabel(expenses[2]) === 'No receipt';\n"},{"id":"limit","test":"return dailyLimit({ dailyLimit: 0 }) === 0 && dailyLimit({ dailyLimit: 2500 }) === 2500 && dailyLimit({}) === 5000 && dailyLimit(undefined) === 5000;\n"},{"id":"counts-map","test":"const m = countByCategory(expenses);\nreturn m instanceof Map && m.get('food') === 2 && m.get('travel') === 1 && m.get('other') === 1 && m.size === 3;\n"},{"id":"unique","test":"const u = uniqueCategories(expenses);\nreturn Array.isArray(u) && u.join() === 'food,travel,other';\n"}],"title":"تعامل مع البيانات المفقودة بأمان","prompt":"بعض بيانات Pocket ناقصة. أكمل أربع دوال:
\nreceiptLabel(expense) تُرجع url الإيصال، أو "No receipt" حين تكون receipt مفقودة أو null.dailyLimit(settings) تُرجع settings.dailyLimit، أو 5000 حين لا يوجد حدّ. وقد يكون settings نفسه undefined، ويجب الإبقاء على حدّ محفوظ قيمته 0.countByCategory(expenses) تُرجع Map من الفئة إلى عدد المصاريف فيها. والمصاريف التي لا فئة لها تُعدّ ضمن "other".uniqueCategories(expenses) تُرجع مصفوفة فيها كل فئة مرة واحدة، بترتيب ظهورها الأول (والمفقودة على أنها "other").?. مباشرة بعد الجزء الذي قد يكون مفقودًا، ثم ?? بعده للبديل: expense.receipt?.url ?? "No receipt".","|| تُضيّع الصفر. أما settings?.dailyLimit ?? 5000 فتحتفظ به وتنجو أيضًا من كون settings تساوي undefined.","عُدّ باستخدام counts.set(category, (counts.get(category) ?? 0) + 1). وللقيم الفريدة، ابنِ Set من الفئات بعد تحويلها بـ map، ثم انشرها مجددًا في مصفوفة."],"explanation":"تتوقّف ?. عن القراءة بمجرّد أن تصادف null أو undefined وتُنتج undefined، ثم تستبدلها ?? بالقيمة البديلة. ولأن ?? لا تتفاعل إلا مع null وundefined، يمرّ الحدّ 0 سليمًا، بينما كانت || ستتخلّص منه. وتعدّ الـ Map كل فئة باستخدام get وset، و?? 0 تتعامل مع الظهور الأول للفئة. أما new Set(...) فتُسقط الفئات المكرّرة مع الحفاظ على ترتيب الظهور الأول، ونشرها بـ [...set] يعيدها مصفوفة.
receiptLabel تُرجع الـ url أو “No receipt”","limit":"dailyLimit تحتفظ بالصفر، وقيمتها الافتراضية 5000، وتنجو من غياب الإعدادات","counts-map":"countByCategory تُرجع Map بالأعداد، مع “other” للفئات المفقودة","unique":"uniqueCategories تعرض كل فئة مرة واحدة، بترتيب ظهورها الأول"}},"words":640,"readMinutes":4}