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

حلقه ها به ما امکان می دهند مواردی را در آرایه ها یا اشیا دور بزنیم و کارهایی مانند چاپ آنها ، اصلاح آنها یا انجام انواع دیگر کارها یا اقدامات را انجام دهیم. انواع مختلفی از حلقه ها در جاوا اسکریپت وجود دارد که یکی از آنها حلقه for in in است.

در این مقاله ، ما با for...in حلقه جاوا اسکریپت ارائه می دهد. ما نگاه خواهیم کرد که چگونه for...in حلقه در جاوا اسکریپت ، نحو آن ، نمونه هایی از نحوه عملکرد ، زمان استفاده ، زمان عدم استفاده از آن و انواع دیگر حلقه ها به جای آن استفاده می شود.

چرا از حلقه ها استفاده کنید

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

دو راه برای دسترسی به یک مورد در مجموعه وجود دارد. اولین راه از طریق کلید آن در مجموعه است که یک شاخص در یک آرایه یا یک ویژگی در یک شی است. راه دوم از طریق خود مورد ، بدون نیاز به کلید است.

تعریف حلقه for… در حلقه

جاوا اسکریپت for...in حلقه کلیدهای یک مجموعه را طی می کند یا تکرار می کند. با استفاده از این کلیدها ، می توانید به موردی که در مجموعه نشان می دهد دسترسی پیدا کنید.

مجموعه آیتم ها می تواند آرایه ها ، اشیاء یا حتی رشته ها باشد.

نحو for… in Loop

این for...in حلقه دارای نحو یا ساختار زیر است:

for (let key in value) {
  
}

در این بلوک کد ، value مجموعه مواردی است که ما در حال تکرار آن هستیم. این می تواند یک شی ، آرایه ، رشته و غیره باشد. key کلید هر مورد در خواهد بود value، در هر تکرار به کلید بعدی در لیست تغییر دهید.

توجه داشته باشید که ما استفاده می کنیم let یا const اعلام keyبه

استفاده از for … در حلقه با اشیاء

هنگام استفاده از for...in حلقه ای برای تکرار یک شی در جاوا اسکریپت ، کلیدها یا ویژگی های تکرار شده – که در قطعه بالا ، با key متغیر – ویژگیهای خود شی است.

از آنجا که اشیا ممکن است مواردی را از طریق زنجیره نمونه ، که شامل روشها و ویژگیهای پیش فرض Objects و همچنین نمونه اولیه Object است که ممکن است تعریف کنیم ، به ارث برسانند ، باید از hasOwnPropertyبه

مثال برای … در شیء حلقه مثال

در مثال زیر ، ما روی متغیر زیر حلقه می زنیم obj:

const obj = {
  1: "JavaScript",
  3: "PHP",
  2: "Python",
  4: "Java"
};

در حلقه ، ما ویژگی و مقدار را در a ارائه می دهیم <div> عنصر

قلم را ببینید
حلقه اجسام توسط SitePoint (SitePoint)
بر CodePenبه

توجه کنید که ترتیب تکرار برای کلیدها صعودی است (یعنی با ارقام به ترتیب عددی و سپس حروف به ترتیب حروف الفبا شروع می شود). با این حال ، این ترتیب خروجی با ترتیب فهرست مواردی که هنگام راه اندازی اولیه شی ایجاد می شود متفاوت است.

استفاده از for … in Loop with Arrays

هنگام استفاده از for...in حلقه برای تکرار آرایه ها در جاوا اسکریپت ، key در این مورد شاخص های عناصر خواهد بود. با این حال ، ممکن است شاخص ها به ترتیب تصادفی تکرار شوند.

بنابراین ، اگر value متغیر در for...in ساختار نحوی حلقه که در بالا نشان دادیم یک آرایه از پنج مورد بود ، key 0 تا 4 تضمین نمی شود که برخی از شاخص ها ممکن است قبل از دیگران باشند. جزئیات زمان وقوع چنین اتفاقی بعداً در این مقاله توضیح داده شده است.

برای … در مثال آرایه حلقه

در مثال زیر ، ما روی متغیر زیر حلقه می زنیم arr:

const arr = ["Javascript", "PHP", "Python", "Java"];

