در حال بارگذاری...

ویژگی‌های آبجکت

لیترال را نوشته‌اید و با نقطه هم به فیلد رسیده‌اید. از اینجا خودِ داده تکان می‌خورد: خریدار رنگ را انتخاب می‌کند و ویژگی تازه‌ای سر می‌رسد، با ذخیره پرچم پیش‌نویس می‌رود، و شهر داخل نشانی می‌ماند. این صفحه همان رفت‌وآمد روزمره با ویژگی‌هاست.

بعد از اولین لیترال

صفحهٔ آبجکت‌ها کیسه را ساخت و یک فیلد را خواند. اینجا دست روی «کدام کلیدها هستند» می‌گذارید: نامی که نبود را می‌آورید، نامی که دیگر لازم نیست را برمی‌دارید، می‌پرسید این نام هست یا نه، داخل آبجکتی که خودش درون دیگری است قدم می‌گذارید، و نام‌هایی را که واقعاً نگه داشته‌اید فهرست می‌کنید.

پنج حرکت روی ویژگی

📊 افزودن، حذف، آزمون، تو در تو، فهرست

حرکت نحو چه به دست می‌آید
افزودن item.color = "blue" ویژگی تازه روی همان آبجکت
حذف delete item.draft آن کلید دیگر نیست
وجود "sku" in item true یا false
تو در تو user.address.city فیلدی داخل آبجکت دیگر
فهرست Object.keys(user) آرایهٔ کلیدهای خودِ آبجکت

اسم حرکت را که بدانید، خطش معلوم است. افزودن، آبجکت دومی نمی‌سازد. حذف، مقدار را به رشتهٔ خالی بدل نمی‌کند. فهرست نام‌ها با خواندن یک مقدار یکی نیست.

افزودن ویژگی‌ای که در لیترال نبود

javascript 
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);

اگر کلید نباشد، انتساب خودش آن را می‌سازد

item اول فقط name و price داشت. color در کار نبود؛ خط item.color = "blue" همان ویژگی را به وجود می‌آورد. آبجکت همان است، فقط یک ویژگی بیشتر دارد. در کنسول blue را می‌بینید.

برداشتن ویژگی با delete

javascript 
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);

delete همان کلید را برمی‌دارد

delete item.draft همان ویژگی را برمی‌دارد، نه کل آبجکت را. بعدش "draft" in item برابر false است. نام و قیمت سر جایشان می‌مانند. ذخیرهٔ "" یا null کار دیگری است: کلید می‌ماند و فقط مقدارش عوض می‌شود.

بپرسید کلید هست یا نه

javascript 
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);

in دربارهٔ خودِ کلید بله یا نه می‌گوید

"name" in item برابر true است — آن نام روی آبجکت هست. "sku" in item برابر false است — هرگز اضافه‌اش نکرده‌اید. ویژگیِ غایب موقع خواندن undefined می‌دهد، و undefined ذخیره‌شده هم همین‌طور خوانده می‌شود. in از کلید می‌پرسد، نه از مقداری که آن‌جا نشسته.

خواندن فیلد داخل آبجکت تو در تو

javascript 
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);

ویژگی می‌تواند آبجکت دیگری را نگه دارد

address رشته نیست. آبجکتی است با city و zip. عبارت user.address.city دو قدم است: اول داخل address، بعد داخل city. کنسول Shiraz را چاپ می‌کند. تو در تو بودن تکه‌های نشانی را کنار هم نگه می‌دارد تا هر کدام را صاف روی user پهن نکنید.

فهرست کلیدهای خودِ آبجکت

javascript 
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);

Object.keys اسم کلیدها را برمی‌گرداند

Object.keys(user) آرایه‌ای از کلیدهای خودِ همان آبجکت می‌دهد — اینجا ["name", "role"]. مقدار را جداگانه، با نقطه یا براکت، می‌خوانید. وقتی نمی‌خواهید تک‌تک نام‌ها را از قبل در کد بنویسید، همین فهرست کافی است. مقدارها را خودش چاپ نمی‌کند.

قبل از نوشتن، کار را مشخص کنید

ویژگی نو لازم است؟ مقدار بدهید. کلید باید برود؟ delete. فقط می‌خواهید بدانید هست یا نه؟ in. شهر داخل نشانی است؟ تو در تو بنویسید و با نقطه‌ها جلو بروید. فقط اسم کلیدها را می‌خواهید؟ Object.keys. تابع‌هایی که روی خودِ آبجکت می‌نشینند — متدها — برای درس بعدی‌اند.

بعد از افزودن، شهر تو در تو را روی صفحه بگذارید

کاربر و نشانی را شروع کنید، داخل اسکریپت plan را اضافه کنید، و شهر را در پاراگراف بنشانید.

دموی صفحه — شهر تو در تو

html 
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>

پاراگراف Shiraz — yearly را نشان می‌دهد. شهر از قبل تو در تو بود؛ plan بعد از لیترال رسید. فقط city یا plan را عوض کنید، تازه کنید، و خط جدید را بخوانید. درس بعد: متدهای آبجکت — تابع‌هایی که روی آبجکت زندگی می‌کنند.

گام‌های تمرین

  1. آبجکتی با دو ویژگی بسازید، سومی را با انتساب اضافه کنید و چاپش کنید.
  2. ویژگی draft بگذارید، با delete بردارید، و "draft" in item را چک کنید.
  3. روی آبجکتی که فقط name دارد، "name" in item و "sku" in item را چاپ کنید.
  4. address را با city تو در تو کنید، بعد user.address.city را چاپ کنید.
  5. Object.keys را برای آبجکتی با دو کلید چاپ کنید و آرایه را بخوانید.
  6. در دموی HTML فقط city یا plan را عوض کنید، تازه کنید، پاراگراف را بخوانید.

لغزش‌های پرتکرار

  • خیال کنید item.color = "blue" آبجکت کاملاً تازه می‌سازد — همان قبلی را بزرگ می‌کند
  • به‌جای delete item.draft بنویسید item.draft = null — کلید می‌ماند
  • کلید غایب و undefined ذخیره‌شده را یک سؤال بدانید — برای خودِ کلید از in استفاده کنید
  • user.city بنویسید در حالی که city روی user.address نشسته
  • انتظار داشته باشید Object.keys مقدارها را برگرداند
  • در همین صفحه دنبال متد و this بگردید — آن درس بعدی است

جمع‌بندی

  • انتساب به کلیدِ نبود، همان ویژگی را اضافه می‌کند
  • delete کلید را برمی‌دارد؛ بقیهٔ آبجکت می‌ماند
  • "key" in obj می‌گوید آن کلید هست یا نه
  • ویژگی می‌تواند آبجکت دیگری نگه دارد؛ نقطه‌های بیشتر داخلش راه می‌روند
  • Object.keys نام‌ها را برمی‌گرداند نه مقدارها را
  • فیلد تو در تو و فیلدی که تازه اضافه شده می‌توانند روی صفحه در یک خط دیده شوند
  • بعدی: متدهای آبجکت — تابع‌های ذخیره‌شده روی آبجکت

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 34 از 36
Javascript آموزش