الجسم العرضي في JavaScript

كيف يمكن عرض موضوع JavaScript؟

يظهر JavaScript الموضوع سيزيد من المخرجات [object Object].

مثال

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

جرب بنفسك

بعض الحلول الشائعة لعرض جسم JavaScript هي:

  • عرض خصائص الجسم بناءً على الاسم
  • عرض خصائص الجسم في الدورة
  • استخدام Object.values() لعرض الجسم
  • استخدام JSON.stringify() لعرض الجسم

عرض خصائص الجسم

يمكن عرض خصائص الجسم كنص:

مثال

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

جرب بنفسك

عرض الجسم في الدورة

يمكن جمع خصائص الجسم في الدورة:

مثال

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

جرب بنفسك

يجب عليك استخدام person[x] في الدورة.

person.x لن يكون له تأثير ( لأن x هو متغير).

استخدام Object.values()

من خلال استخدام Object.values()، يمكن تحويل أي جسم JavaScript إلى مصفوفة:

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray الآن هو مصفوفة JavaScript، يمكن عرضها:

مثال

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

جرب بنفسك

منذ 2016، جميع المتصفحات الرئيسية تدعمها Object.values().

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

استخدام JSON.stringify()

يمكن استخدام أي جسم JavaScript بواسطة وظيفة JavaScript JSON.stringify() تحويل إلى نص (تحويل إلى نص):

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString الآن هو نص JavaScript، يمكن عرضه:

مثال

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

جرب بنفسك

النتيجة ستكون سلسلة تتبع علامات JSON:

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() مضمنة في JavaScript، جميع المتصفحات الرئيسية تدعمها.

تحويل التاريخ إلى نص

JSON.stringify تحويل التاريخ إلى نص:

مثال

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

جرب بنفسك

تشفير الدوال

JSON.stringify لن يتم تعريف الدوال كسلاسل نصية:

مثال

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

جرب بنفسك

إذا تم تحويل الدوال إلى سلاسل نصية قبل التشفير، يمكن أن تكون "محددة".

مثال

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

جرب بنفسك

تحويل مجموعات JS إلى سلاسل نصية

يمكن أيضًا تحويل مجموعات JavaScript إلى سلاسل نصية:

مثال

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

جرب بنفسك

النتيجة ستكون سلسلة تتبع علامات JSON:

["Bill","Steve","Elon","David"]