كيفية فحص كائن JavaScript

اكتشف الطرق التي يقدمها لك JavaScript لفحص كائن (أو أي نوع آخر من القيمة)

تقدم JavaScript طرقًا عديدة لفحص محتوى المتغير. على وجه الخصوص ، دعنا نكتشف ذلككيفية طباعة محتوى كائن.

لنفترض أن لدينا هذا الكائنcarولكننا لا نعرف محتواها ونريد فحصها:

const car = {
  color: 'black',
  manufacturer: 'Ford',
  model: 'Fiesta'
}

واجهة برمجة تطبيقات وحدة التحكم

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

console.log

console.log(car)

Inspect object using console.log

console.dir

console.dir(car)

Inspect object using console.dir

هذا بالضبط مثل

console.log('%O', car)

JSON.stringify()

سيؤدي هذا إلى طباعة الكائن كسلسلة تمثيل:

JSON.stringify(car)

Inspect object using console.dir

بإضافة هذه المعلمات:

JSON.stringify(car, null, 2)

يمكنك جعلها تطبع بشكل أفضل. يحدد الرقم الأخير مقدار المسافات في المسافة البادئة:

Inspect object using console.dir

JSON.stringify()لديه ميزة العمل خارج وحدة التحكم ، حيث يمكنك طباعة الكائن على الشاشة. أو يمكنك دمجه مع Console API لطباعة هذا في وحدة التحكم:

console.log(JSON.stringify(car, null, 2))

Combine console.log with JSON.stringify

toSource()

على غرار JSON.stringify ، فإن toSource () هي طريقة متاحة في معظم الأنواع ،فقط في Firefox(والمتصفحات القائمة عليه):

Using toSource

تجدر الإشارة إلى أن JSON.stringify هو حل أفضل ، ولكن ليس معيارًا ، ويتم تنفيذه فقط في Firefox.

كرر الخصائص باستخدام حلقة

الfor...inloop مفيدة ، لأنها تطبع خصائص الكائن:

const inspect = obj => {
  for (const prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      console.log(`${prop}: ${obj[prop]}`)
    }
  }
}

inspect(car)

Looping properties

أنا أستعملhasOwnProperty()لتجنب طباعة الخصائص الموروثة.

يمكنك أن تقرر ما يجب القيام به في الحلقة ، وهنا نقوم بطباعة أسماء الخصائص والقيم إلى وحدة التحكم باستخدامconsole.log، ولكن يمكنك إضافتها إلى سلسلة ثم طباعتها على الصفحة.

كيفية الفحص في Node.js

طريقة التفتيش () التي كشف عنهاutilتعمل الحزمة بشكل رائع في Node.js:

util.inspect(car)

Use util.inspect in Node.js

ولكن ، يتم تقديم عرض أفضل بكثير من قبلconsole.dir()، مع الcolorsخاصية تمكين:

console.dir(car, { colors: true })

console.dir in Node with colors


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