آموزش جاوا اسکریپت مبتدی : حلقه ها در کد
زبانهای برنامهنویسی برای انجام سریع کارهای تکراری، از محاسبات پایه چندگانه گرفته تا تقریباً هر موقعیت دیگری که در آن تعداد زیادی کار مشابه برای انجام دادن دارید، بسیار مفید هستند. در اینجا به ساختارهای حلقهای موجود در جاوا اسکریپت که چنین نیازهایی را برطرف میکنند، نگاهی خواهیم انداخت.
حلقهها در مورد انجام یک کار بارها و بارها هستند. اغلب، کد هر بار که حلقه را دور میزند کمی متفاوت خواهد بود، یا همان کد اجرا میشود اما با متغیرهای متفاوت.
فرض کنید میخواهیم ۱۰۰ دایره تصادفی روی یک عنصر رسم کنیم (برای مشاهده مجموعههای تصادفی مختلف، دکمه بهروزرسانی را فشار دهید تا مثال بارها و بارها اجرا شود):
کد جاوا اسکریپتی که این مثال را پیادهسازی میکند، به صورت زیر است:
فعلاً لازم نیست همه کد را بفهمید، اما بیایید به بخشی از کد که در واقع ۱۰۰ دایره را رسم میکند، نگاهی بیندازیم:
شما باید ایده اولیه را متوجه شده باشید - ما از یک حلقه برای اجرای ۱۰۰ تکرار این کد استفاده میکنیم که هر کدام یک دایره را در یک موقعیت تصادفی روی صفحه رسم میکنند. که قبلاً در کد تعریف شده است، یک عدد صحیح بین ۰ تا x-1 را برمیگرداند. مقدار کد مورد نیاز چه ۱۰۰ دایره، چه ۱۰۰۰ یا ۱۰۰۰۰ دایره رسم کنیم، یکسان خواهد بود. فقط یک عدد باید تغییر کند.
اگر در اینجا از حلقه استفاده نمیکردیم، باید کد زیر را برای هر دایرهای که میخواستیم رسم کنیم تکرار میکردیم:
این خیلی خسته کننده و نگهداری آن سخت میشود.
اغلب اوقات وقتی از حلقه استفاده میکنید، مجموعهای از آیتمها را خواهید داشت و میخواهید با هر آیتم کاری انجام دهید.
یکی از انواع مجموعهها، آرایه است که در فصل آرایهها در این دوره با آن آشنا شدیم. اما مجموعههای دیگری نیز در جاوا اسکریپت وجود دارند، از جمله و .
ابزار اصلی برای پیمایش حلقه در یک مجموعه، حلقه است:
در این مثال، میگوید:
۱- با توجه به مجموعه cats، اولین آیتم موجود در مجموعه را دریافت کنید.
۲- آن را به متغیر cat اختصاص دهید و سپس کد را بین آکولادهای {} اجرا کنید.
۳- مورد بعدی را دریافت کنید و (2) را تا رسیدن به انتهای مجموعه تکرار کنید.
جاوا اسکریپت همچنین حلقههای تخصصیتری برای مجموعهها دارد و ما در اینجا به دو مورد از آنها اشاره خواهیم کرد.
شما میتوانید از برای انجام کاری روی هر آیتم در یک مجموعه استفاده کنید و یک مجموعه جدید حاوی آیتمهای تغییر یافته ایجاد کنید:
در اینجا ما یک تابع را به ارسال میکنیم و برای هر آیتم در آرایه، یک بار تابع را فراخوانی میکند و آیتم را ارسال میکند. سپس مقدار بازگشتی از هر فراخوانی تابع را به یک آرایه جدید اضافه میکند و در نهایت آرایه جدید را برمیگرداند. در این حالت، تابعی که ارائه میدهیم، آیتم را به حروف بزرگ تبدیل میکند، بنابراین آرایه حاصل شامل تمام گربههای ما با حروف بزرگ است:
شما میتوانید از برای بررسی تک تک آیتمهای یک مجموعه استفاده کنید و یک مجموعه جدید ایجاد کنید که فقط شامل آیتمهایی باشد که با آن مطابقت دارند:
این خیلی شبیه است، با این تفاوت که تابعی که به آن ارسال میکنیم یک مقدار بولی برمیگرداند: اگر مقدار true را برگرداند، آنگاه آیتم در آرایه جدید گنجانده شده است. تابع ما بررسی میکند که آیتم با حرف "L" شروع میشود، بنابراین نتیجه آرایهای است که فقط شامل گربههایی است که نام آنها با "L" شروع میشود:
توجه داشته باشید که و هر دو اغلب با عبارات تابعی استفاده میشوند، که در درس توابع با آنها آشنا خواهید شد. با استفاده از عبارات تابعی میتوانیم مثال بالا را به صورت بسیار خلاصهتر بازنویسی کنیم:
در مثال «ترسیم دایرهها» در بالا، شما مجموعهای از آیتمها را برای پیمایش ندارید: شما واقعاً میخواهید یک کد را ۱۰۰ بار اجرا کنید. در چنین حالتی، میتوانید از حلقه استفاده کنید. این حلقه دارای سینتکس زیر است:
در اینجا داریم:
کلمه کلیدی for و به دنبال آن چند پرانتز.
درون پرانتزها سه مورد داریم که با نقطه ویرگول از هم جدا شدهاند:
یک مقداردهی اولیه - این معمولاً متغیری است که با یک عدد تنظیم شده است و برای شمارش تعداد دفعات اجرای حلقه افزایش مییابد. همچنین گاهی اوقات به عنوان متغیر شمارنده نیز شناخته میشود.
یک شرط - این تعریف میکند که حلقه چه زمانی باید متوقف شود. این عموماً عبارتی است که شامل یک عملگر مقایسه است، آزمایشی برای بررسی اینکه آیا شرط خروج برآورده شده است یا خیر.
یک عبارت نهایی - این همیشه هر بار که حلقه یک تکرار کامل را طی کرده است، ارزیابی (یا اجرا) میشود. معمولاً برای افزایش (یا در برخی موارد کاهش) متغیر شمارنده عمل میکند تا آن را به نقطهای که شرط دیگر درست نیست، نزدیکتر کند.
چند آکولاد که حاوی یک بلوک کد هستند - این کد هر بار که حلقه تکرار میشود، اجرا خواهد شد.
بیایید به یک مثال واقعی نگاه کنیم تا بتوانیم عملکرد اینها را واضحتر تجسم کنیم.
این کد مربع اعداد ۱ تا ۹ را محاسبه کرده و نتیجه را مینویسد. هسته اصلی کد، حلقه for است که محاسبه را انجام میدهد.
بیایید خط را به سه بخش تقسیم کنیم:
: متغیر شمارنده، i، از ۱ شروع میشود. توجه داشته باشید که باید از let برای شمارنده استفاده کنیم، زیرا هر بار که حلقه را دور میزنیم، آن را دوباره مقداردهی میکنیم.
: تا زمانی که i کوچکتر از ۱۰ باشد، حلقه را دور میزنیم.
: هر بار دور زدن حلقه، یک واحد به i اضافه میکنیم.
در داخل حلقه، مربع مقدار فعلی i را محاسبه میکنیم، یعنی: . ما یک رشته ایجاد میکنیم که محاسبه انجام شده و نتیجه را بیان میکند و این رشته را به متن خروجی اضافه میکنیم. همچنین را اضافه میکنیم، بنابراین رشته بعدی که اضافه میکنیم در یک خط جدید شروع میشود. بنابراین:
در طول اجرای اول، i = ۱ است، بنابراین ۱ ضربدر ۱ = ۱ را جمع میکنیم.
در طول اجرای دوم، i = ۲ است، بنابراین ۲ ضربدر ۲ = ۴ را جمع میکنیم.
و به همین ترتیب…
وقتی i برابر با ۱۰ شود، اجرای حلقه را متوقف کرده و مستقیماً به بخش بعدی کد زیر حلقه میرویم و پیام را در یک خط جدید چاپ میکنیم.
پیمایش مجموعهها با حلقه for
شما میتوانید به جای حلقه از حلقه for برای پیمایش در یک مجموعه استفاده کنید.
بیایید دوباره به مثال در بالا نگاه کنیم:
ما میتوانیم آن کد را به این صورت بازنویسی کنیم:
در این حلقه، ما i را از ۰ شروع میکنیم و وقتی i به طول آرایه میرسد، متوقف میشویم. سپس درون حلقه، از i برای دسترسی به هر آیتم در آرایه به نوبت استفاده میکنیم.
این روش به خوبی کار میکند، و در نسخههای اولیه جاوا اسکریپت، وجود نداشت، بنابراین این روش استاندارد برای تکرار در یک آرایه بود. با این حال، احتمال بیشتری برای ایجاد اشکالات در کد شما ایجاد میکند. به عنوان مثال:
ممکن است i را از ۱ شروع کنید، فراموش کنید که اولین اندیس آرایه صفر است، نه ۱.
ممکن است در متوقف شوید، فراموش کنید که آخرین اندیس آرایه در است.
به دلایلی مانند این، معمولاً بهتر است در صورت امکان از استفاده کنید.
گاهی اوقات هنوز هم برای تکرار در یک آرایه نیاز به استفاده از حلقه for دارید. به عنوان مثال، در کد زیر میخواهیم پیامی را که لیست گربههای ما را نشان میدهد، ثبت کنیم:
جملهی خروجی نهایی خیلی خوشفرم نیست:
ما ترجیح میدهیم که آخرین گربه را به طور متفاوتی مدیریت کند، مانند این:
اما برای انجام این کار باید بدانیم که چه زمانی در آخرین تکرار حلقه هستیم و برای انجام این کار میتوانیم از یک حلقه for استفاده کنیم و مقدار i را بررسی کنیم:
اگر میخواهید قبل از اتمام تمام تکرارها از یک حلقه خارج شوید، میتوانید از دستور break استفاده کنید. ما قبلاً در مقاله قبلی، وقتی به دستورهای switch نگاه کردیم، با این موضوع آشنا شدیم - وقتی یک case در دستور switch که با عبارت ورودی مطابقت دارد، رخ میدهد، دستور break بلافاصله از دستور switch خارج میشود و به کد بعد از آن میرود.
در مورد حلقهها نیز همینطور است - یک دستور break بلافاصله از حلقه خارج میشود و مرورگر را به هر کدی که پس از آن میآید، هدایت میکند.
فرض کنید میخواهیم در آرایهای از مخاطبین و شماره تلفنها جستجو کنیم و فقط شمارهای را که میخواهیم پیدا کنیم، برگردانیم؟ ابتدا، مقداری HTML ساده - یک متنی که به ما امکان میدهد نامی را برای جستجو وارد کنیم، یک عنصر برای ارسال جستجو و یک عنصر برای نمایش نتایج در:
حالا بریم سراغ جاوا اسکریپت:
اول از همه، ما چند تعریف متغیر داریم - ما یک آرایه از اطلاعات تماس داریم که هر آیتم رشتهای شامل نام و شماره تلفن است که با علامت دونقطه از هم جدا شدهاند.
در مرحله بعد، یک شنونده رویداد به دکمه (btn) وصل میکنیم تا وقتی فشار داده میشود، کدی برای انجام جستجو و بازگرداندن نتایج اجرا شود.
ما مقدار وارد شده در ورودی متن را در متغیری به نام searchName ذخیره میکنیم، قبل از اینکه ورودی متن را خالی کنیم و دوباره روی آن فوکوس کنیم، آماده برای جستجوی بعدی. توجه داشته باشید که ما همچنین متد را روی رشته اجرا میکنیم، به طوری که جستجوها به حروف کوچک و بزرگ حساس نخواهند بود.
حالا به قسمت جالب، حلقه میرسیم:
در داخل حلقه، ابتدا مخاطب فعلی را در نقطه دونقطه تقسیم میکنیم و دو مقدار حاصل را در آرایهای به نام splitContact ذخیره میکنیم.
سپس از یک عبارت شرطی برای آزمایش اینکه آیا (نام مخاطب، که دوباره با به حروف کوچک نوشته شده است) با searchName ورودی برابر است یا خیر، استفاده میکنیم. اگر چنین باشد، یک رشته در پاراگراف وارد میکنیم تا شماره مخاطب را گزارش دهد و از break برای پایان دادن به حلقه استفاده میکنیم.
بعد از حلقه، بررسی میکنیم که آیا مخاطبی را تنظیم کردهایم یا خیر، و اگر نه، متن پاراگراف را روی «مخاطب یافت نشد» تنظیم میکنیم.
رد کردن تکرارها با continue
دستور continue مشابه دستور break عمل میکند، اما به جای اینکه به طور کامل از حلقه خارج شود، به تکرار بعدی حلقه میرود. بیایید به مثال دیگری نگاه کنیم که یک عدد را به عنوان ورودی میگیرد و فقط اعدادی را برمیگرداند که مربع اعداد صحیح (اعداد کامل) هستند.
HTML اساساً مشابه مثال آخر است - یک ورودی عددی ساده و یک پاراگراف برای خروجی.
جاوا اسکریپت نیز تقریباً یکسان است، اگرچه خود حلقه کمی متفاوت است:
در این حالت، ورودی باید یک عدد (num) باشد. به حلقه for یک شمارنده با شروع از ۱ داده میشود (زیرا در این مورد به ۰ علاقهای نداریم)، یک شرط خروج که میگوید حلقه زمانی متوقف میشود که شمارنده از عدد ورودی بزرگتر شود، و یک تکرارکننده که هر بار ۱ به شمارنده اضافه میکند.
در داخل حلقه، جذر هر عدد را با استفاده از پیدا میکنیم، سپس با آزمایش اینکه آیا جذر با خودش برابر است یا خیر، وقتی به نزدیکترین عدد صحیح گرد شده است، بررسی میکنیم که آیا جذر یک عدد صحیح است یا خیر (این کاری است که با عددی که به آن داده میشود انجام میدهد).
اگر جذر و جذر گرد شده با یکدیگر برابر نباشند ()، به این معنی است که جذر یک عدد صحیح نیست، بنابراین ما به آن علاقهای نداریم. در چنین حالتی، از دستور continue برای پرش به تکرار بعدی حلقه بدون ثبت عدد در هیچ کجا استفاده میکنیم.
اگر جذر یک عدد صحیح باشد، ما به طور کامل از بلوک if عبور میکنیم، بنابراین دستور continue اجرا نمیشود؛ در عوض، مقدار i فعلی را به علاوهی یک فاصله در انتهای محتوای پاراگراف به هم متصل میکنیم.
حلقه for تنها نوع حلقه عمومی موجود در جاوا اسکریپت نیست. در واقع انواع بسیار دیگری نیز وجود دارند و اگرچه نیازی نیست اکنون همه آنها را درک کنید، اما ارزش دارد که نگاهی به ساختار چند حلقه دیگر بیندازید تا بتوانید همان ویژگیها را به روشی کمی متفاوت تشخیص دهید.
ابتدا، نگاهی به حلقه while میاندازیم. سینتکس این حلقه به این شکل است:
این حلقه بسیار شبیه به حلقه for عمل میکند، با این تفاوت که متغیر مقداردهی اولیه قبل از حلقه تنظیم میشود و عبارت نهایی پس از اجرای کد، درون حلقه قرار میگیرد، به جای اینکه این دو مورد درون پرانتز قرار گیرند. شرط درون پرانتز قرار میگیرد که قبل از آن به جای for، کلمه کلیدی while آمده است.
همان سه مورد هنوز وجود دارند و همچنان به همان ترتیبی که در حلقه for تعریف شدهاند، تعریف شدهاند. دلیل این امر این است که قبل از بررسی صحت شرط، باید یک مقداردهی اولیه تعریف شده باشد. سپس عبارت نهایی پس از اجرای کد درون حلقه (تکمیل یک تکرار) اجرا میشود، که فقط در صورتی اتفاق میافتد که شرط هنوز درست باشد.
بیایید دوباره به مثال لیست گربههای خود نگاهی بیندازیم، اما برای استفاده از حلقه while بازنویسی شده است:
حلقه بسیار مشابه است، اما ساختار متفاوتی نسبت به while ارائه میدهد:
در این حالت، مقداردهی اولیه دوباره قبل از شروع حلقه میآید. کلمه کلیدی مستقیماً قبل از آکولادهای حاوی کدی که باید اجرا شود و عبارت نهایی قرار میگیرد.
تفاوت اصلی بین حلقه و حلقه while این است که کد داخل حلقه همیشه حداقل یک بار اجرا میشود. دلیلش این است که شرط بعد از کد داخل حلقه میآید. بنابراین ما همیشه آن کد را اجرا میکنیم، سپس بررسی میکنیم که آیا نیاز به اجرای دوباره آن داریم یا خیر. در حلقههای while و for، بررسی ابتدا میآید، بنابراین ممکن است کد هرگز اجرا نشود.
بیایید مثال لیست cat خود را دوباره برای استفاده از حلقه بازنویسی کنیم:
در هر نوع حلقهای، باید مطمئن شوید که مقدار اولیه افزایش یا، بسته به مورد، کاهش مییابد، بنابراین شرط در نهایت نادرست میشود. در غیر این صورت، حلقه برای همیشه ادامه مییابد و یا مرورگر آن را مجبور به توقف میکند یا از کار میافتد. به این حالت، حلقه بینهایت میگویند.
از کدام نوع حلقه باید استفاده کنید؟
اگر در حال پیمایش یک آرایه یا شیء دیگری هستید که از آن پشتیبانی میکند و نیازی به دسترسی به موقعیت اندیس هر آیتم ندارید، حلقه بهترین انتخاب است. خواندن آن آسانتر است و احتمال اشتباه کمتر است.
برای کاربردهای دیگر، حلقههای for، while و تا حد زیادی قابل تعویض هستند. همه آنها میتوانند برای حل مشکلات مشابه استفاده شوند و اینکه کدام یک را استفاده میکنید تا حد زیادی به ترجیح شخصی شما بستگی دارد - کدام یک را به خاطر سپردنش آسانتر یا شهودیتر میدانید. ما حداقل برای شروع، for را توصیه میکنیم، زیرا احتمالاً سادهترین روش برای به خاطر سپردن همه چیز است - مقداردهی اولیه، شرط و عبارت نهایی همگی باید به طور مرتب در پرانتز قرار گیرند، بنابراین به راحتی میتوان آنها را دید و بررسی کرد که آنها را از دست ندادهاید.
بیایید دوباره به همه آنها نگاهی بیندازیم.
اول :
