نحوه نمایش آبجکت‌ها در جاوااسکریپت
هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object] خواهد بود.
برای نمایش صحیح جزئیات آبجکت، چند روش وجود دارد.
روش‌های نمایش آبجکت‌ها
- نمایش خصوصیات آبجکت به صورت دستی
- نمایش خصوصیات در یک حلقه
- استفاده از
Object.values() - استفاده از
JSON.stringify()
1. نمایش خصوصیات آبجکت به صورت دستی
می‌توانید خصوصیات آبجکت را به صورت رشته و جداگانه نمایش دهید.
مثال
// ایجاد یک آبجکت
const person = {
name: "John",
age: 30,
city: "New York"
};
// نمایش خصوصیات
document.getElementById("demo").innerHTML =
person.name + ", " + person.age + ", " + person.city;2. نمایش خصوصیات در یک حلقه
می‌توانید با استفاده از حلقه for...in خصوصیات را جمع‌آوری و نمایش دهید.
مثال
// ایجاد یک آبجکت
const person = {
name: "John",
age: 30,
city: "New York"
};
// ایجاد یک متن
let text = "";
for (let x in person) {
text += person[x] + " ";
}
// نمایش متن
document.getElementById("demo").innerHTML = text;نکته
- در حلقه باید از
person[x]استفاده کنید. person.xکار نمی‌کند، زیراxمتغیر حلقه است.
3. استفاده از Object.values()
متد Object.values() یک آرایه از مقادیر خصوصیات آبجکت ایجاد می‌کند.
مثال
// ایجاد یک آبجکت
const person = {
name: "John",
age: 30,
city: "New York"
};
// ایجاد یک آرایه
const myArray = Object.values(person);
// نمایش آرایه
document.getElementById("demo").innerHTML = myArray;4. استفاده از Object.entries()
متد Object.entries() یک آرایه شامل زوج‌های [کلید، مقدار] ایجاد می‌کند و کار با حلقه‌ها را ساده‌تر می‌کند.
مثال
const fruits = {Bananas: 300, Oranges: 200, Apples: 500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
}
// نمایش
document.getElementById("demo").innerHTML = text;5. استفاده از JSON.stringify()
با استفاده از متد JSON.stringify()، می‌توانید آبجکت را به یک رشته با فرمت JSON تبدیل کنید.
مثال
// ایجاد یک آبجکت
const person = {
name: "John",
age: 30,
city: "New York"
};
// تبدیل به رشته
let myString = JSON.stringify(person);
// نمایش رشته
document.getElementById("demo").innerHTML = myString;نکته
خروجی رشته به صورت JSON خواهد بود:
{"name":"John","age":30,"city":"New York"}جمع‌بندی
for...inبرای نمایش خصوصیات در حلقه.Object.values()برای دریافت آرایه‌ای از مقادیر.Object.entries()برای کار با زوج‌های [کلید، مقدار].JSON.stringify()برای تبدیل کل آبجکت به یک رشته JSON.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام