طول الكائن في JavaScript: كيفية الحصول عليه دون كسر الكود

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

طول الكائن في JavaScript: لماذا لا يوجد .length بسيط وماذا تفعل؟

\n\n

هل سبق لك أن أمسكت بنفسك تفكر: «لماذا تمتلك المصفوفة خاصية .length بينما الكائن لا يمتلكها؟». إذا كان الأمر كذلك، فأنت لست وحدك. سؤال «Length of a JavaScript object» هو من بين الأسئلة الأكثر شيوعًا على Stack Overflow مع آلاف المشاهدات. وهذا ليس مفاجئًا: كل مبتدئ يحاول عاجلاً أم آجلاً كتابة obj.length ويحصل على undefined.

\n\n

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

\n\n

لماذا لا تمتلك الكائنات خاصية length؟

\n\n

الأمر كله يتعلق بطبيعة الكائنات. المصفوفة هي مجموعة مرتبة بمؤشرات رقمية. يمكن لمحرك JavaScript أن يقول بسهولة: «هناك 5 عناصر في المصفوفة». أما الكائن فهو مجموعة غير مرتبة من أزواج «مفتاح-قيمة». نظريًا، يمكنك إضافة خاصية، حذفها، إعادة إضافتها - والترتيب غير مضمون (على الأقل في المواصفات القديمة).

\n\n

لهذا السبب لا تمتلك الكائنات البسيطة .length مدمجًا. لكن هذا لا يعني أننا لا نستطيع حسابه. دعنا نرى كيف.

\n\n

الطريقة رقم 1: Object.keys() - المعيار الذهبي

\n\n

الطريقة الأكثر شيوعًا والموصى بها هي استخدام Object.keys(). هذه الدالة تُرجع مصفوفة من الخصائص الخاصة (غير الموروثة) القابلة للتعداد للكائن. والمصفوفة، كما نعلم، تمتلك .length.

\n\n
const user = {\n  name: 'آنا',\n  age: 28,\n  city: 'موسكو',\n  isAdmin: false\n};\n\nconst length = Object.keys(user).length;\nconsole.log(length); // 4
\n\n

بسيط جدًا! تحصل على مصفوفة من المفاتيح ثم تأخذ طولها. هذه الطريقة تعمل في جميع المتصفحات الحديثة و Node.js.

\n\n

ما الذي يتضمنه Object.keys()؟

\n\n

نقطة مهمة: Object.keys() تُرجع فقط الخصائص الخاصة والقابلة للتعداد. هذا يعني أن:

\n
    \n
  • الخاصة - غير الموروثة عبر النموذج الأولي. إذا أنشأت كائنًا عبر class أو أضفت دالة في النموذج الأولي، فلن تظهر في النتيجة.
  • \n
  • القابلة للتعداد - تلك التي يكون فيها العلم enumerable مساويًا لـ true. افتراضيًا، جميع الخصائص المنشأة عبر التعيين تكون قابلة للتعداد. ولكن إذا استخدمت Object.defineProperty() مع enumerable: false، فسيتم تجاهل هذه الخاصية.
  • \n
\n\n

مثال مع خاصية غير قابلة للتعداد:

\n\n
const car = {\n  brand: 'Toyota',\n  model: 'Camry'\n};\n\nObject.defineProperty(car, 'vin', {\n  value: 'JT2BF22KX00000001',\n  enumerable: false\n});\n\nconsole.log(Object.keys(car).length); // 2 (vin غير محسوب)
\n\n

الطريقة رقم 2: Object.values() و Object.entries()

\n\n

أحيانًا لا تحتاج فقط إلى عدد المفاتيح، بل إلى عدد القيم أو الأزواج. هنا يساعدك التوأمان:

\n\n
    \n
  • Object.values(obj) - يُرجع مصفوفة من القيم
  • \n
  • Object.entries(obj) - يُرجع مصفوفة من المصفوفات [مفتاح, قيمة]
  • \n
\n\n

كلاهما يُرجع مصفوفات، وبالتالي لديهما .length:

\n\n
const book = {\n  title: 'السيد ومارجريتا',\n  author: 'بولغاكوف',\n  year: 1966\n};\n\nconsole.log(Object.values(book).length); // 3\nconsole.log(Object.entries(book).length); // 3
\n\n

في الجوهر، هذا هو نفس العدد، لكن Object.entries() يعطي بيانات أكثر إذا كنت ستحتاج لاحقًا إلى المفاتيح والقيم معًا.

\n\n

الطريقة رقم 3: حلقة for...in (وكيف لا تقع في الفخ)

\n\n

الطريقة التقليدية، ولكن الأقل ملاءمة، هي استخدام حلقة for...in وحساب الخصائص يدويًا:

\n\n
const person = {\n  name: 'إيفان',\n  age: 30\n};\n\nlet count = 0;\nfor (let key in                

المدونات

توصيات الكتب