و در حلقه ، ما شاخص و مقدار هر عنصر آرایه را ارائه می دهیم.

قلم را ببینید
حلقه های آرایه توسط SitePoint (SitePoint)
بر CodePenبه

استفاده از for … in Loop with Strings

با جاوا اسکریپت می توانید یک رشته را حلقه کنید for...in حلقه با این حال ، انجام این کار توصیه نمی شود ، زیرا شما بیش از خود کاراکترها ، روی شاخص های شخصیت ها حلقه می زنید.

مثال برای … در رشته حلقه حلقه

در مثال زیر ، ما روی متغیر زیر حلقه می زنیم str:

const str = "Hello, World!";

در داخل حلقه ، ما کلید یا نمای هر کاراکتر و کاراکتر آن را نمایش می دهیم.

قلم را ببینید
حلقه رشته ای توسط SitePoint (SitePoint)
بر CodePenبه

چه موقع از حلقه for… استفاده کنید

بیایید به موقعیت هایی که جاوا اسکریپت دارد نگاه کنیم for...in حلقه مناسب ترین است.

تکرار اشیاء با یک جاوا اسکریپت برای … در حلقه

از آنجا که for...in حلقه فقط خواص قابل شمارش یک شی را تکرار می کند – که بیشتر از آنکه خواصی مانند خواص خود شی باشد toString که بخشی از نمونه اولیه شی هستند – خوب است از a استفاده کنید for...in برای تکرار اشیاء حلقه کنید. آ for...in حلقه راهی آسان برای تکرار ویژگی های یک شی و در نهایت مقادیر آن است.

اشکال زدایی با حلقه for…

مورد استفاده خوب دیگر برای جاوا اسکریپت for...in حلقه اشکال زدایی می کند به عنوان مثال ، ممکن است بخواهید ویژگی های یک شی و مقادیر آن را روی کنسول یا عنصر HTML چاپ کنید. در این مورد ، for...in حلقه انتخاب خوبی است

هنگام استفاده از for...in برای اشکال زدایی اشیاء و مقادیر آنها ، همیشه باید در نظر داشته باشید که تکرارها منظم نیستند ، به این معنی که ترتیب مواردی که حلقه تکرار می کند می تواند تصادفی باشد. بنابراین ، ترتیب خواص دسترسی ممکن است آنطور که انتظار می رود نباشد.

هنگامی که از JavaScript برای… در حلقه استفاده نمی کنید

حال بیایید موقعیت هایی را بررسی کنیم که الف for...in حلقه بهترین گزینه نیست

تکرار منظم آرایه ها

به عنوان ترتیب فهرست در تکرارها هنگام استفاده از ضمانت نمی شود for...in حلقه ، توصیه می شود در صورت لزوم حفظ نظم ، آرایه ها تکرار نشوند.

این امر به ویژه در صورتی که به دنبال پشتیبانی از مرورگرهایی مانند IE هستید ، که به ترتیب موارد ایجاد می شوند و نه به ترتیب شاخص ها ، تکرار می شود ضروری است. این با نحوه عملکرد مرورگرهای امروزی متفاوت است ، که آرایه ها را بر اساس شاخص ها به ترتیب صعودی تکرار می کند.

به عنوان مثال ، اگر شما یک آرایه از چهار مورد دارید و یک مورد را در موقعیت سه قرار می دهید ، در مرورگرهای مدرن ، for...in حلقه همچنان آرایه را به ترتیب از 0 تا 4 تکرار می کند. در IE ، هنگام استفاده از a for...in حلقه ، چهار موردی را که در ابتدا در ابتدا در آرایه بود تکرار می کند و سپس به موردی که در موقعیت سوم اضافه شده است می رسد.

ایجاد تغییرات در حین تکرار

هرگونه افزودن ، حذف یا تغییر در ویژگی ها تکرار منظم را تضمین نمی کند. ایجاد تغییرات در خواص در a for...in از حلقه باید اجتناب شود این بیشتر به دلیل ماهیت نامنظم آن است.

بنابراین ، اگر یک مورد را قبل از رسیدن به آن در تکرار حذف کنید ، به هیچ وجه در کل حلقه بازدید نمی شود.

به طور مشابه ، اگر تغییراتی را در یک ویژگی ایجاد کنید ، تضمین نمی کند که مورد دوباره بازبینی شود. بنابراین ، اگر یک ویژگی تغییر کند ، ممکن است دو بار در حلقه بازدید شود تا یک بار.

علاوه بر این ، اگر یک ویژگی در طول تکرار اضافه شود ، ممکن است در طول تکرار به هیچ وجه از آن بازدید نشود.

با توجه به این شرایط ، بهتر است از هرگونه تغییر ، حذف یا افزودن به یک شی در a اجتناب کنید for...in حلقه

در اینجا مثالی از افزودن یک عنصر در a آورده شده است for...in حلقه ما می توانیم نتیجه حلقه اول و سپس دوم را پس از افزودن در حلقه اول مشاهده کنیم.

قلم را ببینید
افزودن در حلقه شی توسط SitePoint (SitePoint)
بر CodePenبه

همانطور که در مثال بالا مشاهده می کنید ، عناصری که اضافه شده اند تکرار نشده اند.

انواع حلقه های جایگزین

بنابراین در شرایطی که الف for...in حلقه بهترین گزینه نیست ، در عوض از چه چیزی باید استفاده کنید؟ بیا یک نگاهی بیندازیم.

استفاده از حلقه for با آرایه ها

استفاده از a هرگز اشتباه نیست for حلقه! جاوا اسکریپت for حلقه یکی از اساسی ترین ابزارها برای حلقه زدن روی عناصر آرایه است. این for حلقه به شما اجازه می دهد تا هنگام تکرار یک آرایه ، کنترل کامل شاخص ها را در دست بگیرید.

این بدان معناست که هنگام استفاده از for حلقه ، می توانید به جلو و عقب حرکت کنید ، آیتم ها را در آرایه تغییر دهید ، آیتم ها را اضافه کنید ، و موارد دیگر ، در حالی که هنوز نظم آرایه را حفظ می کنید.

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

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

forEach متد برای آرایه ها و اشیاء

برای هر در جاوا اسکریپت روشی برای نمونه های اولیه آرایه است که به ما امکان می دهد عناصر یک آرایه و شاخص های آنها را در یک تابع callback تکرار کنیم.

توابع پاسخ به تماس توابعی هستند که به روش یا تابع دیگری منتقل می کنید تا به عنوان بخشی از اجرای آن روش یا تابع اجرا شود. وقتی نوبت به موضوع می رسد forEach در جاوا اسکریپت ، به این معنی است که عملکرد callback برای هر تکرار که مورد فعلی را در تکرار به عنوان پارامتر دریافت می کند ، اجرا می شود.

به عنوان مثال ، عبارت زیر روی متغیر تکرار می شود arr و مقادیر آن را با استفاده از کنسول چاپ می کند forEach:

arr.forEach((value) => console.log(value));

همچنین می توانید به فهرست آرایه دسترسی پیدا کنید:

arr.forEach((value, index) => console.log(value, index));

جاوا اسکریپت forEach حلقه ها همچنین می توانند برای تکرار اشیاء با استفاده از آنها استفاده شوند Object.keys ()، با ارسال شیئی که می خواهید تکرار شود ، آرایه ای از خصوصیات خود شیء را برمی گرداند:

Object.keys(obj).forEach((key) => console.log(obj[key]));

متناوبا ، شما می توانید forEach اگر نیازی به دسترسی به ویژگیها با استفاده از مقادیر خواص ندارید ، Object.values ​​():

Object.values(obj).forEach((value) => console.log(value));

توجه داشته باشید که Object.values() موارد را به همان ترتیب باز می گرداند for...inبه

نتیجه

با استفاده از جاوا اسکریپت for...in حلقه ، ما می توانیم کلیدها یا ویژگی های یک شی را حلقه کنیم. این می تواند هنگام تکرار ویژگی های شی یا اشکال زدایی مفید باشد ، اما هنگام تکرار آرایه ها یا ایجاد تغییرات در شیء باید از آن اجتناب کرد. امیدوارم مثالها و توضیحات بالا مفید واقع شده باشد.

اگر دوست دارید در مورد آن بیشتر بدانید for...in حلقه ها ، از جمله پشتیبانی مرورگر و نمونه های استفاده ، از آنها دیدن کنید اسناد موزیلابه