آرایه‌ها
درس قبل واقعیت‌ها را به شکل متنی که بشود فرستاد نگه می‌داشت. اینجا فهرست داخل اسکریپت زنده است و می‌توانی خانه‌هایش را عوض کنی. سه اسم رنگ به ترتیب نشسته‌اند. به هر خانه با شماره اشاره می‌کنی، نه با کلید.
قفسه، نه یادداشت
کروشهٔ مربعی همان لحظه که اسکریپت اجرا می‌شود فهرست را می‌سازد و هر مقدار در یک خانهٔ شماره‌دار می‌نشیند. این متن JSON نیست که منتظر parse بماند، و آبجکتِ فیلدهای اسم‌دار هم نیست. معنیِ این ساختار در ترتیب خانه‌هاست.
اسم در برابر شماره
📊 آبجکتِ اسم‌دار در برابر آرایهٔ شماره‌دار
| سؤال | آبجکت | آرایه |
|---|---|---|
| چطور اشاره می‌کنی | کلیدی مثل name | اندیسی مثل ۰ |
| رنگ اول | فهرست رنگ نیست | colors[0] |
| چند تا | خودت کلیدها را می‌شماری | length |
| ترتیب | اصل ماجرا نیست | اصل ماجراست |
| بعد از درس JSON | یادداشتی دربارهٔ داده | فهرست زنده در اسکریپت |
آبجکت می‌پرسد کدام اسم را می‌خواهی، اما آرایه می‌پرسد کدام جایگاه را. رنگ اول colors[0] است و کلیدی لازم ندارد. آبجکت را داخل خانه گذاشتن مالِ درس‌های بعدی است.
کروشه، نه آکولاد
آکولاد درِ آبجکت است و کروشهٔ مربعی درِ آرایه. سه اسم رنگ یعنی سه خانه پشت سر هم. لیوانِ درس قبل یک فیلدِ اسم‌دار بود، نه فهرست. برای فهرستِ بدون اسم روی خانه‌ها، کروشه را نگه دار.
let colors = ["red", "green", "blue"];
console.log(colors[0]);
خانهٔ صفر اولین رنگ است
colors[0] مقدار red را چاپ می‌کند. شمارش از صفر شروع می‌شود نه از یک. اگر از یک شروع کنی، قرمز را جا می‌اندازی. خانهٔ دوم green است و خانهٔ سوم blue.
let colors = ["red", "green", "blue"];
console.log(colors.length);
console.log(colors[colors.length - 1]);
length تعداد خانه‌ها را می‌گوید
colors.length برابر ۳ است چون سه اسم ذخیره شده، و خانهٔ آخر colors[colors.length - 1] همان blue است. یکی کم می‌کنی چون اولین اندیس صفر است نه یک. length ویژگی است و پرانتز نمی‌خواهد.
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);
جایگزینی خانه، تعداد را عوض نمی‌کند
colors[1] = "gold" روی green را می‌نویسد. خواندن بعدی همان خانه gold است. length روی ۳ می‌ماند. خانهٔ موجود عوض شده، نه اینکه خانهٔ تازه اضافه شود. اضافه و حذف خانه مالِ درس متدهای آرایه است.
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);
اندیس خالی، خانهٔ تازه نیست
colors[9] چیزی ذخیره ندارد، پس خواندنش undefined است و length هنوز ۳ می‌ماند. خواندن خانهٔ خالی فهرست را درازتر نمی‌کند. نوشتن آن‌طرفِ آخر طول را زیاد می‌کند و حفره می‌سازد، و ابزار این صفحه نیست.
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);
تا می‌توانی یک جور مقدار بگذار
یک خانه می‌تواند رشته، عدد یا boolean نگه دارد. bag[1] عدد ۱۲ را چاپ می‌کند و typeof bag[0] برابر string است. فهرست رنگ‌ها از کیسهٔ مخلوط خواناتر است. زبان مخلوط را ممنوع نکرده.
رنگ اول را روی صفحه بگذار
اندیس صفر را بخوان و همان رشته را در پاراگراف بنویس. دو رنگ دیگر در فهرست بمانند.
<!DOCTYPE html>
<html>
<head>
<title>arrays — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let colors = ["red", "green", "blue"];
let box = document.getElementById("line");
box.textContent = colors[0];
</script>
</body>
</html>
پاراگراف red را نشان می‌دهد. فقط رشتهٔ اول داخل کروشه را عوض کن و صفحه را تازه کن تا همان خط عوض شود. دو رنگ دیگر ذخیره می‌مانند ولی روی پاراگراف نوشته نمی‌شوند.
قدم‌های تمرین
- سه رنگ را بساز و اندیس صفر را بخوان، بعد طول را بخوان و با طول منهای یک به رنگ آخر برس.
- اندیس ۱ را
goldکن و همان خانه و طول را بخوان. - اندیس ۹ را بخوان و مطمئن شو طول هنوز ۳ است، و در کیسهٔ مخلوط عدد و نوع خانهٔ اول را ببین.
- در نمونهٔ HTML فقط رنگ اول را عوض کن، تازه کن، و پاراگراف را بخوان.
لغزش‌های رایج
- از یک شمردن و جا انداختن رنگ اول، و صدا زدن
lengthبا پرانتز انگار تابع است - آرایه را متن
JSONدیدن و دادنش بهparse - انتظار اینکه فقط با خواندن اندیس خالی
lengthزیاد شود، یا اینکه جایگزینی خانه یعنی افزودن مورد تازه - دنبال متدهای آرایه گشتن در همین صفحه
جمع‌بندی
- آرایه فهرست زندهٔ داخل اسکریپت است و کروشهٔ مربعی آن را می‌سازد
- اندیس صفر اولین مورد است
lengthتعداد خانه‌هاست و پرانتز نمی‌گیرد- نوشتن روی اندیس موجود همان خانه را عوض می‌کند، و خواندنِ بعد از آخر
undefinedاست بی‌آنکه طول عوض شود - مورد اول می‌تواند یک خط صفحه را پر کند، و درس بعد متدهای آرایه است برای اضافه و حذف خانه
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود