ورود / ثبت نام
ساختار تکرار در جاوا اسکریپت
حتما تو سایتهای فروشگاهی دیدید که یک قسمتی وجود داره به اسم سبد خرید که کاربر میتونه چندین محصول به سبدش اضافه کنه و خریدش رو یکجا تکمیل کنه. اگر شما به عنوان برنامه نویس بدونید که کاربر دقیقا سه تا محصول میخواد بخره میاید 3 تا متغیر a و b و c تعریف میکنید و قیمت محصولات رو داخلش میذارید و در نهایت جمع پرداختی کاربر میشه a+b+c
اما واضحه که برنامه نویس نمیدونه کاربر چند تا محصول میخواد بخره و اگه تعداد محصولات زیاد باشه همونجور که در مثال جلسه هفتم بهتون گفتم باید بریم سمت استفاده از آرایه. حالا فرض کنید که من سبد خریدم رو در یه آرایه به اسم product ذخیره کردم. آیا منطقیه که جمع سبد خرید رو اینجوری محاسبه کنم :
…. product[0] + product[1] +
قطعا نه! اگه آرایه من 50 تایی باشه یا نه حتی 10 تایی باشه جالب نیست که من بخوام اینجوری جمع کنم. راه حل چیه؟ استفاده از ساختار تکرار، اینکه بیایم یه کدی بنویسیم که به صورت هوشمند این محاسبات رو انجام بده. در ادامه این آموزش در مورد ساختار تکرار در جاوا اسکریپت با هم صحبت میکنیم.
مفهوم ساختار تکرار
قبلا هم بهتون گفتم که بهترین نقطه برای شروع برنامه نویسی الگوریتم و فلوچارته. من در دوره الگوریتم و فلوچارت این مفهوم رو براتون توضیح دادم. پس بهتره یا فیلتر شکنتون رو روشن کنید و ویدیوی ساختار تکرار در الگوریتم و فلوچارت رو در یوتیوب ببینید و یا آموزش ساختار تکرار در سایت ببینید
اما اگر خلاصه بخوام بهتون بگم ما توی ساختار همچین کاری میکنیم:
از اسمش مشخصه، ما میخواهیم کاری کنیم که یه تیکه از کدمون رو تکرار کنیم (مثلا 100 بار) پس به یه متغیری نیاز داریم که تعداد دفعات اجرای اون تیکه از کد رو بشمره. (یعنی هر بار که اون کد اجرا شد یکی به متغیرمون اضافه بشه) و این دستورات باید تا زمانی انجام بشه که متغیر ما به 100 برسه. پس در ساختار تکرار چند تا چیز مهمه:
1- مقدار دهی اولیه به اندیس (متغیر)
2- بررسی شرط (که بدونیم 100 بار تکرار شده یا نه)
3- قالب تکرار شونده (اون دستوراتی که قراره 100 بار تکرار بشه)
4- آپدیت کردن اندیس (به ازای هر بار اجرای دستورات یکی به اندیس اضافه بشه)
برای پیاده سازی ساختار تکرار در جاوا اسکریپت 5 تا روش وجود داره:
while , do-while , for , for-in, for-off
که در ادامه بررسی میکنیم:
1- while در جاوا اسکریپت
اون 4 تا موردی که بالاتر گفتیم رو در قالب ساختار while و یک مثال ساده اینجا ببینید
در کد بالا 10 بار salam در خروجی چاپ میشه. قالب کد رو با دقت بخونید.
(بد نیست بدونید که while یعنی تا زمانیکه! پس کد رو اینجوری میخونیم: تا زمانیکه i کوچکتر از 10 این دستورات اجرا بشه…)
حالا این کد رو در نظر بگیرید:
به نظرتون این کد چیکار میکنه؟
اعداد یک تا 10 رو در خروجی چاپ میشه. چرا؟ چون i با یک مقدار دهی شده و هر بار میگه i رو در خروجی چاپ کن و همونجور که دارید میبینید هر بار ++i هم اجرا میشه و یکی به i اضافه میشه.
2- do while در جاوا اسکریپت
برای اینکه do while رو بهتر متوجه بشید این کد رو نگاه کنید و بگید خروجیش چی میشه؟
با اجرای کد بالا چیزی در خروجی چاپ نمیشه، (چرا؟)
در ساختار while شرط در ابتدای ساختار بررسی میشه، اگر شرط درست بود دستورات ساختار تکرار اجرا میشه. اما در do while اول دستورات اجرا میشه و اگه شرط درست بود دوباره دستورات اجرا میشه. یعنی حداقل یک بار دستورات اجرا میشه. کد زیر رو ببینید
مفهوم While و do while دقیقا مثل همه فقط تفاوتشون همونه که بهتون گفتم. با do while حداقل یه بار دستورات اجرا میشه. شاید تو مثالهای واقعی کمتر پیش بیاد که از do while استفاده کنید ، ولی گوشه ذهنتون داشته باشید.
قطعا آموزش ویدیویی به درک بهتر شما خیلی میتونه کمک کنه. اگه دوست داری میتونی فیلترشکنت رو روشن کنی و آموزش این جلسه رو در یوتیوب ببینی. :
و ممنون میشم که با سابسکرایب کردن من در یوتیوب از من حمایت کنی. قطعا لایک و کامنتهای شما زیر پستهای من انگیزه بیشتری به من میده که همچنان محتوای با کیفیت رایگان در سایت و یوتیوب منتشر کنم.
3- for در جاوا اسکریپت
مففهوم حلقه for هم دقیقا مثل while است، با این تفاوت که سینتکسش تفاوت میکنه. تو ساختار تکرار 4 مورد رو گفتیم مهمه: مقدار دهی اولیه، شرط ، آپدیت کردن و قالب تکرار شونده. مثال قبلی رو در کد زیر ببینید:
چند تا نکته تو این کد در نظر داشته باشید:
1- جلوی for و داخل پرانتز دو تا سیمی کالنه که با این سیمی کالن 3 تا ناحیه درست میشه: مقدار دهی اولیه، شرط، آپدیت کردن
2- بعد از for آکولاد باز و بسته نوشته میشه و داخلش دستورات تکرار شونده. خیلی وقتا بچه ها بعد for سیمی کالن میذارن، یعنی اینجوری:
سیمی کالن انتهای خط یه معنی متفاوت میده و اون چیزی که شما انتظار دارید اتفاق نمی افته، پس حتما حواستون باشه اینجوری ننویسید (مگر اینکه بدونید این کد چیکار میکنه!)
ساختار تکرار در آرایه
برای اینکه عناصر یک آرایه رو با استفاده از ساختار تکرار نمایش بدیم بهتره از for – of استقاده کنیم که در جلسه بعدی صحبت میکنیم اما با for هم میشه این کار رو کرد. فرض کنید آرایه زیر سبد خرید کاربرم باشه:
اگه بخوام توی خروجی تک تک عناصر آرایه رو چاپ کنم یا اینجوری باید بنویسم:
یا اینکه از ساختار تکرار استفاده کنم. قبل اینکه کد زیر رو ببینید سعی کنید توی ذهنتون کدش رو پیاده سازی کنید
و میدونید که length یکی از پروپرتی های آرایه است. پس بهتره به جای اینکه تو کد 5 بذاریم اینجوری بنویسیم:
تمرین
1- خروجی کد زیر چیست؟
2- در کد این جلسه اعداد 1 تا 5 رو با حلقه for نوشتیم. برنامه نویسید که از کاربر یک عدد دریافت کنید (prompt) و اعداد زوج 1 تا عددی که کاربر وارد کرده است را چاپ کند. مثلا اگر کاربر عدد 10 وارد کند خروجی باید به شکل زیر باشد:
2 4 6 8 10
3- در کد این جلسه اعداد 1 تا 5 رو با حلقه for نوشتیم. قدم های زیر رو انجام بدید تا بازی HOP رو پیاده کنید
الف – با دستور prompt از کاربر یک عدد دریافت کنید و در متغیر n بریزید
ب- اعداد یک تا n را با حلقه for در خروجی چاپ کنید
ج- کد مرحله ب رو اینجوری اصلاح کنید: اعداد یک تا n را در خروجی چاپ کنید با این تفاوت که جای اعداد ضریب 3 ، Hop چاپ کنید! (از % برای اینکار استفاده کنید.)
د- حالا بیاید این مساله رو حل کنید: از کاربر m و n دریافت کنید و اعداد 1 تا n را در خروجی چاپ کنید با این تفاوت که جای اعداد ضریب m باید Hop چاپ کنید. یعنی اگر کاربر n=10 و m=3 وارد کرد:
1 2 Hop 4 5 Hop 7 8 Hop 10
4- برنامه ای بنویسید که از کاربر یک عدد دریافت کند (n) و اعداد یک تا n را اینگونه در خروجی چاپ کند:
الف- اگر بر 3 بخش پذیر بود Fizz چاپ کند
ب- اگر بر 5 بخش‌پذیر بود Buzz چاپ کند
ج- اگر هم بر 5 و هم بر 3 بخش پذیر بود FizzBuzz چاپ کند
د- اگر هیچکدام از موارد بالا نبود خود عدد را چاپ کند
مثلا به ازای ورودی n = 16:
1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz
5- برنامه ای بنویسید که با استفاده از for مجموع سبد خرید کاربر را محاسبه کند. (فرض کنید سبد خرید کاربر در آرایه به صورت زیر باشد:)
const products = [ 5000, 25000, 12000,30000,10000,45000,20000]
شما چهاردهمین جلسه از آموزشهای رایگان جاواسکریپت من رو به پایان رسوندید. اگر دوست دارید میتونید همه آموزشهای رایگان من رو در سایت و یا یوتیوب از اینجا دنبال کنید:
این مطلب برات مفید بود؟
من یک دوره آموزشی جامع جاوا اسکریپت آماده کردم که با شرکت در این دوره شما رو آماده ورود به بازار کار میکنم. مزیت این دوره پشتیبانی دائمی دوره است که من همراه شما خواهم بود که جاوا اسکریپت رو یاد بگیرید و قدم در راه ورود به بازار کار بردارید. پیشنهاد میکنم سرفصلهای دوره و پروژه هایی که در دوره پیاده سازی شده رو ببینید:
ممنون که تا اینجا همراه من بودید. اگر از آموزش این پست خوشتون اومد و یا سوالی داشتید حتما در قسمت نظرات با من درمیون بذارید. اگر هم به یوتیوب و یا اینستاگرام دسترسی دارید من رو در این دو پلتفرم دنبال کنید و با لایک ها و کامنتاتون به من انرژی بدید. در کانال تلگرام هم میتونید بیشتر با من در ارتباط باشید