آموزش جاوا اسکریپت – فصل پانزدهم: آرایه (Array)

آرایه ها در زبان برنامه نویسی جاوا اسکریپت وظیفه مهمی برعهده دارند. آرایه ها می توانند مقادیر مختفی از انواع داده های مختلفی را به صوررت همزمان درون خود نگه دارند. برنامه نویسان می توانند به اطلاعات ذخیره شده درون یک آرایه جاوا اسکریپت با اندیس (index) آن ها دسترسی پیدا کنند.

جاوا اسکریپت - فصل پانزدهم: آرایه Array

ما در مورد متغیر ها در فصول گذشته به طور کامل توضیح دادیم. در آنجا بیان کردیم که یک متغیر می تواند یک مقدار را نگه دارد. به عنوان مثال در یک متغیر که به صورت var i = 1; تعریف می شود در واقع i مقدار 1 نگه خواهد داشت.

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

آرایه قادر است چندین مقدار از انواع داده مختلف را درون خود نگهداری کند.

آرایه نوع خاصی از متغیر است که می تواند با یک سینتکس خاص چندین مقدار را نگه دارد.

هر مقدار درون یک آرایه به یک “شماره خانه” متصل می شود. شماره خانه، اندیس یا همان index از صفر شروع می شود و نهایتی ندارد.

شکل گرافیکی آرایه

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

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

  • تعریف آرایه به صورت لیترال (Literal)
  • تعریف با استفاده از سازنده آرایه (Array Constructor)

تعریف آرایه به صورت Literal

این روش آسان ترین روش برای تعریف آرایه در جاوا اسکریپت است.

فقط کافی است در هنگام تعریف متغیر در بین [] از لیستی از مقادیر جدا شده با کاما , استفاده کنید.

سینتکس تعریف آرایه به صورت لیترال در جاوا اسکریپت:

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

مثال زیر نشان می دهد که شما چگونه می توانید یک آرایه را به صورت لیترال تعریف کنید:

var stringArray = ["one", "two", "three"];

var numericArray = [1, 2, 3, 4];

var decimalArray = [1.1, 1.2, 1.3];

var booleanArray = [true, false, false, true];

var mixedArray = [1, "two", "three", 4];

فصل 15 – مثال 1

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

تعریف با استفاده از سازنده آرایه (Array Constructor)

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

سینتکس تعریف آرایه با استفاده از Array Constructor:

var arrayName = new Array();

var arrayName = new Array(Number length);

var arrayName = new Array(element1, element2, element3,... elementN);

مثال زیر نشان می دهد که شما چگونه می توانید یک آرایه را با استفاده از سازنده آرایه تعریف کنید:

var stringArray = new Array();
stringArray[0] = "one";
stringArray[1] = "two";
stringArray[2] = "three";
stringArray[3] = "four";

var numericArray = new Array(3);
numericArray[0] = 1;
numericArray[1] = 2;
numericArray[2] = 3;

var mixedArray = new Array(1, "two", 3, "four");

فصل 15 – مثال 2

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

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

var stringArray = new Array();

stringArray["one"] = "one";
stringArray["two"] = "two";
stringArray["three"] = "three";
stringArray["four"] = "four";

فصل 15 – مثال 3

دسترسی به مقادیر درون یک آرایه در جاوا اسکریپت

مقادیر درون یک آرایه را می توان با استفاده از “شماره خانه” (index) آن مقدار در آرایه به دست آورد.

برای دسترسی به یک خانه خاص از آرایه می توانید شماره آن خانه را در بین [] جلوی نام آرایه قرار دهید. مانند مثال زیر:

var stringArray = new Array("one", "two", "three", "four");

stringArray[0]; // returns "one"
stringArray[1]; // returns "two"
stringArray[2]; // returns "three"
stringArray[3]; // returns "four"

var numericArray = [1, 2, 3, 4];
numericArray[0]; // returns 1
numericArray[1]; // returns 2
numericArray[2]; // returns 3
numericArray[3]; // returns 4

فصل 15 – مثال 4

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

بدست آوردن تعداد مقادیر درون یک آرایه در جاوا اسکریپت

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

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

به مثال زیر توجه کنید:

var stringArray = new Array("one", "two", "three", "four");

for (var i = 0; i < stringArray.length ; i++) 
{
    stringArray[i];
}

فصل 15 - مثال 5

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

concat()

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

var arr1 = ["نادرخان", "کریم خان"];
var kings = arr1.concat(["کورش", "داریوش", "خشایار"]);

فصل 15 - مثال 6

every()

یک فانکشن به عنوان پارامتر دریافت می کند و بررسی می کند که آیا تمامی خانه های آرایه با شرایط فانکشن سازگار هستند یا نه. اگر نباشند false برمی گرداند.

var ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

فصل 15 - مثال 7

filter()

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

var ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

فصل 15 - مثال 8

forEach()

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

<html>
<body>
 <button onclick="numbers.forEach(myFunction)">Try it</button>
<p id="demo"></p>

<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];

function myFunction(item, index) {
  demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
</script>
</body>
</html>

فصل 15 - مثال 9

indexOf()

شماره اندیس اولین رخداد از مقدار داده شده به عنوان پارامتر را باز می گرداند. در صورتی که مقدار داده شده در هیچ خانه ای از آرایه وجود نداشته باشد، مقدار -1 باز خواهد گشت.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

فصل 15 - مثال 10

join()

یک رشته از المان های آرایه را بر می گرداند که با جداکننده داده شده، جدا شده اند.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

فصل 15 - مثال 11

lastIndexOf()

شماره اندیس آخرین رخداد از مقدار داده شده به عنوان پارامتر را باز می گرداند. در صورتی که مقدار داده شده در هیچ خانه ای از آرایه وجود نداشته باشد، مقدار -1 باز خواهد گشت.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

فصل 15 - مثال 12

map()

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

مانند مثال زیر که یک آرایه از ریشه اعداد درون آرایه numbers را چاپ می کند.

var numbers = [4, 9, 16, 25];

function myFunction() {
  x = document.getElementById("demo")
  x.innerHTML = numbers.map(Math.sqrt);
}

فصل 15 - مثال 13

pop()

آخرین المان درون آرایه را جا می کند و باز می گرداند. المانی که با دستور pop باز می گردد از آرایه اصلی حذف می شود.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

فصل 15 - مثال 14

push()

یک اللمان را به آخر آرایه اضافه می کند و اندازه آرایه جدید تولید شده را باز می گرداند.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

فصل 15 - مثال 15

reduce()

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

به مثال زیر توجه کنید، این مثال جمه تمامی اعداد درون آرایه را به کمک فانکشن reduce() چاپ می کند:

var numbers = [65, 44, 12, 4];

function getSum(total, num) {
  return total + num;
}

function myFunction(item) {
  document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

فصل 15 - مثال 16

reduceRight()

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

var numbers = [65, 44, 12, 4];

function getSum(total, num) {
  return total + num;
}

function myFunction(item) {
  document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}

فصل 15 - مثال 17

reverse()

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

فصل 15 - مثال 18

shift()

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

فصل 15 - مثال 19

slice()

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

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

فصل 15 - مثال 20

some()

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

var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

فصل 15 - مثال 21

sort()

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

فصل 15 - مثال 22

splice()

المان هایی را به نقاط مشخص شده در آرایه اضافه می کند.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

فصل 15 - مثال 23

toString()

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();

فصل 15 - مثال 24

unshift()

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

فصل 15 - مثال 25

ویدیوها و مطالب مشابه