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

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

در حالت عادی متغیر می‌تواند تنها یک مقدار را درون خود ذخیره کند.

حال اگر چند مقدار مختلف داشته باشیم پس مجبوریم برای هر یک،یک متغیر تعریف کنیم. آیا این کار، منطقی است؟این کار علاوه بر شلوغ کردن محیط کدنویسی باعث کند شدن اجرای برنامه شما می‌شود. از طرفی اگر شما بخواهید روی آیتم های خود حلقه ایجاد کنید و یکی را انتخاب کنید چطور؟

مثال:

let Name1 = "amir";
let Name2 = "shahryar";
let Name3 = "mohsen";

let Name1 = "amir";

let Name2 = "shahryar";

let Name3 = "mohsen";

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

مثال:

const fullName = ["amir", "javanmit", 29];

1	const fullName = ["amir", "javanmit", 29];

همانطور که مشاهده میکنید آرایه را با کلمه کلیدی const تعریف کرده ایم. این به معنی این نیست که مقادیر آرایه را نمیتوان تغییر داد. بلکه نمیتوان متغیر دیگری به همان نام ایجاد کرد.

اندیس یا index آیتم ها در آرایه ها

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

شماره موقعیت آیتم ها از عدد ۰ شروع می‌شود و می‌توان به رجوع به آن شماره مقدار آیتم موردنظر خود را برگشت داد.

نحوه تعریف آرایه

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

مثال:

const/var/let name = [item1,item2,...];

1	const/var/let name = [item1,item2,...];

وجود فاصله و رفتن به خط بعد در تعریف آرایه اهمیتی ندارد. این فاصله و … برای بالا بردن خوانایی کد، توسط برنامه نویس است.

شما میتوانید آیتم های آرایه خود را در چند خط تعریف کنید.

مثال:

const cars = [
"amir",
"javanmir",
29
];

const cars = [

"amir",

"javanmir",

];

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

مثال:

const fullName = [];
fullName[0]= "amir";
fullName[1]= "javanmir";
fullName[2]= 29;

const fullName = [];

fullName[0]= "amir";

fullName[1]= "javanmir";

fullName[2]= 29;

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

استفاده از این روش را پیشنهاد نمیکنیم چون باعث کندی در اجرای اسکریپت می‌شود و وقتی میتوان با روش عادی تعریف کنیم چرا باید توسط new و از طریق آبجکت آرایه خود را تعریف کنیم.

مثال:

const fullName = new Array("amir", "javanmir", 29);

1	const fullName = new Array("amir", "javanmir", 29);

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

مثال:

const fullName = [];
typeof fullName;
//Object

const fullName = [];

typeof fullName;

//Object

در آبجکت برای تعریف آیتم ها باید از {} استفاده کرد در صورتی که در آرایه از [] استفاده میشود.

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

مثال:

const fullName = ["amir", "javanmir", 29];
let x = fullName[0];
//amir

const fullName = ["amir", "javanmir", 29];

let x = fullName[0];

//amir

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

مثال:

const fullName = {
name: "amir",
family: "javanmir",
age: 29
}
fullName.name;
//amir

const fullName = {

name: "amir",

family: "javanmir",

age: 29

}

fullName.name;

//amir

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

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

مثال:

const fullName = ["amir", "javanmir", 29];
let x = fullName[0];
//amir

const fullName = ["amir", "javanmir", 29];

let x = fullName[0];

//amir

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

مقدار یک آرایه را میتوان بعد از تعریف آن تغییر داد. برای تغییر مقدار آیتم یک آرایه باید آرایه را بهمراه ایندیس آن برابر با مقدار جدید قرار داد.

مثال:

fullName[0] = "amir javanmir";

1	fullName[0] = "amir javanmir";

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

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

مثال:

const fullName = ["amir", "javanmit", 29];
document.getElementById("demo").innerHTML = fullName;

1 2	const fullName = ["amir", "javanmit", 29]; document.getElementById("demo").innerHTML = fullName;

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

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

شما میتوانید مقدار آیتم آرایه خود را از هر نوعی تعیین کنید.مقدار شما می تواند آبجکت،تابع یا حتی آرایه دیگر باشد.

مثال:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

myArray[0] = Date.now;

myArray[1] = myFunction;

myArray[2] = myCars;

