حلقه‌های for...of و for...in
در for و while خودتان شمارنده را جلو می‌بردید. خیلی وقت‌ها داده از قبل یک فهرست یا شیء است — می‌خواهید هر مقدار را ببینید، یا هر کلید را، نه ایندکس دست‌ساز. for...of مقدار بعدی را از یک iterable می‌دهد. for...in کلید بعدی را روی یک شیء می‌دهد. همان خانوادهٔ «کار را تکرار کن»؛ چیزی که داخل متغیر حلقه می‌نشیند فرق دارد.
for...of چه کار می‌کند؟
برای هر مقدار داخل یک iterable یک‌بار بدنه را اجرا می‌کند. برای مبتدی، آرایه و رشته روزمره‌ترین‌اند. می‌نویسید for (const item of list) — هر دور، item همان مقدار بعدی است. مگر این‌که عمداً حلقهٔ ایندکسی بخواهید، دیگر i < list.length نمی‌نویسید.
for...of و for...in و حلقه‌های کلاسیک
📊 شکل‌های روزمرهٔ پیمایش
| شکل | متغیر حلقه چه دارد | کی جور است |
|---|---|---|
for...of |
یک مقدار از iterable | هر میوه در آرایه؛ هر حرف در رشته |
for...in |
یک کلید (نام ویژگی) روی شیء | هر نام فیلد روی شیء ساده |
for کلاسیک |
یک ایندکس که خودتان کنترل می‌کنید | وقتی عدد 0 و 1 و 2 لازم است |
while |
هر چه داخل بدنه به‌روز کنید | تا وقتی یک قاعده برقرار است |
برای for...of اول با آرایه شروع کنید. وقتی داستان «هر نام ویژگی روی این شیء» است سراغ for...in بروید. وقتی خودِ ایندکس مهم است، for کلاسیک بماند.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
مقدارهای آرایه را یکی‌یکی ببینید
هر دور یک رشته چاپ می‌شود: red بعد green بعد blue. متغیر حلقه خودِ مقدار است — نه 0 و 1 و 2. اگر فقط آیتم‌ها را می‌خواهید، for...of کوتاه‌تر از مدیریت ایندکس است.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
حرف‌های یک رشته را پیمایش کنید
رشته هم iterable است. اول h چاپ می‌شود، بعد i. هر کاراکتر یک مقدار است — برای کار حرف‌به‌حرف ساده، قبل از APIهای سنگین‌تر رشته، مفید است.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
با for...in کلیدها را ببینید
اینجا key اول "name" می‌شود، بعد "role". مقدار را با user[key] می‌خوانید. برای کلیدهای enumerable شیء ساده، for...in را ترجیح بدهید. برای خواندن مقدارهای آرایه اولین ابزارتان نباشد — آن کار for...of است.
قانون کوتاه را یادتان بماند: of → مقدار، in → کلید. قاطی کردن همین دو تا دام کلاسیک مبتدی است.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
از مقدارها یک پیام بسازید
هر دور یک حرف و یک خط تیره اضافه می‌کند. بعد از حلقه slice خط تیرهٔ آخر را برمی‌دارد و A-B-C می‌بینید. همان ایدهٔ چسباندن درس‌های قبلی حلقه — حالا پیمایش مستقیم روی مقدار است.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
کی حلقهٔ ایندکسی هنوز کمک می‌کند؟
for کلاسیک هم ایندکس را چاپ می‌کند هم مقدار را. for...of فقط مقدارها را. شمارهٔ جایگاه لازم است؟ همان for ایندکسی را نگه دارید. فقط آیتم‌ها را می‌خواهید؟ for...of را ترجیح بدهید.
نتیجهٔ for...of را روی صفحه نشان دهید
با for...of روی آرایه راه بروید، یک خط کوتاه بسازید، داخل صفحه بنویسید.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
صفحه list=tea milk honey را نشان می‌دهد. یکی از آیتم‌های آرایه را عوض کنید، رفرش کنید، خط تازه را بخوانید. برای مقدار for...of، برای کلید شیء for...in، و وقتی ایندکس مهم است for کلاسیک. جلسهٔ بعد با break و continue حلقه را وسط راه هدایت می‌کند.
خودتان امتحان کنید
- با
for...ofهر مقدار["a", "b", "c"]را لاگ کنید. - با
for...ofهر حرف"ok"را لاگ کنید. - روی
{ x: 1, y: 2 }باfor...inبنویسیدkey=value. - با
for...ofآرایهٔ["1", "2", "3"]را به1-2-3بچسبانید. - یک
forایندکسی بنویسید که ایندکس و مقدار را کنار هم چاپ کند. - در دموی HTML فقط آرایه را عوض کنید، رفرش کنید،
list=را بخوانید.
اشتباه‌های رایج
- نوشتن
for...inوقتی منظورتان مقدارهای آرایه بوده (for...of) - زدن
for...ofروی شیء ساده (برای مبتدی آن شیء آن‌طور iterable نیست) - انتظار ایندکس
0و1و2ازfor...of— مقدار می‌دهد، نه ایندکس - بعد از
for...inفراموش کردنuser[key]و فقط کلید را لاگ کردن وقتی مقدار هم لازم بوده - حلقهٔ ایندکسی بلند وقتی یک
for...ofروشن خواناتر است
خلاصه
for...ofروی مقدارهای iterable راه می‌رود (آرایه، رشته)for...inروی کلیدهای شیء راه می‌رود- وقتی شمارهٔ ایندکس لازم است،
forکلاسیک هنوز جایش است - برای یک شرط ادامه‌دار،
whileهنوز جایش است - پیام را با چسباندن مقدارها داخل بدنه بسازید
- بعدی: break و continue — توقف یا رد کردن یک دور
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود