خصائص كائن JavaScript

اكتشف كل ما تحتاج لمعرفته حول خصائص كائن JavaScript

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

التركيب الحرفي للكائن الذي رأيناه:

const car = {

}

يتيح لنا تحديد خصائص مثل هذا:

const car = {
  color: 'blue'
}

هنا لديناcarكائن مع خاصية مسماةcolorذات قيمةblue.

يمكن أن تكون التسميات أي سلسلة. لاحظ أنني لم أستخدم علامات الاقتباسcolor، ولكن إذا أردت تضمين حرف غير صالح كاسم متغير في اسم الخاصية ، فسيتعين علي:

const car = {
  color: 'blue',
  'the color': 'blue'
}

هذا يعني المسافات والواصلات والمزيد من الأحرف الخاصة.

كما ترى ، نفصل بين كل خاصية بفاصلة.

استرجاع قيمة العقار

يمكننا استرداد قيمة الخاصية باستخدام صيغتين مختلفتين.

الأول هوتدوين النقطة:

car.color //'blue'

الثاني ، وهو إلزامي للخصائص ذات الأسماء غير الصالحة ، هو استخدام الأقواس المربعة:

car['the color'] //'blue'

إذا قمت بالوصول إلى خاصية غير موجودة ، فستحصل علىundefined:

car.brand //undefined

طريقة جيدة للتحقق من قيمة الخاصية ولكن الافتراضي لقيمة محددة مسبقًا هو استخدام||المشغل أو العامل:

const brand = car.brand || 'ford'

كما قيل ، يمكن أن تحتوي الكائنات على كائنات متداخلة كخصائص:

const car = {
  brand: {
    name: 'Ford'
  },
  color: 'blue'
}

يمكنك الوصول إلى اسم العلامة التجارية باستخدام

car.brand.name

أو

car['brand']['name']

أو حتى الخلط:

car.brand['name']
car['brand'].name

تحديد قيمة العقار

كما رأيت أعلاه ، يمكنك تعيين قيمة الخاصية عند تحديد الكائن.

ولكن يمكنك دائمًا تحديثه لاحقًا:

const car = {
  color: 'blue'
}

car.color = ‘yellow’ car[‘color’] = ‘red’

ويمكنك أيضًا إضافة خصائص جديدة إلى كائن:

car.model = 'Fiesta'

car.model //‘Fiesta’

كيفية إزالة الممتلكات

نظرا للكائن

const car = {
  color: 'blue',
  brand: 'Ford'
}

يمكنك حذف خاصية من هذا الكائن باستخدام

delete car.brand

Delete a property from an object in JavaScript

يعمل أيضًا على النحو التالي:

delete car['brand']
delete car.brand
delete newCar['brand']

تعيين خاصية إلى غير محدد

إذا كنت بحاجة إلى إجراء هذه العملية بطريقة محسّنة للغاية ، على سبيل المثال ، عندما تعمل على عدد كبير من الكائنات في حلقات ، هناك خيار آخر وهو تعيين الخاصية علىundefined.

نظرا لطبيعته ، فإن أداءdeleteهوأبطأ كثيرًامن مجرد إعادة تعيين إلىundefined، أبطأ أكثر من 50 مرة.

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

Iterate over the object

استخدامdeleteلا يزال سريعًا جدًا ، يجب أن تنظر في هذا النوع من مشكلات الأداء فقط إذا كان لديك سبب وجيه جدًا للقيام بذلك ، وإلا فمن المفضل دائمًا أن يكون لديك دلالات ووظائف أكثر وضوحًا.

إزالة خاصية دون تغيير الكائن

إذا كانت قابلية التغيير مصدر قلق ، فيمكنك إنشاء كائن جديد تمامًا عن طريق نسخ جميع الخصائص من القديم ، باستثناء الكائن الذي تريد إزالته:

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

const newCar = Object.keys(car).reduce((object, key) => { if (key !== prop) { object[key] = car[key] } return object }, {})

Create a new object without mutating the original

كيفية حساب عدد الخصائص في كائن JavaScript

استخدم الObject.keys()الطريقة ، تمرير الكائن الذي تريد فحصه ، للحصول على مصفوفة من جميع الخصائص (الخاصة) القابلة للتعداد للكائن.

ثم احسب طول تلك المصفوفة عن طريق التحقق منlengthمنشأه:

const car = {
  color: 'Blue',
  brand: 'Ford',
  model: 'Fiesta'
}

Object.keys(car).length

قلت خصائص لا تعد ولا تحصى. هذا يعني أنه تم تعيين العلامة الداخلية القابلة للتعداد على "صواب" ، وهذا هو الإعداد الافتراضي.تحقق من MDNلمزيد من المعلومات حول هذا الموضوع.

كيفية التحقق مما إذا كانت خاصية كائن JavaScript غير محددة

في برنامج JavaScript ، الطريقة الصحيحة للتحقق مما إذا كانت خاصية الكائن غير معرَّفة هي استخدام الامتدادtypeofالمشغل أو العامل.

typeofإرجاع سلسلة تخبر نوع المعامل. يتم استخدامه بدون أقواس ، مع تمرير أي قيمة تريد التحقق منها:

const list = []
const count = 2

typeof list //“object” typeof count //“number” typeof “test” //“string” typeof color //“undefined”

إذا لم يتم تعريف القيمة ،typeofإرجاع "غير محدد"خيط.

افترض الآن أن لديك ملفcarكائن ، بخاصية واحدة فقط:

const car = {
  model: 'Fiesta'
}

هذه هي الطريقة التي تتحقق بها مما إذا كان ملفcolorيتم تعريف الخاصية في هذا الكائن:

if (typeof car.color === 'undefined') {
  // color is undefined
}

الخصائص الديناميكية

عند تعريف خاصية ، يمكن أن تكون تسميتها تعبيرًا إذا تم تغليفها بين أقواس مربعة:

const car = {
  ['c' + 'o' + 'lor']: 'blue'
}

car.color //‘blue’

بناء جملة أبسط لتضمين المتغيرات كخصائص كائن

بدلا من فعل

const something = 'y'
const x = {
  something: something
}

يمكنك القيام بهذه الطريقة المبسطة:

const something = 'y'
const x = {
  something
}

المزيد من دروس js: