جاواسکریپت: ۱۱- آرایه

آرایه (Array) چندین متغیر با یک نام است. هر یک از متغیرهای درون آرایه با یک شماره که به آن ایندکس (Index) می‌گوییم؛ از یکدیگر متمایز می‌شوند. هر یک از متغیرهای درون آرایه را اِلمنت‌، می‌نامند.

قواعد نام گذاری آرایه

• قواعد نامگذاری آرایه همانند متغیر است.
• ایندکس درون […] بِرَکِت Square Bracket نوشته می‌شود.
• ایندکس همیشه از عدد صفر آغاز می‌شود.

مراحل استفاده از آرایه

• Declare: تعیین نام آرایه و اختصاص فضا در حافظه
• Assignment: نوشتن مقدار در آن
• Access: خواندن مقدار از آن

روش‌های استفاده از آرایه

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

// Declare
let color = [];

// Assignment
color[0] = "red";
color[1] = "gold";
color[2] = "olive";
color[3] = "beige";
color[4] = "khaki";

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

---

تغییر مقدار یک المنت

شما همیشه می‌توانید مقدار درون هر یک از المنت‌های آرایه را تغییر دهید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[2]);    // olive

// Change
color[2] = "lime";

// Access
alert(color[2]);    // lime

---

افزودن یک المنت

شما همیشه می‌توانید یک المنت، به انتهای آرایه بیفزایید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige"];

// Access
alert(color[4]);    // undefined 

// Add Element
color[4] = "khaki";

// Access
alert(color[4]);    // khaki

---

arr.length

تعداد المنت‌های آرایه را ارائه می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[5] = "lime";

// Count
alert(color.length);    // 6

---

حفره تعریف نشده

افزودن المنت می‌تواند در بین آرایه حفره تعریف نشده (undefined holes) ایجاد کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[7] = "lime";

// Count
alert(color.length);    // 8

---

arr.push(elm1, elm2, …)

برای پرهیز از ایجاد حفره تعریف نشده، با این دستور یک یا چند المنت به انتهای آرایه بیفزایید.

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

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.push("lime");

// Access
alert(n);    // 6
alert(color) // red, gold, olive, beige, khaki, lime

---

arr.pop( )

آخرین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.pop();

// Access
alert(c);    // khaki
alert(color) // red, gold, olive, beige

---

arr.shift( )

اولین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.shift();

// Access
alert(c);    // red
alert(color) // gold, olive, beige, khaki

---

arr.unshift(elm1, elm2, …)

یک یا چند المنت به ابتدای آرایه می‌افزاید. و تعداد جدید المنت‌های آرایه را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.unshift("lime");

// Access
alert(n);    // 6
alert(color) // lime, red, gold, olive, beige, khaki

---

arr.splice(start, delCount, elm1, elm2, …)

یک یا چند المنت در میان آرایه حذف یا اضافه می‌کند. المنت‌های حذف شده را برمی‌گرداند.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2);

// Access
alert(color1);    // red, gold, olive, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2, "pink", "blue", "tan");

// Access
alert(color1);    // red, gold, olive, pink, blue, tan, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3, 0, "pink", "tan");

// Access
alert(color1);  // red, gold, olive, pink, tan, beige, khaki, lime
alert(color2);  // []

---

arr.concat(arrX, arrY, …)

دو یا چند آرایه را به هم پیوند می‌دهد و یک آرایه برمی‌گرداند.

// Declare & Assignment
let color = [];
let color1 = ["red", "gold", "olive"];
let color2 = ["beige", "khaki", "lime"];

color = color1.concat(color2);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime
alert(color);    // red, gold, olive, beige, khaki, lime

---

arr.sort( )

المنت‌های یک آرایه را به ترتیب الفبا، مرتب می‌کند. و المنت‌های تعریف نشده را حذف می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki", "lime"];

color.sort();

// Report
alert(color);  // beige, gold, khaki, lime, olive, red

---

arr.sort(function(a, b) {…})

استفاده از متد sort بدون پارامتر، آرایه را به ترتیب الفبا مرتب می‌کند. بنابراین اگر به ترتیب عدد یا ترتیب دیگری بخواهید sort کنید؛ باید از یک فانکشن برای مقایسه استفاده کنید. این فانکشن دو پارامتر را می‌گیرد و پس از انجام عملیات روی آنها، یک عدد برمی‌گرداند. مثبت یا منفی بودن آن عدد نشان می‌دهد که کدامیک از دو پارامتر باید قبل از دیگری باشد.

• اگر function(a, b) < 0 بود؛ a قبل از b
• اگر function(a, b) = 0 بود؛ جای a و b تغییر نمی‌کند.
• اگر function(a, b) > 0 بود؛ a بعد از b

اگر بخواهید یک مجموعه از اعداد را از کوچک به بزرگ sort کنید می‌توانید از فانکشن زیر استفاده نمایید.

const compare = function(a, b) {

  if (a < b) { return -1; }

  if (a > b) { return 1;  }

  // a = b
  return 0;
}

// Short form
const compare = function(a, b) {
  return a - b;
}

// Arrow form
const compare = (a, b) => a - b;

این فانکشن را می توانید مستقیما در sort تعریف کنید.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

num.sort((a, b) => a - b);

// Report
alert(num);  // 1, 2, 3, 4, 5

---

arr.filter(function(value, index) {…})

با المنت‌هایی که تست را پاس کنند، یک آرایه جدید می سازد.

• متد filter یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• باید این فانکشن مقدار true یا false را برگرداند.

مثال زیر المنت‌های فرد را حذف می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.filter(val => val % 2 == 0);

// Report
alert(result);  // 4, 2

---

arr.map(function(value, index) {…})

یک فانکشن را روی همه المنت‌های آرایه اجرا می‌کند و آرایهٔ جدید می‌سازد.

• متد map یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• مقدار بازگشتی این فانکشن در آرایه جدید قرار می‌گیرد.

مثال زیر مقدار هر المنت‌ را دو برابر می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.map(val => val * 2);

// Report
alert(result);  // 8, 4, 10, 2, 6

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• ابتدا تعدادی عدد را بگیرد سپس میانه آنها را محاسبه و گزارش کند. (تعداد اعداد از پیش معلوم نیست.)