✨ تعديل الكائنات في JavaScript: إضافة، تغيير، وحذف الخصائص 🎉 أهلاً أبطال البرمجة! في المقال السابق، تعلمنا ما هو الكائن في JavaScript وكيفية تخزين المعلومات د…

المؤلف آن بالعربي
تاريخ النشر
آخر تحديث

✨ تعديل الكائنات في JavaScript: إضافة، تغيير، وحذف الخصائص


🎉 أهلاً أبطال البرمجة!

في المقال السابق، تعلمنا ما هو الكائن في JavaScript وكيفية تخزين المعلومات داخل خصائصه. الآن حان وقت المرح! 😎 سنتعلم كيف نعدل الكائنات: نضيف خصائص جديدة، نغير القيم، أو نحذف خصائص غير مرغوبة. هيا نبدأ!


🛠️ إضافة خصائص جديدة للكائن



يمكننا بسهولة إضافة خصائص جديدة لأي كائن باستخدام النقطة . أو الأقواس [].

💡 مثال:


let student = { name: "علي", age: 10 };

// إضافة خاصية جديدة باستخدام النقطة
student.grade = 5;

// إضافة خاصية جديدة باستخدام الأقواس
student.hobbies = ["كرة القدم", "الرسم"];

console.log(student);
/*
{
  name: "علي",
  age: 10,
  grade: 5,
  hobbies: ["كرة القدم", "الرسم"]
}
*/

انظروا كيف أصبح الكائن student يحتوي الآن على خصائص جديدة بدون حذف أي شيء قديم.


✏️ تعديل قيم الخصائص

تغيير قيمة أي خاصية في الكائن سهل جدًا. فقط نكتب اسم الخاصية ونعطيها قيمة جديدة.

💡 مثال:


let book = { title: "رحلة البرمجة", pages: 120 };

// تغيير عدد الصفحات
book.pages = 150;

// تغيير العنوان
book.title = "مغامرات البرمجة";

console.log(book);
/*
{
  title: "مغامرات البرمجة",
  pages: 150
}
*/

الآن الكائن book يعكس التحديثات الجديدة بسهولة!


🗑️ حذف خصائص من الكائن

إذا لم نعد بحاجة لخاصية معينة، يمكننا حذفها باستخدام كلمة delete.

💡 مثال:


let pet = { name: "لولو", type: "قطة", age: 3 };

// حذف خاصية العمر
delete pet.age;

console.log(pet);
/*
{
  name: "لولو",
  type: "قطة"
}
*/

لاحظوا أن الخاصية age اختفت تمامًا من الكائن.


🎨 أمثلة ممتعة للأطفال

💡 لعبة فيديو


let myGame = { 
  name: "المنقذ السريع", 
  type: "مغامرة", 
  players: 2
};

// إضافة خصائص جديدة
myGame.features = ["مستويات صعبة", "رسوم متحركة جميلة"];
myGame.online = true;

// تعديل اسم اللعبة
myGame.name = "المنقذ الخارق";

// حذف عدد اللاعبين
delete myGame.players;

console.log(myGame);
/*
{
  name: "المنقذ الخارق",
  type: "مغامرة",
  features: ["مستويات صعبة", "رسوم متحركة جميلة"],
  online: true
}
*/

💡 حيوان أليف


let pet = { name: "لولو", type: "قطة", colors: ["أبيض", "أسود"] };

// إضافة عمر جديد
pet.age = 3;

// تعديل اسم الحيوان
pet.name = "لولو الجميلة";

// حذف اللون الأسود
pet.colors.pop();

console.log(pet);
/*
{
  name: "لولو الجميلة",
  type: "قطة",
  colors: ["أبيض"],
  age: 3
}
*/

🧩 استخدام المتغيرات لتعديل الخصائص

يمكن استخدام متغيرات لتحديد أي خاصية نريد تعديلها. هذا مفيد إذا كان الاختيار يعتمد على المستخدم.

💡 مثال:


let student = { name: "ليلى", age: 9, grade: 4 };

let userChoice = "grade";
student[userChoice] = 5;

console.log(student);
/*
{
  name: "ليلى",
  age: 9,
  grade: 5
}
*/

🎯 تمرين عملي للأطفال

جرب أن تنشئ كائن يمثل لعبتك أو حيوانك المفضل، ثم:

  • أضف خصائص جديدة
  • غيّر قيمة بعض الخصائص
  • احذف خاصية لم تعد بحاجة إليها

💡 مثال لإلهامك:


let myPet = { name: "بوبي", type: "كلب" };

// إضافة العمر واللون
myPet.age = 2;
myPet.color = "بني";

// تعديل الاسم
myPet.name = "بوبي الجميل"

// حذف اللون
delete myPet.color;

console.log(myPet);
/*
{
  name: "بوبي الجميل",
  type: "كلب",
  age: 2
}
*/

💡 نصائح مهمة

  • أضف فقط الخصائص التي تحتاجها لتبقي الكائن مرتبًا.
  • استخدم أسماء واضحة عند تعديل أو إضافة خصائص.
  • التجربة العملية هي أفضل طريقة لتعلم تعديل الكائنات.
  • جرب دمج عدة طرق: النقطة، الأقواس، والمتغيرات لتصبح محترفًا.

💬 سؤال اليوم:

إذا أردت تعديل كائن يمثل مدرستك أو فريقك المفضل، ما الخصائص التي ستضيفها أو تغيرها؟ جرب كتابة كائن mySchool أو myTeam وتطبيق الإضافات، التعديلات، والحذف! 🌟

صورة توضيحية

📌 خلاصة المقال:

  • يمكن تعديل أي كائن بإضافة، تغيير، أو حذف الخصائص.
  • استخدم . أو [] أو المتغيرات لتحديد الخصائص.
  • حافظ على الكائن مرتبًا وواضحًا أثناء التعديل.
  • التجربة العملية مع الأمثلة تساعدك على فهم الكائنات أكثر.

🚀 رائع! الآن أصبح لديك خبرة كاملة في **تعديل الكائنات**، ومستعد للمقال القادم عن الكائنات المتداخلة والمصفوفات داخل الكائنات بطريقة ممتعة وسهلة. 😉

تعليقات

عدد التعليقات : 0