آموزش جاوا اسکریپت – آرایه ها در جاوا اسکریپت ۱

در این بخش از سری آموزش جاوا اسکریپت, قصد داریم نحوه کار با آرایه ها در جاوا اسکریپت آموزش بدیم.

آرایه چیست

آرایه (Array) یک متغیر پیچیده است که به ما اجازه ذخیره بیشتر از یک مقدار یا گروهی از مقدارها در یک نام متغیر را می دهد.

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

فرض کنیم شما می خواهید نام رنگ ها در کد جاوا اسکریپت را ذخیره کنید. برای ذخیره کردن یک به یک نام رنگ ها شما باید بصورت زیر متغیر تعریف کنید:

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

var color1 = "Red";

var color2 = "Green";

var color3 = "Blue";

اما اگر مثلا نیاز بود نام شهر یا استان های یک کشور را در متغیر ها ذخیره کنیم, در اینصورت شاید بیشتر از ۱۰۰ متغیر نیاز بود.

بنابراین ذخیره هر کدام بصورت جداگانه در متغیرهای جدا خسته کننده و سخت است.

همچنین داشتن تعداد زیادی متغیر همزمان و دسترسی به آنها کار بسیار سختی است و اینجاست که آرایه ها وارد می شوند.

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

ساخت یک آرایه

آسان ترین راه برای ساخت آرایه ها در جاوا اسکریپت, لیستی از مقادیر جدا شده با کاما داخل براکت های مربعی [] است.

var myArray = [element0, element1, ..., elementN];

1	var myArray = [element0, element1, ..., elementN];

آرایه ها می توانند با شی Array() نیز ساخته شوند به هر حال روش بالا بسیار سینتکس ساده تری دارد.

var myArray = new Array(element0, element1, ..., elementN);

1	var myArray = new Array(element0, element1, ..., elementN);

چندین مثال از آرایه ساخته شده را اینجا می بینید:

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

var colors = ["Red", "Green", "Blue"];

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

var cities = ["London", "Paris", "New York"];

var person = ["John", "Wick", 32];

نکته: یک آرایه, مجموعه ای از مقادیر مرتب شده است. هر مقدار از یک آرایه عنصر (المان/element) نامیده می شود و هر المان نیز موقعیتی عددی در یک آرایه دارد که ایندکس index خوانده می شود.

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

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

ایندکس های آرایه از ۰ شروع می شوند به این معنی که اولین آیتم از آرایه ایندکس ۰ دارد نه ۱ , دومین آیتم ایندکس ۱ و به همین ترتیب پیش می رود.

بنابراین یک آرایه شامل پنج عنصر دارای ایندکس ۰ تا ۴ است.

مثال زیر به شما نجوه دریافت هر یک از عناصر المان را با ایندکس آنها نشان می دهد.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits[0]); // Prints: Apple
document.write(fruits[1]); // Prints: Banana
document.write(fruits[2]); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

document.write(fruits[0]); // Prints: Apple

document.write(fruits[1]); // Prints: Banana

document.write(fruits[2]); // Prints: Mango

document.write(fruits[fruits.length - 1]); // Prints: Papaya

نکته: در جاوا اسکریپت, آرایه ها واقعا فقط یک نوع هاص از آبجکت ها هستند که ایندکس های عددی به عنوان کلید دارند. اپراتور typeof عبارت “object” را برای آرایه ها برگشت می دهد.

دریافت طول آرایه ها در جاوا اسکریپت

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

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Prints: 5

1 2	var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; document.write(fruits.length); // Prints: 5

اجرای حلقه روی المان های آرایه

شما می توانید از حلقه for برای دسترسی به المان های آرایه بصورت ترتیبی استفاده کنید.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "<br>"); // Print array element
}

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Iterates over array elements

for(var i = 0; i < fruits.length; i++) {

document.write(fruits[i] + "<br>"); // Print array element

}

ECMAScript 6 یک راه آسان تر برای تکرار آن روی المان آرایه معرفی کرد اس که حلقه for-of است.

این حلقه نیاز به مقادیر اولیه خاص و دنبال کردن متغیر شمارنده (i) نیست. (مانند foreach در php)

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); // Print array element

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Iterates over array elements

for(var fruit of fruits) {

document.write(fruit + "<br>"); // Print array element

همان مثال بالا را با حلقه for-of بازنویسی می کنیم :

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

// Loop through all the elements in the array

for(var i in fruits) {

document.write(fruits[i] + "<br>");

}

نکته: حلقه for-in نباید روی آرایه ای که ترتیب ایندکس آن مهم است استفاده شود. حلقه for-in به منظور تکرار روی خصوصیات object ها بهینه شده است, پس بهتر است از for برای ایندکس های عددی استفاده کنید.

افزودن المان ها به یک آرایه

برای افزودن المان جدید به آخر یک آرایه, به راحتی از متد push() استفاده می کنیم:

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");
 
document.write(colors); // Prints: Red,Green,Blue,Yellow
document.write(colors.length); // Prints: 4

var colors = ["Red", "Green", "Blue"];

colors.push("Yellow");

document.write(colors); // Prints: Red,Green,Blue,Yellow

document.write(colors.length); // Prints: 4

مشابه آن, برای افزودن المان جدید به اول آرایه از متد unshift() بهره می بریم:

var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");
 
document.write(colors); // Prints: Yellow,Red,Green,Blue
document.write(colors.length); // Prints: 4

var colors = ["Red", "Green", "Blue"];

colors.unshift("Yellow");

document.write(colors); // Prints: Yellow,Red,Green,Blue

document.write(colors.length); // Prints: 4

شما می توانید چندین المان را یکجا با متدهای push() و unshift() اضافه کنید:

var colors = ["Red", "Green", "Blue"];
colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
 
document.write(colors); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voilet
document.write(colors.length); // Prints: 7

var colors = ["Red", "Green", "Blue"];

colors.push("Pink", "Voilet");

colors.unshift("Yellow", "Grey");

document.write(colors); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voilet

document.write(colors.length); // Prints: 7

حذف یک المان از آرایه

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

var colors = ["Red", "Green", "Blue"];
var last = colors.pop();
 
document.write(last); // Prints: Blue
document.write(colors.length); // Prints: 2

var colors = ["Red", "Green", "Blue"];

var last = colors.pop();

document.write(last); // Prints: Blue

document.write(colors.length); // Prints: 2

مشابه آن, از متد shift() می توانید برای حذف اولین المان آرایه بهره ببرید. این متد نیز مقدار حذف شده را برگشت می دهد:

var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
 
document.write(first); // Prints: Red
document.write(colors.length); // Prints: 2

var colors = ["Red", "Green", "Blue"];

var first = colors.shift();

document.write(first); // Prints: Red

document.write(colors.length); // Prints: 2

نکته: متدهای push() و pop() سریعتر از متدهای unshift() و shift() هستند. چراکه push() و pop() به راحتی المان را به آخر آرایه اضافه/ حذف می کنند بدون آنکه آن را جابجا کنند, در حای که unshift() و shift() المان را اول آرایه اضافه/حذف می کنند که نیاز به ایندکس گذاری کل آرایه دارد.

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

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – آرایه ها در جاوا اسکریپت ۱

آرایه چیست

ساخت یک آرایه

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

دریافت طول آرایه ها در جاوا اسکریپت

اجرای حلقه روی المان های آرایه

افزودن المان ها به یک آرایه

حذف یک المان از آرایه

آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه