در این جلسه از آموزش جاوا اسکریپت قصد داریم کمی بیشتر درباره آرایه‌ها در این زبان برنامه‌نویسی صحبت کنیم و شما را بیشتر با مفهوم آنها در جاوا اسکریپت آشنا کنیم. برای شروع ویژوال استودیو کد را اجرا کرده و وارد محیط کدنویسی و فایل script.js می‌شویم. در جلسه قبلی آموزش جاوا اسکریپت رایگان درباره تعریف متغیرها و انواع داده اولیه در جاوا اسکریپت صحبت کردیم و بیان کردیم که در این متغیرها می‌توان یک مقدار از یک نوع را نگهداری کرد. حال گاهی اوقات ممکن است نیاز داشته باشید تا چندین مقدار مختلف را داخل متغیرهای خود نگهداری کنید. در چنین شرایطی می‌توانید از آرایه‌ها در جاوا اسکریپت استفاده کنید که به همین منظور طراحی و ساخته شده‌اند.
شروع کار با آرایه‌ها
شروع کار با آرایه‌ها در زبان برنامه‌نویسی جاوا
برای شروع کار با آرایه‌ها در این بخش از آموزش جاوا اسکریپت به شکل زیر عمل می‌کنیم. فرض کنید که ما قصد داریم لیستی از رنگ‌ها را ایجاد کنیم:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
console.log(colors);
یک نکته بسیار کلیدی و مهم درباره آرایه‌ها در زبان برنامه‌نویسی جاوا اسکریپت و در تمامی زبان‌ها وجود دارد که باید به آن دقت داشته باشید و آن این است که وقتی شما یک آرایه‌ای را تعریف می‌کنید شماره‌های مربوط به خانه‌های آن آرایه از صفر آغاز می‌شود. به‌عنوان‌مثال اندیس مقدار red در آرایه بالا برابر 0، اندیس مقدار black در آرایه بالا مقدار 1 و به همین ترتیب سایر خانه‌ها نیز اندیس‌گذاری می‌شوند.
با اجرا گرفتن از قطعه کد بالا می‌توانید به‌صورت دقیق این نکته را مشاهده کنید که اندیس آرایه شما از 0 شروع شده است؛ بنابراین حتما در زمان کارکردن با آرایه‌ها در طول دوره آموزش جاوا اسکریپت به زبان ساده و همین‌طور در طول انجام پروژه‌های خود حتما به این نکته مهم دقت داشته باشید.
روش دیگری که برای تعریف آرایه وجود دارد به شکل زیر است. به‌عنوان‌مثال فرض کنید که قصد دارید آرایه‌ای از نام‌های افراد را ایجاد کنید:
var names = new Array(“mohammad”, “milad”, “ali”, hossein”);
console.log(names);
با اجراکردن این قطعه کد مشاهده می‌کنید که مقادیر آن مانند مثال قبلی برای شما چاپ می‌شود.
حال فرض کنید که شما قصد دارید مقدار خاصی از این آرایه را فراخوانی کرده و آن را چاپ کنید. برای این کار باید به ایندکس یا اندیس آن مقدار خاص از آرایه اشاره کنید. برای مثال قطعه کد زیر را مشاهده کنید:
var names = new Array(“mohammad”, “milad”, “ali”, hossein”);
console.log(names[2]);
با اجرای این کد مقدار ali برای شما نمایش داده می‌شود.
نکاتی درباره آرایه‌ها
نکات مهمی که باید درباره آرایه‌ها در جاوا اسکریپت بدانید
در این بخش از آموزش جاوا اسکریپت قصد داریم نکات مهمی که باید در طول آموزش javascript به آنها دقت داشته باشید را بیان کنیم. اولین و شاید مهم‌ترین نکته این است که در زمان تعریف‌کردن آرایه‌ها هیچ الزامی یک جنس بودن مقادیر موجود در آرایه نیست. شما می‌توانید به شکل زیر مقادیری از انواع داده مختلف را در داخل یک آرایه قرار دهید و از آن استفاده کنید:
var myArray = [“ali”, 23, true, “hosseini”, 24.42]
console.log(myArray);
با اجرای این کد مشاهده خواهید کرد که تمامی مقادیر بدون وجود هیچ‌گونه مشکلی برای شما چاپ خواهند شد و شما اجازه دسترسی به‌تمامی آنها را خواهید داشت.
زمانی که ما آرایه‌ها را در داخل کدهای خود تعریف می‌کنیم علاوه بر مقادیری که داخل آنها قرار می‌دهیم یک‌سری از توابع پیش‌فرض نیز داخل آن قرار می‌گیرند که ما می‌توانیم با استفاده از آن توابع مقدارهایی که در داخل آرایه هستند را تغییر دهیم. به‌عنوان‌مثال قطعه کد زیر را مشاهده کنید که تابع reverse را به شما معرفی خواهد کرد:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
colors.revers();
console.log(colors);
با اجرای این کد مشاهده می‌کنید که ترتیب مقادیر موجود در آرایه برعکس شده و مقادیر به ترتیب زیر برای شما چاپ می‌شوند:
orange, blue, yellow, black, red
این تابع برای برعکس کردن ترتیب آرایه‌ها مورداستفاده قرار می‌گیرد و یکی از پرکاربردترین توابع آرایه‌هاست که ما در این بخش از آموزش javascript رایگان آن را به شما معرفی کردیم.
توابع آرایه‌ها
آشنایی با توابع مهم آرایه‌ها در جاوا اسکریپت
در این بخش از آموزش جاوا اسکریپت قصد داریم سایر توابع مهمی که برای آرایه‌ها در این زبان برنامه‌نویسی وجود دارند را به شما معرفی کنیم. یکی دیگر از توابع کاربردی که برای کار با آرایه‌ها در زبان جاوا اسکریپت وجود دارد تابع shift می‌باشد. این تابع برای حذف اولین مقدار از آرایه مورداستفاده قرار می‌گیرد و کاربرد دارد. به‌عنوان‌مثال قطعه کد زیر را در نظر بگیرید:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
colors.shift();
console.log(colors);
با اجرای این کد خروجی زیر برای شما نمایش داده می‌شود که نشان‌دهنده این است که اولین مقدار یعنی red از آرایه شما حذف شده است:
black, yellow, blue, orange
اگر یک بار دیگر این تابع را اجرا کنید مقدار black نیز از داخل آرایه شما حذف شده و سپس سایر مقادیر به شما نمایش داده خواهد شد.
حال فرض کنید قصد دارید یک مقدار را به ابتدای آرایه خود اضافه کنید. مثلا فرض کنید قصد داریم به آرایه colors خود مقدار white را نیز اضافه کنیم. برای انجام این کار از تابع unshift() استفاده خواهیم کرد که نحوه کار با آن را در ادامه نشان داده‌ایم:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
colors.unshift(“white”);
console.log(colors);
با اجرای این کد خروجی زیر برای شما نمایش داده می‌شود:
white, red, black, yellow, blue, orange
یکی دیگر از توابع بسیار مهم در جاوا اسکریپت برای کارکردن با آرایه‌ها تابع pop() است که برای حذف‌کردن یک مقدار از انتهای آرایه مورداستفاده قرار می‌گیرد و نحوه کار آن نیز به شکل زیر می‌باشد:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
colors.pop();
console.log(colors);
با اجرای این کد مشاهده خواهید کرد که مقدار orange از داخل آرایه شما حذف شده و خروجی شما به شکل زیر خواهد بود:
red, black, yellow, blue
حال اگر قصد داشته باشید که یک مقدار را به انتهای آرایه خود اضافه کنید می‌توانید از تابع push() برای انجام این کار استفاده کنید. نحوه استفاده از این تابع در قطعه کد زیر توضیح داده شده است:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
colors.push(“white”);
console.log(colors);
با اجرای قطعه کد بالا خروجی زیر نشان داده می‌شود که مقدار white به انتهای آرایه شما اضافه شده است:
red, black, yellow, blue, orange, white
توابع slilce() و indexOf()
آشنایی با توابع slice() و indexOf() در جاوا اسکریپت
یکی دیگر از توابع مهمی که باید در آموزش جاوا اسکریپت به طور کامل درباره آن صحبت کنیم تابع slice است که برای کپی‌گرفتن از یک آرایه و قراردادن آن در داخل یک آرایه جدید مورداستفاده قرار می‌گیرد. به‌عنوان‌مثال قطعه کد زیر را در نظر بگیرید:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
var NewColors = colors.slice();
console(NewColors);
با اجرای این کد همان خروجی مقادیر موجود در آرایه colors برای شما چاپ خواهد شد.
زمانی که می‌خواهیم یک مقدار را در داخل آرایه جستجو کنیم می‌توانیم از تابع indexOf() استفاده کنیم که یک ورودی از شما دریافت می‌کند و بررسی می‌کند که آیا آن مقدار در داخل آرایه وجود دارد یا خیر؟ علاوه بر این شما می‌توانید یک ورودی دیگر را نیز به آن بدهید که یک نوع داده int است و با استفاده از آن مشخص کنید که جستجوی شما دقیقا از کدام خانه آرایه شروع شود. برای کار با این تابع قطعه کد زیر را در نظر بگیرید:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
var result = colors.indexOf(“blue”, 0);
console.log(result);
با اجرای این کد عدد 3 برای شما نشان داده می‌شود که بیانگر این است که مقدار blue در داخل خانه سوم از این آرایه قرار دارد.
تابع join()
تابع join() برای کار با آرایه‌ها در زبان برنامه‌نویسی جاوا اسکریپت
گاهی اوقات ممکن است در برنامه‌نویسی به زبان جاوا اسکریپت نیاز داشته باشید که مقادیر موجود در داخل آرایه خود را به شکل یک‌رشته در اختیار داشته باشید. برای این کار می‌توانید از تابع join() استفاده کنید که به این منظور طراحی شده است و ما در این بخش از آموزش جاوا قصد داریم بیشتر درباره آن صحبت کنیم. برای کار با این تابع قطعه کد زیر را در نظر بگیرید:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
var arrayString = colors.join();
console.log(arrayString);
با اجرای این کد عبارت red, black, yellow, blue, orange برای شما به‌صورت یک‌رشته نمایش داده می‌شود که همان مقادیر موجود در داخل آرایه هستند که با استفاده از کاراکتر ‘,’ از یکدیگر جدا شده‌اند. شما می‌توانید جداکننده دلخواه خود را نیز به‌عنوان یک ورودی به تابع join دهید که در این صورت کد شما مشابه قطعه کد زیر خواهد بود:
var colors = [“red”, “black”, “yellow”, “blue”, “orange”];
var arrayString = colors.join("-");
console.log(arrayString);
با اجرای قطعه کد بالا خروجی شما یک‌رشته به شکل زیر خواهد بود:
red- black- yellow- blue- orange
شما می‌توانید از جداکننده‌های دیگر نیز متناسب با نیاز خود در داخل این تابع استفاده کنید و از مزایای آن بهره‌مند شوید.
قسمت قبلی آموزش رایگان جاوا اسکریپت:
قسمت بعدی آموزش رایگان جاوا اسکریپت:
آشنایی با ویژگی attributable یا قابل انتساب بودن
یا جهت مشاهده ویدیوهای اموزشی آموزش رایگان جاوا اسکریپت وارد این صفحه شوید