الوصول لخصائص العناصر في لغة JavaScript

الوصول لخصائص العناصر في لغة JavaScript

يا هلا ومرحباً! اليوم بنغوص سوا في عالم JavaScript وبنشوف كيف نقدر نوصل لخصائص (Properties) الكائنات (Objects) بسهولة. الموضوع أساسي جداً وبتحتاجه كل يوم تقريباً.

1. طريقة النقطة (Dot Notation)

هذي الطريقة هي الأشهر والأسهل، وتستخدم لما تكون عارف اسم الخاصية اللي تبي توصلها. شكلها كذا: object.propertyName.

const user = {
  firstName: 'أحمد',
  lastName: 'علي',
  age: 30
};

console.log(user.firstName); // الناتج: أحمد
console.log(user.age);      // الناتج: 30

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

2. طريقة الأقواس المربعة (Bracket Notation)

هذي الطريقة أقوى وأكثر مرونة. تستخدمها لما يكون اسم الخاصية متغير (مثلاً جاي من متغير آخر) أو لما يكون اسم الخاصية فيه حروف خاصة زي المسافات أو الشرطات. شكلها كذا: object['propertyName'] أو object[variableName].

const product = {
  name: 'لابتوب',
  price: 1200,
  'in stock': true,
  'product-id': 'P123'
};

console.log(product['name']);      // الناتج: لابتوب
console.log(product['in stock']);  // الناتج: true
console.log(product['product-id']); // الناتج: P123

const key = 'price';
console.log(product[key]);         // الناتج: 1200 (استخدمنا متغير لاسم الخاصية)

3. معرفة وجود خاصية (Checking for Property Existence)

أحياناً تحتاج تتأكد إذا الخاصية موجودة قبل ما تحاول توصلها عشان تتجنب الأخطاء. فيه كذا طريقة:

أ. استخدام in Operator

هذا بيتحقق إذا كانت الخاصية موجودة في الكائن أو في سلسلة البروتوتايب الخاصة به.

const car = {
  brand: 'Toyota',
  model: 'Camry'
};

console.log('brand' in car);     // الناتج: true
console.log('year' in car);      // الناتج: false

ب. استخدام hasOwnProperty()

هذي الدالة ترجع true بس إذا كانت الخاصية موجودة مباشرة في الكائن نفسه (مو في سلسلة البروتوتايب).

const person = {
  name: 'سارة'
};

console.log(person.hasOwnProperty('name')); // الناتج: true
console.log(person.hasOwnProperty('age'));  // الناتج: false
console.log(person.hasOwnProperty('toString')); // الناتج: false (موجودة في البروتوتايب)

4. الوصول الآمن للخصائص (Optional Chaining ?.)

هذي ميزة رهيبة جت مع ES2020، وتخليك توصل لخصائص متداخلة بأمان بدون ما تضرب معاك الأكواد إذا كانت الخاصية اللي قبلها null أو undefined. بدال ما تكتب ifconditions كثيرة، تستخدم ?..

const userProfile = {
  id: 1,
  data: {
    name: 'ليلى',
    address: {
      city: 'الرياض'
    }
  }
};

const anotherProfile = {
  id: 2
};

console.log(userProfile.data?.address?.city); // الناتج: الرياض
console.log(anotherProfile.data?.address?.city); // الناتج: undefined (بدل ما يضرب خطأ)

// مثال بدون Optional Chaining كان ممكن يسبب خطأ
// console.log(anotherProfile.data.address.city); // TypeError: Cannot read properties of undefined (reading 'address')

5. استخراج كل المفاتيح والقيم (Object.keys, Object.values, Object.entries)

لو تبي تشوف كل مفاتيح الكائن، أو كل قيمه، أو حتى المفاتيح والقيم مع بعض كأزواج، هذي الدوال بتفيدك:

const settings = {
  theme: 'dark',
  language: 'ar',
  fontSize: '16px'
};

console.log(Object.keys(settings));   // الناتج: ['theme', 'language', 'fontSize']
console.log(Object.values(settings)); // الناتج: ['dark', 'ar', '16px']
console.log(Object.entries(settings)); // الناتج: [['theme', 'dark'], ['language', 'ar'], ['fontSize', '16px']]

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

← السابقالفهرسالتالي →