خصوصیت ها و متدهای آرایه

آرایه ها دارای متدها و خصوصیت هایی جهت کنترل مقادیر آرایه دارد.در اینجا برخی از مهمترین آنها را بهمراه مثال توضیح می دهیم.

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

مثال اشتباه:

const fullName = [];
fullName[] = "amir javanmir";

1 2	const fullName = []; fullName[] = "amir javanmir";

مثال درست:

const fullName = [];
fullName[0] = "amir javanmir";

1 2	const fullName = []; fullName[0] = "amir javanmir";

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

برای دسترسی به نخستین آرایه باید از اندیس ۰ استفاده کنیم.

مثال:

let fullName = ["amir", "javanmir", 29];
fullName[0];
//amir

let fullName = ["amir", "javanmir", 29];

fullName[0];

//amir

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

برای دسترسی به آخرین آیتم آرایه باید از اندیس (طول آرایه-۱) استفاده کنیم.

مثال:

let fullName = ["amir", "javanmir", 29];
fullName[fullName.length - 1];
//29

let fullName = ["amir", "javanmir", 29];

fullName[fullName.length - 1];

//29

حلقه آیتم های آرایه

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

مثال:

let fullName = ["amir", "javanmir", 29]
let text = "<ul>";
for(let i = 0;i < fullName.length;i++){
text += "<li>"+ fullName[i]+"</li>";
}
text += "</ul>";
/*
amir
javanmir
29
/*

let fullName = ["amir", "javanmir", 29]

let text = "<ul>";

for(let i = 0;i < fullName.length;i++){

text += "<li>"+ fullName[i]+"</li>";

}

text += "</ul>";

amir

javanmir

راه دیگر حلقه آیتم های آرایه استفاده از متد forEach از طریق خود آرایه است.این متد یک تابع را بعنوان callback function صدا می زند.

مثال:

let fullName = ["amir", "javanmir", 29]
let text = "<ul>";
fullName.forEach(function(value){
text += "<li>"+value+"</li>";
})
text += "</ul>";
/*
amir
javanmir
29
/*

let fullName = ["amir", "javanmir", 29]

let text = "<ul>";

fullName.forEach(function(value){

text += "<li>"+value+"</li>";

})

text += "</ul>";

amir

javanmir

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

برخی از زبان های برنامه نویسی نظیر php دارای کلید برای آیتم های خود هستند.این نوع آرایه ها به associative arrays معروف هستند.

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

مثال:

const person = [];
person[0] = "amir";
person[1] = "javanmir";
person[2] = 29;
person.length;
//3

const person = [];

person[0] = "amir";

person[1] = "javanmir";

person[2] = 29;

person.length;

//3

person[0]+" "+person[1] ;
//amir javanmir

1 2	person[0]+" "+person[1] ; //amir javanmir

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

مثال:

const person = [];
person["firstName"] = "amir";
person["lastName"] = "javanmir";
person["age"] = 29;
person.length;
//0
person[0];
//undefined

const person = [];

person["firstName"] = "amir";

person["lastName"] = "javanmir";

person["age"] = 29;

person.length;

//0

person[0];

//undefined

تفاوت های آرایه با آبجکت

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

چه زمانی از آرایه ها و چه زمانی از آبجکت ها استفاده کنیم؟

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

ساخت آرایه با ایجاد آبجکت و دستور new

آرایه ها ساخته شده از روی تابع سازنده Array() هستند. در صورتیکه این تابع سازنده را به دستور new بسازید آرایه جدید ساخته می‌شود. این روش بدلیل منطقی نبودن و پیچیده شدن کد پیشنهاد نمیشود. برای ساخت آرایه از براکت باز و بسته [] استفاده کنید.

مثال:

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
//40, 100, 1, 5, 25, 10

const points = new Array(40, 100, 1, 5, 25, 10);

const points = [40, 100, 1, 5, 25, 10];

//40, 100, 1, 5, 25, 10

استفاده از دستور new در ساخت آرایه ممکن است موجب خرابی کد شود. در اینجا ما یک آرایه ۳ آیتمی داریم.

مثال:

const points = new Array(40, 100, 1);

1	const points = new Array(40, 100, 1);

حال به نظر شما این یک آرایه تک آیتمی است؟

مثال:

const points = new Array(4);

1	const points = new Array(4);

جواب: خیر این به تعداد عدد وارد شده رشته خالی در نظر می گیرد.

//,,,

//,,,

بنابراین این دو دستور با هم برابر نیستند

const points = [40];
const points = New Array(40);

1 2	const points = [40]; const points = New Array(40);

از کجا میتوان فهمید که نوع متغیر ما آرایه است؟ مشکلی که در اینجا وجود دارد این است که برای آرایه ها نوع داده object برگشت داده میشود.

مثال:

const fullName = ["amir", "javanmir", "29"];
typeof fullName;
//Object

const fullName = ["amir", "javanmir", "29"];

typeof fullName;

//Object

روش اول:

از متد isArray زیر مجموعه تابع سازنده Array استفاده کنید.

مثال:

Array.isArray(fullName);
//true

1 2	Array.isArray(fullName); //true

روش دوم:

استفاده از عملگر instanceof برای بررسی اینکه آرایه ما برگرفته از Array است.

مثال:

const fullName = ["amir", "javanmir", "29"];
fullName instanceof Array
//true

const fullName = ["amir", "javanmir", "29"];

fullName instanceof Array

//true

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

نام تابع	توضیح	نحوه نوشتن
خصوصیت length	این خصوصیت تعداد آیتم های آرایه موردنظر را برگشت یا طول جدیدی تنظیم می کند.	array.length; array.length = number;

نام تابع

توضیح

نحوه نوشتن

خصوصیت length

این خصوصیت تعداد آیتم های آرایه موردنظر را برگشت یا طول جدیدی تنظیم می کند.

array.length;

array.length = number;

لیست توابع آرایه ها در جاوااسکریپت

نام تابع	توضیح	نحوه نوشتن
تابع push	این متد مقدار جدید به انتهای آرایه اضافه می کند. این متد طول آرایه را تغییر می دهد. در صورتی که بخواهیم بدون متد مقدار جدید خود را به انتهای آرایه اضافه کنیم براساس طول آرایه المنت جدید خود را اضافه می کنیم.	array.push(item1, item2, …, itemX);
تابع toString	این متد آرایه شما را به رشته تبدیل می کند.مقادیر آرایه را با کاما انگلیسی , در خروجی نمایش میدهد.	array.toString();
تابع isArray	این متد از توابع زیر مجموعه تابع سازنده Array است و بررسی می‌کند مقدار داده شده در پارامتر آرایه است یا خیر.	Array.isArray(obj);
تابع concat	این متد دو یا بیشتر از دو آرایه را بهم متصل می کند. این متد در رشته ها نیز وجود دارد و رشته ها را بهم متصل میکند.	array1.concat(array2, array3, …, arrayX);
تابع join	این متد مقادیر آرایه مورد نظر را در قالب یک رشته برگشت می‌دهد. این تابع تغییری در آرایه اصلی ایجاد نمی‌کند. برای جداسازی آیتم های آرایه در رشته بصورت پیش فرض از , استفاده می‌کند اما می‌توانیم بعنوان پارامتر جدا کننده خود را مشخص کنیم.	array.join(separator);
تابع pop	این متد آخرین آیتم آرایه موردنظر را پاک می کند.	array.pop();
تابع shift	این متد اولین آیتم آرایه موردنظر را پاک می کند.	array.shift();
تابع unshift	این متد به ابتدای آرایه موردنظر آیتم جدید را اضافه می کند.	array.unshift(item1, item2,…);
تابع sort	مقادیر آرایه خود را میتوان براساس حروف یا اعداد و از کوچک به بزرگ ascending و بزرگ به کوچک Descending صورت بگیرد.	array.sort(compareFunction);
تابع reverse	این تابع چیدمان قرارگیری آیتم های آرایه را برعکس می‌کند.	array.reverse();
تابع forEach	این متد مربوط به پیمایش آیتم های آرایه است.این متد یک تابع را برای هریک از آیتم های آرایه فراخوانی می کند.	array.forEach(function(currentValue, index, arr), thisValue);
تابع map	این متد شبیه به متد foreach است با این تفاوت که مقدار بازگشتی آن یک آرایه جدید است که در صورت تغییر مقادیر آرایه اصلی در آرایه جدید تغییر پیدا می کند.	array.map(function(currentValue, index, arr), thisValue);
تابع filter	این متد یک تابع دریافت می‌کند که دارای دستور شرطی است و براساس آن تابع آیتم های آرایه موردنظر را فیلتر می‌کند.	array.filter(function(currentValue, index, arr), thisValue);
تابع reduce	این متد یک تابع دریافت می‌کند که بر روی هر یک از مقادیر آرایه موردنظر کار میکند و در نهایت براساس محاسباتی که انجام میدهد یک مقدار را برگشت می‌دهد.	array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
تابع reduceRight	این متد یک تابع دریافت می‌کند که بر روی هر یک از مقادیر آرایه موردنظر کار میکند و در نهایت براساس محاسباتی که انجام میدهد یک مقدار را برگشت می‌دهد.	array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
تابع every	این متد بر روی تک تک المنت ها اجرا می شود و در صورتی که یکی از مقادیر false برگشت دهد سایر مقادیر را چک نمی کند.	array.every(function(currentValue, index, arr), thisValue);
تابع some	این متد بر روی تک تک المنت ها اجرا می شود و در صورتی که یکی از مقادیر true برگشت دهد سایر مقادیر را چک نمی کند.	array.some(function(currentValue, index, arr), thisValue);
تابع indexOf	این متد یک مقدار رشته ای دریافت و درون آرایه موردنظر جستجو میکند.در صورت پیدا کردن واژه موردنظر موقعیت کاراکتر را برگشت می‌دهد.	array.indexOf(item, start);
تابع lastIndexOf	این متد یک مقدار رشته ای دریافت و درون آرایه موردنظر از انتها جستجو میکند.در صورت پیدا کردن واژه موردنظر موقعیت کاراکتر را برگشت می‌دهد.جستجو از انتهای آرایه به ابتدا است.	array.lastIndexOf(item, start);
تابع includes	با استفاده از این متد میتوان در آرایه موردنظر مقدار خود را جستجو کرد و مطمعن شد که مقدار موردنظر وجود دارد یا خیر.	array.includes(element, start);
تابع find	این متد به محض پیدا کردن مقدار موردنظر آن را برگشت می‌دهد.	array.find(function(currentValue, index, arr),thisValue);
تابع findIndex	این تابع یک تابع را دریافت می کند و براساس دستور شرطی که وجود دارد اولین مقداری که پیدا کند موقعیت آن را برگشت می دهد.	array.findIndex(function(currentValue, index, arr), thisValue);
تابع Array.from	این متد از متدهای جدید اکما۶ است. از این متد در هر آبجکتی که قابلیت iterable شدن و خصوصیت length داشته باشد مورد استفاده قرار می گیرد و یک آرایه برگشت می دهد.	Array.from(object, mapFunction, thisValue);
تابع Array.keys	این تابع از توابع جدید es6 می باشد. این تابع یک Array Iterator که هر کدام دارای کلید مخصوص هستند.با استفاده از متد next می توان به آیتم بعدی رفت.	array.keys();
تابع splice	با استفاده از این تابع میتوان از محل موردنظر تعدادی آیتم را حذف و تعدادی آیتم را به آن اضافه کرد.	array.splice(index, howmany, item1, ….., itemX);

کلمات کلیدی را وارد نمایید

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

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

اندیس یا index آیتم ها در آرایه ها

نحوه تعریف آرایه

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

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

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

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

خصوصیت ها و متدهای آرایه

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

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

حلقه آیتم های آرایه

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

تفاوت های آرایه با آبجکت

چه زمانی از آرایه ها و چه زمانی از آبجکت ها استفاده کنیم؟

ساخت آرایه با ایجاد آبجکت و دستور new

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

لیست توابع آرایه ها در جاوااسکریپت

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

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

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

دسترسی سریع

کلمات کلیدی را وارد نمایید

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

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

اندیس یا index آیتم ها در آرایه ها

نحوه تعریف آرایه

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

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

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

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

خصوصیت ها و متدهای آرایه

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

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

حلقه آیتم های آرایه

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

تفاوت های آرایه با آبجکت

چه زمانی از آرایه ها و چه زمانی از آبجکت ها استفاده کنیم؟

ساخت آرایه با ایجاد آبجکت و دستور new

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

لیست توابع آرایه ها در جاوااسکریپت

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

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

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

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب