نمایش اشیاء JavaScript

قبلی بعدی

نمایش اشیاء در JS

چگونه اشیاء جاوا اسکریپت نمایش داد میشود؟

نمایش یک شی جاوا اسکریپت خروجی [object Object] خواهد داشت.

const person = {
  name: "Ehsan",
  age: 30,
  city: "Iran"
};
document.getElementById("demo").innerHTML = person;

برخی از راه حل ها برای نمایش اشیاء جاوا اسکریپت هستند

نمایش مشخصات شیء با نام
نمایش ویژگی های شی در یک حلقه
نمایش شی با استفاده از Object.values()
نمایش شی با استفاده از JSON.stringify()

نمایش ویژگی های شیء در JS

ویژگی‌های یک شیء می‌تواند به صورت یک رشته نمایش داده شود.

const person = {
  name: "Ehsan",
  age: 30,
  city: "Iran"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

نمایش ویژگی ها در یک حلقه در JS

ویژگی های یک شی را می توان در یک حلقه جمع آوری کرد

// اشیا جدید ایجاد کنید 
const person = {
  name: "Ehsan",
  age: 30,
  city: "Iran"
};
// یک متن بسازید
let text = "";
for (let x in person) {
  text += person[x] + " ";
};
document.getElementById("demo").innerHTML = text;

نکته: باید در حلفه از person[x] استفاده کرد و person.x خطا میدهد چون x در حلقه یک متغیر است.

متد ()Object.values در JS

متد ()Object.values ابزار بسیار مفیدی است که تمام مقادیر اموال شمارش پذیر را از یک شی استخراج می کند و این مقادیر را در قالب یک آرایه برمی گرداند. این کار با داده های شی را بسیار ساده ترمی کند.

// اشیا جدید
const person = {
  name: "Ehsan",
  age: 30,
  city: "Iran"
};
// یک آرایه بسازید
const myArray = Object.values(person);

document.getElementById("demo").innerHTML = myArray;

متد ()Object.entries در JS

متد ()Object.entries، می‌تواند به راحتی ویژگی‌های شمارش‌پذیر یک شی را به صورت جفت [key, value] تکرار کند، و فرآیند حلقه زدن در میان اشیا را ساده می‌کند.

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

متد ()JSON.stringify در JS

اشیاء در جاوا اسکریپت می‌توانند با استفاده از متد ()JSON.stringify به رشته تبدیل شوند.

//اشیا جدید
const person = {
  name: "Ehsan",
  age: 30,
  city: "Iran"
};
let myString = JSON.stringify(person);

document.getElementById("demo").innerHTML = myString;

خلاصه درس

تمرین

مشاهده پاسخ

قبلی بعدی

توسعه دهندگان

احسان اسلامی