با آرایه های جاوا اسکریپت مثل یک رئیس رفتار کن!

آرایه ها نوعی متغیر هستند، که می توانند چندین مقدار را در خود ذخیره کنند.

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

به هر مقدار در آرایه element می گویند، که هر element دارای جایگاهی درون آرایه است که به آن جایگاه index گفته می‌شود.

در مثال بالا هر کدام از مقادیر 1 تا 10 یک element هستند.

مقادیر داخل یک آرایه ی جاوا اسکریپت می توانند از هر نوعی باشند، boolean ، string ، object و حتی خود آرایه ها هم می توانند عضوی از آرایه ی دیگر باشند.

تعریف کردن آرایه

از آنجایی که آرایه ها تعداد زیادی از مقادیر(حداکثر تا 1-32^2 ) را در خود ذخیره کنند، می توانند در برنامه های ما بسیار مفید باشند.

برای ایجاد آرایه کافیه یه متغیر با var (یا let و const) تعریف کنید. بعد از این که متغیر رو ایجاد کردین

برای این که به جاوا اسکریپت بفهمونین که دارین آرایه تعریف می کنین دو تا راه دارین، استفاد از [] یا می تونین از کلید واژه new Array استفاده کنین.

تعریف آرایه با استفاده از []:

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

برای تعریف یک آرایه خالی هم می تونین مثل زیر عمل کنین:

var myArray =  [];

تعریف آرایه با استفاده از کلید واژه new Array:

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond" );
var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

اگر می خواهید آرایه ای با تعداد عضو مشخص تعریف کنید می توانید تعداد اعضا رو به عنوان پارامتر به سازنده(new Array) بدین و آرایه شما با تعداد عضو دلخواه شما ساخته بشه (هر عضو با مقدار undefined در آرایه ذخیره می شود).

var myArray = new Array(80);

این آرایه داری 80 عضو است و هر عضو آن برابر با undefined هستند.

برای تعریف آرایه خالی با کلید واژه new هم می توانید از دستور زیر استفاده کنید:

var myArray = new Array();

دسترسی به اعضای آرایه

آرایه ها در جاوا اسکریپت zero-based هستند، یعنی index(جایگاه) اولین element (عضو) هر آرایه 0 است. این از جمله موضوعاتیه که دوستانی که تازه شروع به یادگیری جاوا اسکریپت کردن باید بیشتر روش دقت کنن.

آرایه زیر را در نظر بگیرید:

var myArray = ["Superman", 84, true, ["Batman", "Robin"] ];

این آرایه در index 0 یک string، در index 1 یک number، در index 2 یک boolean و در index 3 هم یک آرایه وجود دارد.

console.log(typeof myArray[0]);
// => string
console.log(typeof myArray[1]);
// => number
console.log(typeof myArray[2]);
// => boolean
console.log(typeof myArray[3]);
// => object

توسط عملگر typeof میتوان نوع داده ای یک مقدار یا متغیر را برگرداند .

در جاوا اسکریپت خروجی typeof برای آرایه ها object است، برای تشخیص آرایه ها از کد زیر استفاده کنید:

Array.isArray(myArray[3]);
// => true

مثالی دیگر از جایگاه اعضای آرایه:

var myArray = ["Jack", "Sawyer", "John", "Desmond"];
console.log(myArray[0]);     // =>  “Jack”
console.log(myArray[3]);     // =>   “Desmond”

همون طور که دیدیم آرایه می تونه ابعاد مختلفی داشته باشه، یعنی می تونیم آرایه ای داشته باشیم که عضو یه آرایه دیگه باشه، خوب چطور میشه به اعضای این آرایه ها دسترسی داشت؟

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

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

می تونیم آرایه رو به شکل زیر نشون بدیم:

اگه بخوایم به Lisa دسترسی داشته باشیم:

ابتدا index آرایه اصلی(کل خانواده) و بعد index آرایه فرزندان را انتخاب می کنیم.

var lisa = familyArray[2][1];
console.log(lisa); // => "Lisa"

افزودن عضو جدید به آرایه

تا اینجای کار دیدیم که چه طور می‌تونیم یه آرایه تعروف کنیم و به اعضای اون دسترسی داشته باشیم، حالا برای اضافه کردن یه عضو جدید به آرایه ای که ساختیم چی کار باید بکنیم؟

var myArray = [ "Kate", "Sun"];
myArray[2] = "Juliet";
console.log(myArray);   // =>  "Kate, Sun, Juliet"

