این آموزش در تاریخ ۱۴۰۱/۰۳/۳۰ آپدیت شده است.
کار با متدهای آرایه ها در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با متدهای آرایه ها در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 متدهای آرایه ها در جاوااسکریپت
- 2 متد ()toString در آرایه ها
- 3 متد ()join در آرایه ها
- 4 متد ()push در آرایه ها
- 5 متد ()pop در آرایه ها
- 6 متد ()shift در آرایه ها
- 7 متد ()unshift در آرایه ها
- 8 متد ()splice در آرایه ها
- 9 متد ()concat در آرایه ها
- 10 متد ()slice در آرایه ها
- 11 متد ()sort در آرایه ها
- 12 متد ()reverse در آرایه ها
- 13 مرتب سازی اعداد در آرایه ها
متدهای آرایه ها در جاوااسکریپت
خب متد یا Method که دیگه میدونید یعنی چی!؟ بطور کلی متد یه تابعی هست که از قبل توسط جاوااسکریپت تعریف شده و میتونه یه عملی رو بروی متغیرها پیاده کنه.
مثلا ما متدهای رشته داریم یا متدهای اعداد ، که میبینی هرکدوم از این متدها میتونن بروی رشته ها یا مثلا اعداد یسری کارای خاص رو انجام بدن. ( مثلا تبدیل یک رشته به عدد صحیح یا برعکس توسط متدها انجام میگیره )
حال آرایه ها هم یسری متدها دارند که میتونیم با استفاده از اونا یسری کارای پیشرفته تری بروی آرایه ها انجام بدیم، مثلا یه متد هست به اسم sort میتونه آیتم های یک آرایه رو مرتب سازی کنه و دیگر متدها که در ادامه باهاشون آشنا خواهید شد.
Free-Learn
متد ()toString در آرایه ها
ما در جلسات قبلی با این متد چندین بار کار کردیم دیگه باید بشناسیدش، از اسمشم مشخصه که چکار میکنه ( میتونه یه آرایه رو به رشته تبدیل کنه )
خب میدونیم که آرایه ها در حالت عادی از نوع شئ یا Object هستند، یعنی اگه بخوایم نوع یه متغیر رو بدست بیاریم خیلی راحت میتونیم با استفاده از متد typeof اینکارو انجام بدیم.
پس اگه typeof یک آرایه رو همانند دستورات زیر بدست بیاریم باید در خروجی object چاپ بشه ( یعنی داره میگه نوع داده ای یک آرایه بصوت شئ می باشد )
|
1 2 3 4 5 6 7 8 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Result = typeof(Daneshjoo); document.write( Result ); </script> |
حال ما با استفاده از متد ()toString میتونیم یک آرایه رو به رشته تبدیل کنیم که در دستورات زیر اینکارو انجام دادیم ، بعدش دوباره از typeof استفاده کردیم که ببینیم نوعش چی میشه!؟ باید در خروجی string چاپ بشه ( یعنی رشته )
|
1 2 3 4 5 6 7 8 9 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var MyConvert = Daneshjoo.toString(); var Result = typeof(MyConvert); document.write( Result ); </script> |
Free-Learn
متد ()join در آرایه ها
کلمه ()join در لغت به فارسی میشه پیوند خوردن / پیوستن ، حال ما با استفاده از این متد میتونیم علامت جداکننده بین آیتم های آرایه رو به دلخواه خودمون مشخص کنیم.
بصورت پیش فرض اگه توجه کنید علامت جداکننده بین آیتم های آرایه کاما ( , ) هست ولی خب ما با استفاده از این متد میتونیم این رو به دلخواه خودمون تغییر بدیم. ( کلا هرچیزی بین دابل کوتیشن یا ” ” قرار بدید اون میشه جداکننده بین آیتم ها )
|
1 2 3 4 5 6 7 8 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Result = Daneshjoo.join(" » "); document.write( Result ); </script> |
Free-Learn
متد ()push در آرایه ها
۲ تا اصصلاح معروف در آرایه ها داریم یکی به اسم پوش یا Push ( به فارسی یعنی فشار دادن / هُل دادن / اضافه کردن ) و دیگری به اسم پاپ یا pop ( به فارسی یعنی از بین بردن / ترکیدن ) ، ما با استفاده از این ۲ متد میتونیم آیتم جدید به آرایه اضافه کنیم یا هم آیتم هارو از آرایه حذف کنیم.
مثال شماره ۱ : اضافه کردن آیتم جدید به آرایه ( آیتم جدید از آخر به آرایه اضافه میشه )
|
1 2 3 4 5 6 7 8 9 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; Daneshjoo.push("Reza"); Daneshjoo.push("Ahmad"); document.write( Daneshjoo ); </script> |
Free-Learn
متد ()pop در آرایه ها
با استفاده از متد ()pop میتونیم یک آیتم از آخر آرایه حذف کنیم، یعنی در واقع این متد آخرین آیتم از آرایه رو حذف میکنه، حال ما علاوه بر این متد ، از کلمه کلیدی delete نیز میتونیم یک آیتم دلخواه رو از طریق شماره جایگاه یا ایندکس از آرایه حذف کنیم.
ولی کلمه کلیدی delete یه عیب داره اونم اینکه بعد از حذف آیتم، بجاش undefined قرار میده، بهمین خاطر بهتره از متد ()pop استفاده کنید.
مثال شماره ۱ : حذف آخرین آیتم از آرایه با استفاده از متد ()pop
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // حذف آخرین آیتم Daneshjoo.pop(); document.write( Daneshjoo ); </script> |
مثال شماره ۲ : حذف آیتم دلخواه از آرایه ( استفاده از کلمه کلیدی 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> |
Free-Learn
متد ()shift در آرایه ها
در ادامه ی آموزش کار با متدهای آرایه ها در جاوااسکریپت میخوایم با متد ()shift آشنا بشیم و ببینیم چی هست و به چه درد میخوره!
از اسم این متد مشخصه که چکار میکنه، این متد در آرایه ها یعنی شیفت دادن یا جابه جا کردن ( یا انتقال دادن ) ، این متد اولین آیتم از آرایه رو حذف میکنه و بقیه آیتم هارو به سمت چپ شیفت ( انتقال ) میده.
در آرایه زیر آیتم Sadegh شماره ایندکسش ۰ هست ولی چون شیفت شده و حذف میشه ، دیگه Ali میاد جاش و این آیتم Ali هست که شماره ایندکسش میشه ۰
|
1 2 3 4 5 6 7 8 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; Daneshjoo.shift(); document.write( Daneshjoo ); </script> |
Free-Learn
متد ()unshift در آرایه ها
خب اینم مشخصه که برخلاف متد ()shift کار میکنه، یعنی اگه ()shift آیتم اول رو حذف میکرد حالا ()unshift یک آیتم جدید به اول آرایه اضافه میکنه.
در واقع اینجوریم میتونیم بگیم، که ()shift آیتم اول رو حذف میکرد و بقیه آیتم هارو به اندازه یک خانه به سمت چپ انتقال میداد ، حال ()unshift یک آیتم اضافه میکنه و بقیه آیتم هارو به اندازه یک خانه به سمت راست انتقال میده.
|
1 2 3 4 5 6 7 8 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; Daneshjoo.unshift("Reza"); document.write( Daneshjoo ); </script> |
Free-Learn
متد ()splice در آرایه ها
با استفاده از این متد هم میتونیم آیتم جدید به آرایه اضافه کنیم ولی با این تفاوت که در این متد میتونیم خودمون به دلخواه مشخص کنیم که آیتم جدید در کجای آرایه اضافه بشه.
این متد ۲ پارامتر میگیره، پارامتر اول ( اون مکانی که باید آیتم اضافه شه ) و پارامتر دوم خوده آیتم که باید اضافه بشه. برای مثال به دستور زیر توجه نمایید :
شکل کلی برای استفاده از متد splice بصورت زیر می باشد :
|
1 |
Daneshjoo.splice( Start_Index , Delete_Item , "Item1", "Item2", "Item_N" ); |
اون Start_Index یعنی اون مکان یا نقطه ای که قرار آیتم جدید درش قرار بگیره، Delete_Item میتونه مشخص کنه که وقتی آیتم جدید اضافه شد چه تعداد از آیتم های بعدی حذف بشن و در نهایت Item1 هم یعنی آیتم های جدیدمون که باید اضافه بشن.
مثال شماره ۱ : اضافه شدن آیتم جدید در ایندکس شماره ۲ و هیچ آیتمی بعد از اون حذف نمیشه
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // گفتیم رضا در جایگاه ایندکس شماره 2 اضافه شه // خب الان مریم در جایگاه ایندکس شماره 2 هس پس رضا میاد جاش میشینه Daneshjoo.splice( 2 , 0, "Reza"); document.write( Daneshjoo ); </script> |
مثال شماره ۲ : اضافه شدن ۲ آیتم جدید در ایندکس شماره ۲ و حذف ۲ آیتم بعد از آن
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // مریم و الناز حذف میشن و رضا و احمد اضافه میشن Daneshjoo.splice( 2 , 2, "Reza" , "Ahmad"); document.write( Daneshjoo ); </script> |
مثال شماره ۳ : حذف آیتم های یک آرایه با استفاده از متد splice ( بدون اینکه بخوایم آیتم جدید اضافه کنیم میتونیم آیتم های فعلی رو حذف کنیم )
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // از ایندکس شماره 0 شروع میکنه و به اندازه 2 آیتم از آیتم هارو حذف میکنه Daneshjoo.splice( 0 , 2); document.write( Daneshjoo ); </script> |
Free-Learn
متد ()concat در آرایه ها
با استفاده از متد ()concat میتونیم یک یا چندین آرایه رو بهمدیگه پیوند ( یا الحاق یا ادغام یا Merge ) کنیم، و همیشه آرایه ادغام شده در قالب یک آرایه مجزا و جدید ایجاد میشود.
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Ostad = ["Mahdavi", "Mohseni"]; var Result = Daneshjoo.concat(Ostad); document.write( Result ); </script> |
مثال شماره ۲ : ادغام کردن چندین آرایه بصورت همزمان ( باید بین آرایه ها کاما یا , گذاشت و از همدیگه جداشون کرد )
|
1 2 3 4 5 |
<script> Daneshjoo.concat( Ostad1 , Ostad2 ); </script> |
Free-Learn
متد ()slice در آرایه ها
خب دوستان همچنان در ادامه ی آموزش کار با متدهای آرایه ها در جاوااسکریپت در ادامه میخوایم با متد ()slice آشنا بشیم.
با استفاده از این متد میتونیم یک یا چندین آیتم از آرایه رو بُرش بزنیم ( یا جدا کنیم )، مثلا میتونیم بگیم آیتم های فلان تا فلان رو انتخاب کنه و در قالب یک آرایه جدید نمایش بده.
مثال شماره ۱ : از آیتم با شماره ایندکس ۲ به بعد رو بُرش میزنه
|
1 2 3 4 5 6 7 8 9 10 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; // جدا کردن آیتم ها از ایندکس شماره 2 به بعد var Result = Daneshjoo.slice(2); document.write( Result ); </script> |
مثال شماره ۲ : آیتم های شماره ایندکس ۰ تا ۲ رو بُرش میزنه ( از ایندکس شروع تا ایندکس پایان، ولی حواستون باشه شامل خوده ایندکس پایان نمیشه.
مثلا slice(0,2) یعنی از ایندکس شماره ۰ شروع میکنه ، پس میشه خوده ایندکس شماره ۰ (Sadegh) و ایندکس شماره ۱ (Ali) و ایندکس شماره ۲ که گفتیم شامل نمیشه.
|
1 2 3 4 5 6 7 8 |
<script> var Daneshjoo = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Result = Daneshjoo.slice(0,2); document.write( Result ); </script> |
Free-Learn
متد ()sort در آرایه ها
خب اسمش مشخصه دیگه ، با استفاده از این متد میشه یک آرایه رو بر اساس حروف الفبا مرتب سازی کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var Daneshjoo_1 = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Daneshjoo_2 = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Bedon_Sort = Daneshjoo_1; var Sort_Shode = Daneshjoo_2.sort(); document.write( "بدون مرتب سازی" + "<br>" + Bedon_Sort ); document.write("<br>" + "<br>"); document.write( "مرتب شده بر اساس حروف الفبا" + "<br>" + Sort_Shode ); </script> |
Free-Learn
متد ()reverse در آرایه ها
با استفاده از این متد میتونیم ترتیب قرارگیری آیتم های یک آرایه رو برعکس کنیم، لطفا به مثال های زیر توجه نمایید.
مثال شماره ۱ : برعکس کردن ترتیب قرار گیری آیتم های یک آرایه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var Daneshjoo_1 = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Daneshjoo_2 = ["Sadegh", "Ali", "Maryam", "Elnaz"]; var Bedon_Reverse = Daneshjoo_1; var Reverse_Shode = Daneshjoo_2.reverse(); document.write( "در حالت عادی" + "<br>" + Bedon_Reverse ); document.write("<br>" + "<br>"); document.write( "برعکس شده" + "<br>" + Reverse_Shode ); </script> |
Free-Learn
مرتب سازی اعداد در آرایه ها
خب ما با استفاده از متد ()sort به راحتی میتونیم رشته ( String ) هارو بصورت صعودی یا نزولی مرتب سازی کنیم ( همونطور که در مثال های بالا دیدیم )
حال بنظره شما میشه با استفاده از متد sort اعداد ( یا بطور کلی نوع داده عددی ) رو هم مرتب سازی کرد یا نه!؟ بریم ببینیم میشه یا نه
مثال شماره ۱ : تلاش برای مرتب سازی آیتم های عددی یک آرایه
|
1 2 3 4 5 6 7 8 |
<script> var MyCode = [10 , 5 , 7 , 2 , 1 ]; var Result = MyCode.sort(); document.write( Result ); </script> |
همونطور که میبینید خیر، مرتب سازی نمیشه و نمیتونه اینکارو کنه، چون متد sort مرتب سازی رو فقط بروی رشته ها ( یا متن ) انجام میده، حتی بروی رشته ای عددی ( مثه “۲” ) هم نمیتونه.
مثال شماره ۲ : مرتب سازی آیتم های عددی یک آرایه با استفاده از تابع مقایسه
|
1 2 3 4 5 6 7 8 |
<script> var MyCode = [10 , 5 , 7 , 2 , 1 ]; var Result = MyCode.sort( function( b , c ){ return b - c }); document.write( Result ); </script> |
