این آموزش در تاریخ ۱۴۰۱/۰۳/۲۸ آپدیت شده است.
کار با آرایه ها یا Arrays در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با آرایه ها یا Arrays در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آرایه ها یا Arrays در جاوااسکریپت
آرایه ها یا Arrays در جاوااسکریپت ، دقیقا همون متغیرها هستن ( مثه متغیری که با Var یا Let و.. تعریف میشه ) فقط با این تفاوت که آرایه ها میتونن در لحظه بیش از چندین داده رو نگهداری کنند.
فرض میکنیم میخوایم چندین متغیر با چندین مقدار ایجاد نماییم، خب یه روش اینه که بیایم و دونه دونه متغیرهارو تعریف و مقدار بدیم بهشون : ( مثه دستور زیر )
|
1 2 3 |
var a = "Salam"; var b = "Khobi?"; var c = "Free-Learn"; |
ولی خب ما میتونیم خیلی راحت یه آرایه درست کنیم و همین مقادیر رو داخلش قرار بدیم، اینجوری دیگه نیاز نیست مثلا ۳ تا متغیر مجزا درست کنیم، بلکه یک عدد متغیر درست میکنیم با مقادیر مختلف. ( مثه دستور زیر )
|
1 |
var a = ["Salam" , "Khobi?" , "Free-Learn"]; |
تموم شد رفت، این میشه آرایه ،پس دیگه بدونید آرایه ها میتونن در لحظه چندین مقدار رو نگهداری کنند، و در نهایت ما میتونیم به این مقادیر به راحتی دسترسی پیدا کنیم و آنها را به نمایش درآوریم.
Free-Learn
شکل کلی یک آرایه در جاوااسکریپت
در ادامه میخوایم با شکل کلی یک آرایه در زبان جاوااسکریپت آشنا بشیم، بطور کلی یه آرایه رو میتونیم بصورت زیر نمایش بدیم :
|
1 |
var Array_Name = [ Item1 , Item2 , Item3 , ... , Item_n ]; |
که Array_Name میشه نام آرایه مون ، بعدش یه علامت مساوی = میزاریم و بعدش براکت باز ] و در نهایت آیتم ها یا مقادیر آرایه رو وارد میکنیم ( آیتم ها با کاما , از همدیگه جدا میشن ) و در آخرم براکت بسته [ میزاریم.
Free-Learn
نحوه ایجاد آرایه در جاوااسکریپت
در ادامه ی آموزش کار با آرایه ها یا Arrays در جاوااسکریپت میخوایم با نحوه ایجاد و یا تعریف کردن آرایه ها در زبان جاوااسکریپت آشنا بشیم.
خب برای ایجاد یا تعریف آرایه ها در زبان جاوا اسکریپت چندین روش وجود دارد که این روش ها به شرح زیر می باشند :
- تعریف در یک عبارت ( شماهم از این روش استفاده کنید )
- تعریف با استفاده از کلمه کلیدی
New - تعریف بصورت مجزا
هریک از این روش ها درکل فرقی نمیکنن و همشون در مجموع آرایه رو تعریف میکنن ولی خب بهترین و بهینه ترین روش ، روش اولی هستش و شماهم سعی کنید از این روش استفاده کنید.
- تعریف در یک عبارت ( روش پیشنهادی )
این روش علاوه بر ساده بودن ، روش پیشنهادی نیز می باشد و سعی کنید همیشه برای تعریف یا ایجاد آرایه ها از این روش استفاده نمایید.
|
1 2 3 4 5 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; </script> |
- تعریف با استفاده از کلمه کلیدی New
چه در این روش یا روش قبلی هیچ فرقی ندارند و در عمل یکی هستند ولی خب کلا استفاده از new پیشنهاد نمیشه و باعث میشه سرعت اجرای برنامه کاهش پیدا کنه و از طرفی این روش خوانایی ضعیف تری نسبت به روش قبلی داره.
|
1 2 3 4 5 |
<script> var Daneshjoo = new Array("Sadegh", "Ali", "Maryam", "Elnaz"); </script> |
- تعریف بصورت مجزا
تو این روش اول خوده آرایه رو تعریف میکنیم بعدش آیتم / خانه هاشو تعریف میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var Daneshjoo = []; Daneshjoo[0] = "Sadegh"; Daneshjoo[1] = "Ali"; Daneshjoo[2] = "Maryam"; Daneshjoo[3] = "Elnaz"; document.write( Daneshjoo ); </script> |
Free-Learn
نحوه فراخوانی یا نمایش آیتم های آرایه
حال میخوایم یاد بگیریم که چجوری میتونیم آیتم ها ( یا درکل همون مقادیر / آیتم های موجود در آرایه ها ) رو در خروجی به نمایش در آوریم.
برای دسترسی به آیتم ها ( یا هم میتونیم بگیم خانه های ) یک آرایه ما باید شناسه یا شماره ایندکس Index اون آیتم / خانه رو وارد کنیم، که دیگه یکبار برای همیشه بدونید در زبان جاوااسکریپت شماره ایندکس همیشه از ۰ شروع میشه تا دیگه هرچقدر آیتم در آرایه وجود داشته باشه.
در زبان جاوا اسکریپت شماره ایندکس همیشه از ۰ شروع میشه.
مثال شماره ۱ : دسترسی به اولین آیتم آرایه و نمایشش در خروجی
|
1 2 3 4 5 6 7 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Result = Daneshjoo[0]; document.write( Result ); </script> |
مثال شماره ۲ : دسترسی به اولین آیتم آرایه که با کلمه کلیدی New تعریف شده هست ( نحوه فراخوانی با مثال بالایی هیچ فرقی نمیکنه و یکی هستن )
|
1 2 3 4 5 6 7 |
<script> var Daneshjoo = new Array("Sadegh", "Ali", "Maryam", "Elnaz"); var Result = Daneshjoo[0]; document.write( Result ); </script> |
مثال شماره ۳ : نمایش یکجای تمامی آیتم های یک آرایه – روش اول
|
1 2 3 4 5 6 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; document.write( Daneshjoo ); </script> |
مثال شماره ۴ : نمایش یکجای تمامی آیتم های یک آرایه – روش دوم
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> var Daneshjoo, MyResult , Array_Length, i; Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // بدست آوردن تعداد عددی کل آیتم های آرایه Array_Length = Daneshjoo.length; // قرار دادن دونه دونه آیتم ها در یک لیست نامرتب MyResult = "<ul>"; for (i = 0; i < Array_Length; i++){ MyResult += "<li>" + Daneshjoo[i] + "</li>"; } MyResult += "</ul>"; // چاپ کردن لیست آیتم ها در خروجی document.write( MyResult ); </script> |
Free-Learn
نحوه تغییر دادن مقادیر آرایه ها
خب دوستان در ادامه ی آموزش کار با آرایه ها یا Arrays در جاوااسکریپت میخوایم یاد بگیریم که چجوری میتونیم آیتم ها یا در واقع مقادیر یک آرایه رو تغییر ( ویرایش / آپدیت ) کنیم.
ما میتونیم هر لحظه که خواستیم مقدار یک آیتم رو تغییر بدیم ( یا آپدیت کنیم ) و دیگه اون مقدار جدید در خروجی نمایش داده میشه، و مقدار قبلیش نادیده گرفته میشه.
مثال شماره ۱ : تغییر دادن مقدار / آیتم اول از یک آرایه
|
1 2 3 4 5 6 7 8 9 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // آپدیت کردن مقدار Daneshjoo[0] = "Reza"; document.write( Daneshjoo[0] ); </script> |
Free-Learn
نحوه دسترسی به اولین و آخرین آیتم آرایه
خب برای دسترسی به اولین آیتم که میدونید دیگه ، باید از شماره ایندکس ۰ استفاده کنیم.
|
1 2 3 4 5 6 7 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Result = Daneshjoo[0]; document.write( Result ); </script> |
ولی خب بنظره شما برای آخرین آیتم باید چکار کنیم؟
اینکه بخوایم خودمون دستی شماره ایندکس آخرین آیتم رو بزنیم، خب طبیعتا اینکار بهینه نیست و ممکنه دوباره مقدار جدید به آرایه اضافه شه خب اونموقع باید دوباره بیایم و دستی شماره ایندکس آخرین آیتم رو بزنیم.
ولی لازم نیست دستی کاری انجام بدیم، خیلی راحت با یه تکه کد میتونیم آخرین آیتم موجود در آرایه رو بدست بیاریم : برای اینکار باید از متد length استفاده نماییم.
متد length بطور کلی طول ( تعداد عددی ) آیتم هارو بدست میاره، مثلا میگه فلان آرایه ۵ آیتم داره – حال ما میتونیم با همین متد کاری کنیم که به آخرین آیتم دسترسی پیدا کنیم.
مثال شماره ۱ : بدست آوردن آخرین آیتم آرایه
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // بدست آوردن آخرین آیتم var Result = Daneshjoo[Daneshjoo.length-1]; document.write( Result ); </script> |
مثال شماره ۲ : بدست آوردن دومین آیتم، از آخر آرایه ( در کل فرقی نمیکنه هرچقدر بخواید از آخر به اول بیاید کافیه از عدد منفی استفاده کنید )
|
1 |
var Result = Daneshjoo[Daneshjoo.length-2]; |
Free-Learn
نحوه اضافه کردن آیتم جدید به آرایه
به راحتی و با استفاده از متد ()push میتونیم مقادیر ( آیتم ) جدید به آرایه اضافه کنیم.
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // اضافه کردن آیتم جدید Daneshjoo.push("Mehran"); document.write( Daneshjoo ); </script> |
Free-Learn
نحوه حذف کردن آیتم از آرایه
ما از ۲ روش میتونیم آیتم های یک آرایه رو حذف کنیم که این روش ها بصورت زیر می باشد :
- روش اول : استفاده از کلمه کلیدی delete ( حذف از طریق شماره ایندکس )
- روش دوم : استفاده از متد ()pop ( حذف یک آیتم از آخر آرایه )
مثال شماره ۱ : روش اول » با استفاده از کلمه کلیدی delete میتونیم به راحتی آیتم های یک آرایه رو حذف کنیم
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // حذف صادق و علی delete Daneshjoo[0]; delete Daneshjoo[1]; document.write( Daneshjoo ); </script> |
مثال شماره ۲ : روش دوم » استفاده از متد ()pop ( این متد از آخر آرایه حذف میکنه، یعنی مثلا در مثال زیر Elnaz حذف خواهد شد )
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // حذف آخرین آیتم Daneshjoo.pop(); document.write( Daneshjoo ); </script> |
Free-Learn
نکات و توضیحات
- آرایه ها در واقع یک متغیر هستند برای نگهداری چندین مقدار بصورت همزمان
- تفاوت آرایه ها با اشیاء یا Object ( در آرایه ها با شماره ایندکس به آیتم ها دسترسی پیدا میکنیم ولی در اشیاء از طریق نام آیتم ) ( مثال با اشیاء )
- با استفاده از شماره ایندکس میتونیم به آیتم های آرایه دسترسی داشته باشیم
- شماره ایندکس همیشه از ۰ شروع میشه
- برای نمایش تمامی آیتم های یک آرایه ساده ترین روش اینه که نام همون آرایه رو به خروجی بفرستیم ( مثال )
- با استفاده از متد length میتونیم طول یک آرایه رو بدست بیاریم
- با استفاده از متد ()push میتونیم آیتم جدید به آرایه اضافه کنیم
- با استفاده از ()pop میتونیم آخرین آیتم از آرایه رو حذف کنیم
