حلقه for...of | همه چیز از ES6 جاوااسکریپت

سلام دوستان! می‌خوایم با یک حلقه کوتاه‌تر و خواناتر به اسم for...of آشنا بشیم که برای حلقه زدن روی مقادیر قابل پیمایش به کار میره.

توی این قسمت یاد می‌گیریم که:

• حلقه for...of چیه
• مقدار قابل پیمایش یعنی چی
• چه مقادیری قابل پیمایش هستن
• حلقه for...of و آبجکت‌ها

حلقه for...of چیه؟ 🤔

با این حلقه می‌تونیم روی اعضای مقادیری که قابل پیمایش هستن مثل آرایه‌ها و رشته‌ها حلقه بزنیم. ساختار این حلقه به این صورت هست:

const numbers = [1, 2, 3];

for (const num of numbers) {
  alert(num);
}

چیزی که بعد از of قرار می‌گیره یک مقدار قابل پیمایش باید باشه که توی این مثال آرایهٔ numbers هست. حلقه روی اعضای این مقدار پیمایش انجام میده. برای دسترسی به عضوی که داره پیمایش روی اون انجام می‌گیره، باید یک متغیر (با اسم دلخواه) درست می‌کنیم که قبل از of قرار می‌گیره. توی این مثال اسم این متغیر رو گذاشتیم num. توی هر پیمایش یک متغیر اختصاصی به اسم num درست میشه که شامل مقدار عضوی هست که پیمایش داره روی اون انجام می‌گیره. این متغیر توی بدنه حلقه در دسترس هست و می‌تونیم از اون استفاده کنیم.

اگه بخوایم همین مثال رو با حلقه for معمولی بنویسیم:

const numbers = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  alert(numbers[i]);
}

می‌بینیم که چقدر کدنویسی اضافه باید انجام بدیم که باعث میشه خوانایی و تمیزی کدمون پایین بیاد.

const numbers = [1, 2, 3, 4, 5, 6];

for (const num of numbers) {
  if (num % 2 === 1) {
    <<continue;>>
  }

  alert(num);

  if (num >= 4) {
    <<break;>>
  }
}

مقدار قابل پیمایش یعنی چی؟

به مقادیری گفته میشه که از یک سری استانداردها و پروتکل‌ها پیروی می‌کنن تا بتونیم روی اعضای اونها به‌ترتیب پیمایش کنیم و به اونها دسترسی داشته باشیم. به پروتکلی که این مقادیر پیروی می‌کنن گفته میشه Iterator Protocol. مقادیری می‌تونن توی حلقه for...of قرار بگیرن که از این پروتکل پیروی کنن.

چه مقادیری قابل پیمایش هستن؟ 🤔

معروف‌ترین مقادیر قابل پیمایش توی جاوااسکریپت آرایه‌ها، رشته‌ها، آبجکت‌های Map ،Set، NodeList و arguements هستن. علاوه‌بر اینها، خودمون با استفاده از بعضی از قوانین و پروتکل‌ها می‌تونیم یک مقدار قابل پیمایش بسازیم.

توی کد زیر داریم از حلقه for...of برای یک رشته استفاده می‌کنیم:

for (const char of "Hello") {
  alert(char);
}

حلقه for...of و آبجکت‌ها

همونطور که می‌دونیم آبجکت‌ها جزو مقادیر قابل پیمایش نیستن و بنابراین نمی‌تونن توی این حلقه قرار بگیرن:

const user = {
  name: 'Emily',
  lastname: 'Emilyee',
  age: 4,
}

// TypeError: user is not iterable
for (const prop of user) {

}

اما شرایطی هست که می‌خوایم روی پراپرتی‌ها و مقدارشون حلقه بزنیم. ما با استفاده از متد keys از آبجکت سراسری Object می‌تونیم یک آرایه از همه پراپرتی‌های آبجکت داشته باشیم. بنابراین می‌تونیم از این آرایه توی حلقه for...of به این صورت استفاده کنیم:

const obj = {
  a: 'value-a',
  b: 'value-b',
  c: 'value-c',
}

>> const props = Object.keys(obj);
alert(props);

for (const prop of props) {
  alert(prop);
}

متد keys لیستی از کلید‌های (key) پراپرتی برمی‌گردونه. اگه بخوایم آرایه‌ای از مقادیر این پراپرتی‌ها داشته باشیم، از متد values استفاده می‌کنیم:

const obj = {
  a: 'value-a',
  b: 'value-b',
  c: 'value-c',
}

>> const props = Object.values(obj);
alert(props);

for (const prop of props) {
  alert(prop);
}

و در نهایت اگه بخوایم همزمان هم اسم پراپرتی و هم مقدارش رو داشته باشیم، از متد entries استفاده می‌کنیم. این متد یک آرایه برمی‌گردونه که شامل جفت آرایه‌هایی از کلید و مقدار یک آبجکت هست:

const obj = {
  a: 'value-a',
  b: 'value-b',
  c: 'value-c',
}

>> const pairs = Object.entries(obj);
console.log(pairs);

for (const pair of pairs) {
  alert(`${pair[0]} = ${pair[1]}`);
}

خب دوستان دیدیم که با این حلقه می‌تونیم طوری روی اعضای مقادیری مثل آرایه‌ها پیمایش بزنیم که کدهامون خلاصه‌تر و خواناتر باشه. برای ادامه آموزش به قسمت بعدی برید. روزتون خوش 😉✌️