10) آموزش آرایه ها در جاوااسکریپت (Arrays)

آموزش رایگان جاوااسکریپت

آرایه ها یا Arrays یکی از انواع داده ای بود که در جلسه ششم از تونل یادگیری جاوااسکریپت مورد بررسی قرار دادیم. برای ذخیره چند مقدار متفاوت در یک متغیر از آرایه ها استفاده میکنیم.

دوره مرتبط و تکمیلی: آموزش کامل آرایه ها در جاوااسکریپت

دوره کامل آموزش Arrays در جاوااسکریپت به همراه کلی مثال کاربردی برای یادگیری عمیق مبجث آرایه ها در جاوااسکریپت

آرایه چیست؟

آرایه ها متغییر هایی هستند که بیشتر از یک مقدار رو در خود ذخیره میکنند و دسترسی به داده های ذخیره شده با شماره ایندکس امکان پذیر است. در واقع اسم دیگه آرایه میشه لیست. مثلا برای ذخیره یه لیست از اسامی میوه ها، بدون استفاده از آرایه ها باید به شکل زیر عمل کنیم:

var fruitOne = "banana";
var fruitTwo = "Portugal";
var fruitThree = "Apple";

حالا اینو در نظر بگیرید که اینجا فقط 3 تا میوه داریم؛ اگه 300 تا میوه بود تازه با فاجعه اصلی روبرو میشدیم. 300 تا متغییر متفاوت!!! که اینکار علاوه بر بالا بردن حجم برنامه و این داستانا خوانایی و عملکرد برنامه رو به شدت کاهش میده.

راه حل این مشکل آرایه ها (Arrays) یا لیست ها هستند. اگه یادتون رفته متغییر ها چی بودند مقاله زیر رو بخونید.

جلسه مرتبط: متغیرها در جاوااسکریپت

ساختن آرایه در جاوااسکریپت

برای ساختن یک آرایه در جاوااسکریپت فقط کافیه مقادیر مورد نظر رو داخل یک براکت یا کروشه بذاریم و هر مقدار رو با یک کاما جدا کنیم. سینتکس کلی ساخت آرایه در جاوااسکریپت به شکل زیره:

var array_name = [item1, item2, ...];

برای مثال همون اسامی میوه رو با یک متغیر و تشکیل آرایه به شکل زیر میشه نوشت.

var fruit = [ "banana" , "Apple" , "Portugal"]

یا برای مرتب نوشتن و راحتی میشه بعد از هر کاما یه Enter بزنید تا هر میوه در یک خط نوشته بشه و خوانایی برنامه بالاتر بره.

var fruit = [ "banana",
 "Apple",
 "Portugal"]

البته یه روش دیگه برای تعریف آرایه وجود داره که تفاوتی با روشای بالا نداره اما میگم بهتون تا بعدا نگید نگفت!

این روش رو وقتی شی گرایی در جاوااسکریپت رو یاد بگیرید به دردتون میخوره و کاربرد زیادی داره.

var fruit = new Array("banana", "Apple", "Portugal");

دسترسی به مقادیر آرایه

خب حالا در نظر بگیرید میخوایم به یکی از آیتم های آرایه دسترسی داشته باشیم، مثلا ببینیم سومین میوه چی بوده؟ یا اولین میوه رو به لیست علاقه مندی های کاربرمون اضافه کنیم. برای دسترسی به به آیتم های یک آرایه از شماره ایندکس (Index Number) استفاده میکنیم. برای مثال میخوایم ببینیم اولین آیتم از آرایه fruit رو داخل متغیر favoriteFruit بریزیم.

var favoriteFruit= fruit[0];

شماره ایندکس آرایه از 0 شروع میشود. یعنی شماره اولین عنصر [0] و دومین عنصر [1] میشه.

تغییر آیتم های آرایه

اگه نیاز باشه که تو لیست آیتم های یک آرایه تغییری ایجاد کنیم یا کاربر اجازه ویرایش آیتم هارو داشته باشه کافیه شماره ایندکس آیتم مورد نظرو داخل یک براکت جلوی اسم آرایه بنویسیم و مقدار جدیدو اختصاص بدیم.

fruit[0] = "Lemon";

الان اولین آیتم آرایه fruit به Lemon تغییر پیدا کرد.

دسترسی به کل آیتم های آرایه

برای این کار فقط لازمه اسم آرایه رو فراخونی کنیم:

fruit
// output:   (3) ["banana", "Apple", "Portugal"]

تفاوت آرایه با Object

آرایه ها نوع خاصی از Objectها هستند، یعنی اگه typeOf یک متغیر رو بگیریم که داخلش آرایه ریختیم با جواب object مواجه میشیم.

var fruits = ["Banana", "Apple", "Portugal"];
typeof fruits;    // returns object

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

در جاوااسکریپت آرایه ها از numbered indexes (شماره ایندکس) استفاده میکنن.
در جاوااسکریپت Object ها از named indexes (اسم ایتدکس) استفاده میکنن.

برای مثال:

برای دسترسی به اولین عنصر این آرایه از [0]person استفاده میکنیم.

var person = ["Mohammad", "Rezaei", 20];
// output:   Mohammad

برای دسترسی به اولین عضو این object از person.firstName استفاده میکنیم.

var person = {firstName:"Mohammad", lastName:"Rezaei", age:20};
// output:   Mohammad

چطور آرایه رو از Object تشخیص بدیم؟

همون طور که فهمیدید اگه از typeOf استفاده کنیم مقدار object رو به ما برمیگردونه. چون آرایه نوع خاصی از Object است، اما خب راه حل چیه؟

در اکما اسکریپت 5 از متد ()Array.isArray برای تشخیص اینکه یک متغیر آرایس یا Object استفاده میشه.

چه موقع از آرایه استفاده کنیم؟ چه موقع از Object استفاده کنیم؟

Array.isArray(fruits);   // returns true

خواص و ویژگی آرایه ها (Array Properties)

برای استفاده بهتر از آرایه ها، خواص و ویژگی هایی وجود دارد.

طول آرایه (Array length)

برای بدست آوردن تعداد عنصر های یک آرایه از Property یا ویژگی Length استفاده میکنیم. یعنی آرایه یا لیستی که 4 تا عنصر داشته باشه، عدد 4 برای ما return میشه.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;   // the length of fruits is 4