حذف خاصية من كائن JavaScript: 3 طرق والمزالق

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

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

ابدأ الدورة

«الخاصية اختفت، والكائن بقي»: كيف تحذف ما لا تحتاجه في JavaScript؟

\n\n

تخيل موقفًا: أنت تعمل مع كائن كبير جاء من الخادم. يحتوي على 20 حقلًا، لكن لإرسال النموذج تحتاج فقط إلى 15. أو أنك تكتب دالة يجب أن تعيد بيانات بدون الحقل المساعد _id. ماذا تفعل؟ السؤال الأكثر شيوعًا على Stack Overflow حول هذا الموضوع حصد مئات الآلاف من المشاهدات - وهذا ليس من قبيل الصدفة.

\n\n

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

\n\n

الطريقة رقم 1: عامل الحذف delete - الكلاسيكية

\n\n

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

\n\n
const user = {\n  name: 'آنا',\n  email: 'anna@example.com',\n  password: 'super_secret_123'\n};\n\ndelete user.password;\n\nconsole.log(user);\n// { name: 'آنا', email: 'anna@example.com' }\nconsole.log(user.password); // undefined\n
\n\n

كيف يعمل delete في الواقع؟

\n\n

عامل delete لا يقوم فقط بتعيين undefined. بل يزيل الخاصية تمامًا من الكائن. يمكنك التحقق من ذلك باستخدام طريقة hasOwnProperty:

\n\n
const car = { brand: 'Tesla' };\nconsole.log(car.hasOwnProperty('brand')); // true\n\ndelete car.brand;\nconsole.log(car.hasOwnProperty('brand')); // false\n
\n\n

الفرق المهم: بعد delete، تتوقف الخاصية عن الوجود. عند التكرار عبر for...in أو Object.keys()، لن تظهر.

\n\n

متى لا يعمل delete؟

\n\n

هناك بعض «المزالق»:

\n\n
    \n
  • لا يمكن حذف الخصائص المعلنة عبر var/let/const. عامل delete يعمل فقط مع خصائص الكائنات.
  • \n
  • لا يتم حذف الخصائص الموروثة من النموذج الأولي - فقط الخصائص الخاصة.
  • \n
  • الخصائص ذات العلامة configurable: false (مثل تلك الموجودة في الكائنات المضمنة) لا يتم حذفها. في الوضع الصارم، سيؤدي ذلك إلى خطأ.
  • \n
\n\n
// مثال: خاصية مع configurable: false\nconst obj = {};\nObject.defineProperty(obj, 'fixed', {\n  value: 42,\n  configurable: false\n});\n\ndelete obj.fixed; // false (لم يتم الحذف)\nconsole.log(obj.fixed); // 42\n
\n\n

الطريقة رقم 2: التفكيك وعامل rest - النهج الحديث

\n\n

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

\n\n
const user = {\n  name: 'إيفان',\n  email: 'ivan@example.com',\n  role: 'admin',\n  token: 'abc123'\n};\n\n// حذف حقل token، مع إنشاء كائن جديد\nconst { token, ...userWithoutToken } = user;\n\nconsole.log(userWithoutToken);\n// { name: 'إيفان', email: 'ivan@example.com', role: 'admin' }\nconsole.log(user.token); // 'abc123' — الكائن الأصلي لم يتأثر!\n
\n\n

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

\n\n

إيجابيات وسلبيات التفكيك

\n\n
    \n
  • + عدم القابلية للتغيير: يبقى الكائن الأصلي دون تغيير. هذا مهم لـ Redux و Vuex والبرمجة الوظيفية.
  • \n
  • + قابلية القراءة: يظهر بوضوح الحقول التي نستبعدها.
  • \n
  • - الأداء: يتم إنشاء نسخة من الكائن، وهو ما قد يكون مكلفًا للكائنات الكبيرة.
  • \n
  • - غير مريح لحذف العديد من الخصائص: إذا كنت بحاجة إلى إزالة 5 حقول من أصل 20،

المدونات

توصيات الكتب