در مثال بالا ابتدا یه آرایه با دو عضو ساختیم، حالا می تونیم یه عضو جدید به index 2 این آرایه اضافه کنیم(فراموش نکنین که آرایه ها zero-based هستن) که موقع ساخت آرایه اصلا وجود نداشت.

حالا چه اتفاقی رخ می‌ده اگه تو مثال بالا به جای اضافه کردن عضو در index 2 عضو جدیدمون رو در index 5 اضافه کنیم؟ عضوی که تعریف کردیم تو جایگاه 5 قرار می گیره و اعضایی که این وسط تعریف نشدن undefined می‌شوند.

var myArray = ["Kate", "Sun"];
myArray[5] = "Juliet";
console.log(myArray.length); // => "6"
console.log(myArray); // => ["Kate", "Sun", undefined, undefined, undefined, "Juliet"]

شما می‌توانید تعداد اعضا یا طول آرایه را با استفاده از خاصیتی به نام length بدست آورید. در مثال بالا همان طور که می بینید طول آرایه 6 است.

push()

راه دیگری که برای اضافه کردن عضو به آرایه داریم استفاده از متد push() است. با استفاده از این متد می توانیم یک یا چند عضو جدید به آخر آرایه اضافه کنیم.

var myArray = [ "Kate", "Sun"];

myArray.push("Juliet"); 
myArray.push("Libby", "Shannon");

console.log(myaArray); // => ["Kate", "Sun", "Juliet", "Libby", "Shannon"]

unshift()

متد unshift() مثل push() عمل می‌کند با این تفاوت که عضو جدید را به اول آرایه اضافه می کند.

var myArray = [ "Kate", "Sun"];
myArray.unshift("Juliet"); 
myArray.unshift("Libby", "Shannon");
console.log(myArray); // Prints ["Libby", "Shannon", "Juliet", "Kate", "Sun"]

پاک کردن عضو از آرایه

با استفاده از متد‌های pop() و shift() می‌توانید عضوی را از آرایه پاک کنید. این دو متد مثل دو متدی که برای اضافه کردن عضو به آرایه داشتیم عمل می‌کنند، متد pop() یک عضو از آخر آرایه پاک می کند و متد shift() یک عضو از اول آرایه پاک می کند.

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"];
myArray.pop(); // Removes "Kate"
myArray.shift(); // Removes "Jack"
console.log(myArray); // => ["Sawyer", "John", "Desmond"]

برسی چند ابزار دیگر برای کار با آرایه ها

splice()

با استفاده از این متد می توانید عضوی دلخواه را پاک و یا عضوی جدید را به آرایه اضافه کنید.این متد می‌تواند به تعداد دلخواه ورودی داشته باشد ولی داشتن 2 ورودی اول برای آن الزامی می باشد.

var months = ["farvardin", "ordibehesht", "tir"];
months.splice(2, 0, "khordad");
console.log(months); // =>  ["farvardin", "ordibehesht", "khordad", "tir"] 

در مثال بالا "khordad" را به index 2 آرایه ی months اضافه کردیم.

• اولین عدد (2 در مثال بالا) که به عنوان ورودی به متد می دهیم index را مشخص می کند.
• دومین عدد (0 در مثال بالا) که ورودی دوم متد است تعداد اعضایی که باید پاک شوند را مشخص می کند.(صفر به این معنی است که عضوی پاک نمی شود)

بقیه ورودی هایی که به متد می‌دهیم به عنوان عضو جدید به آرایه در جایگاهی که مشخص کردیم اضافه می‌شوند.

چند مثال دیگر را برسی می کنیم:

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
myFish.splice(3, 1);
console.log(myFish); // =>  ["angel", "clown", "drum", "sturgeon"]

در بالا از جایگاه سوم به تعداد یک عضو از آرایه پاک می شود.

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
myFish.splice(2, 1, 'trumpet');
console.log(myFish); // =>  ["angel", "clown", "trumpet", "sturgeon"]

عضو جایگاه دوم را پاک می کند و 'trumpet' را به آرایه اضافه می کند.

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
console.log(myFish); // =>  ["parrot", "anemone", "blue", "trumpet", "sturgeon"]

دو عضو اول آرایه را پاک می کند و سه عضو جدید را به اول آرایه اضافه می کند.

includes()

این متد برسی می‌کند که آیا عضو انتخابی شما در آرایه وجود دارد؟ و در صورت وجود مقدار true و در صورت عدم وجود false را بر می گرداند.

var array1 = [1, 2, 3];
console.log(array1.includes(2));
// => true

var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// => true
console.log(pets.includes('at'));
// => false

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