۳ متد آرایه جاوا اسکریپت که باید بدانید — به زبان ساده

۱۶۳ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۵ دقیقه
۳ متد آرایه جاوا اسکریپت که باید بدانید — به زبان ساده

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

3 متد آرایه‌ای که در این مقاله مورد بررسی قرار می‌دهیم، به صورت زیر هستند:

  • join‎‎‎‎‎‎‎()
  • split‎()
  • sort()

البته شما می‌توانید هر پروژه‌ای را بدون بهره‌گیری از این متدها نیز اجرا کنید، اما در این صورت لازم خواهد بود که کدهای غیرضروری بنویسید که رویه مناسبی محسوب نمی‌شود. در ادامه ابتدا برخی متدهای مقدماتی مانند ()join و ()split را بررسی می‌کنیم و سپس به بررسی ()sort خواهیم پرداخت.

متد ()join

حالتی را تصور کنید که کاربران، مقادیری را در آرایه وارد می‌کنند و سپس می‌خواهند آن را به صورت یک رشته ببینند. این همان جایی است که متد ()join به کار می‌آید و عناصر آرایه را به یک رشته واحد تبدیل می‌کند.

از متد ()toString نیز برای تبدیل یک آرایه به رشته استفاده می‌شود، اما با بهره‌گیری از متد ()join می‌توان یک آرگومان جداکننده نیز تعیین کرد که موجب اجرای بهتر کد می‌شود. ساختار آن بسیار ساده است. کافی است از کدی مانند زیر استفاده کنید:

1array.join(separator)

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

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

1const array1=[1,2,3,'My','Name','is','Ney']
2
3
4const string1=array1.join()
5
6const string2=array1.join('')
7
8const string3=array1.join(',')
9
10const string4=array1.join('and')
11
12const string5=array1.join('-')
13
14const string6=array1.join('=')
15
16const string7=array1.join(':')
17
18const string8=array1.join(' ')
19
20
21console.log(array1)
22//  [ 1, 2, 3, 'My', 'Name', 'is', 'Ney' ]
23
24console.log(string1)
25// 1,2,3,My,Name,is,Ney
26
27console.log(string2)
28//123MyNameisNey
29
30console.log(string3)
31// 1,2,3,My,Name,is,Ney
32
33console.log(string4)
34// 1and2and3andMyandNameandisandNey
35
36console.log(string5)
37// 1-2-3-My-Name-is-Ney
38
39console.log(string6)
40// 1=2=3=My=Name=is=Ney
41
42console.log(string7)
43// 1:2:3:My:Name:is:Ney
44
45console.log(string8)
46// 1 2 3 My Name is Ney

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

متد ()split

در بخش قبلی با روش تبدیل عناصر یک آرایه به رشته متنی آشنا شدیم. در این بخش به توضیح معکوس آن کار یعنی تبدیل یک رشته به عناصر آرایه می‌پردازیم. این کار با استفاده از متد ()Split انجام می‌شود.

متد ()Split در حالت‌هایی که یک پیام ورودی داریم و می‌خواهیم ببینیم شامل کلمه خاصی است یا نه بسیار کارآمد است. این کار به سادگی با تبدیل کردن متن به آرایه و استفاده از متد ()includes انجام می‌شود. در این مورد در ادامه بیشتر صحبت خواهیم کرد.

پس از تبدیل متن به آرایه می‌توان از تابع‌های زیاد دیگری نیز روی آن استفاده کرد. متد ()Split از نظر فنی یک متد رشته محسوب می‌شود، اما به دلیل ارتباط آن با آرایه‌ها در این مقاله مورد بررسی قرار گرفته است. ابتدا ساختار آن را مشاهده می‌کنیم:

1string.split(separator, limit)

آرگومان «جداساز» (Separator) کاراکتر یا کلمه‌ای که برای افراز رشته استفاده می‌شود را تعیین می‌کند. اگر آن را خالی بگذارید، کل رشته به یک عنصر واحد در آرایه تبدیل خواهد شد.

آرگومان «محدودیت» (limit) اختیاری است و به ندرت استفاده می‌شود. این آرگومان یک مقدار صحیح است که تعداد افرازها را تعیین می‌کند. آیتم‌ها پس از این محدودیت افراز در آرایه قرار نمی‌گیرند.

در ادامه مثال‌هایی از کاربرد متد ()Split را بررسی می‌کنیم. این مثال‌ها در واقع همان مثال‌های بخش قبلی در مورد متد ()join هستند که در جهت عکس نوشته شده‌اند:

1const string1 = `1,2,3,My,Name,is,Ney`
2
3const array1 = string1.split(',')
4const arrayWithLimit = string1.split(',', 4)
5const arrayWithoutSeperator = string1.split()
6
7console.log(array1, arrayWithLimit, arrayWithoutSeperator)
8//[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ] [ '1', '2', '3', 'My' ] [ '1,2,3,My,Name,is,Ney' ]
9
10
11
12const string2 = `123MyNameisNey`
13const array2 = string2.split('')
14console.log(array2)                                       
15//[ '1',  ',',  '2',  ',',  '3',  ',',  'M',  'y',  ',',  'N',  'a',  'm',  'e',  ',',  'i',  's',  ',',  'N',  'e', 'y' ]
16
17const string3 = `1,2,3,My,Name,is,Ney`
18const array3 = string3.split(',')
19console.log(array3)                                    //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
20
21
22const string4 = `1and2and3andMyandNameandisandNey`
23const array4 = string4.split('and')
24console.log(array4)                                      //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
25
26
27const string5 = `1-2-3-My-Name-is-Ney`
28const array5 = string5.split('-')
29console.log(array5)                                      //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
30
31
32const string6 = `1=2=3=My=Name=is=Ney`
33const array6 = string.split('=')
34console.log(array6)                                      //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
35
36
37const string7 = `1:2:3:My:Name:is:Ney`
38const array7 = string7.split(':')
39console.log(array7)                                      //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
40
41
42const string8 = `1 2 3 My Name is Ney`
43const array8 = string8.split(' ')
44console.log(array8)                                      //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]

توضیح مثال‌ها

اکنون مثال‌های فوق را یک به یک بررسی می‌کنیم.

  • array1, string1: هر جا که یک کاما باشد به یک آرایه افراز می‌کند.
  • arrayWithLimit: یک محدودیت تعیین شده و بدین سبب آرایه حاصل تنها چهار عنصر دارد که بر اساس محدودیت است.
  • arrayWithoutSeperator: این مورد را قبلاً توضیح دادیم؛ اگر هیچ جداسازی تعیین نشده باشد، کل رشته به یک عنصر واحد در آرایه تبدیل می‌شود.
  • array2: از آنجا که گیومه خالی در آرگومان وجود دارد، متد ()split هر کاراکتر را جدا می‌کند و این عناصر شامل کاراکترهای فاصله، کاماها و هر گونه کاراکتر دیگری که در متن وجود دارد نیز می‌شود.
  • array4: چنان که می‌بینید همه عبارت‌های «and» از رشته حذف شده‌اند و رشته‌ای که باقی مانده به یک عنصر واحد در آرایه تبدیل شده است. اگر حتی یک کاراکتر منفرد در آرگومان وجود داشت، نتیجه نهایی عناصری در آرایه می‌بود که عنصر تعیین شده در آن حذف شده بود. بنابراین باید در زمان استفاده از واژه‌ها یا رشته‌ها به عنوان جداساز مراقب باشید.
  • array3, array5, array, array7, array8: رشته یکسانی پس از افراز کردن همه موارد فوق دیده می‌شود که صحیح است زیرا می‌خواهیم کاری را که با متد ()join انجام دادیم به طور معکوس اجرا کنیم.

تمرین: ایجاد تابعی با ()join() ،split و ()reverse

اینک می‌توانید به عنوان یک تمرین تابع‌هایی با استفاده از متدهای ()join() ،split و ()reverse بسازید و بررسی کنید آیا رشته ورودی کاربر یک «پالیندروم» (palindrome) است یا نه. پالیندروم به عبارت‌هایی گفته می‌شود که از هر دو طرف به شیوه واحدی خوانده می‌شوند. اگر با متد ()revere آشنا نیستید، باید بگوییم که این متد صرفاً ترتیب عناصر آرایه را معکوس می‌کند. به مثال زیر توجه کنید:

1const num = [1,2,3,4,5,6]
2
3const reverseNum = num.reverse()
4
5console.log(reverseNum)                    //[ 6, 5, 4, 3, 2, 1 ]

بدن ترتیب بخش بررسی متد ()split به پایان می‌رسد.

متد ()sort

همچنان که از نام این متد مشخص است کار آن مرتب‌سازی عناصر یک آرایه است. تابع ()sort به صورت پیش‌فرض مقادیر را به صورت رشته‌ای مرتب‌سازی می‌کند:

1let greekLetter = ['beta','alpha','delta','gamma'];
2
3
4console.log(greekLetter.sort())     //  [ 'alpha', 'beta', 'delta', 'gamma' ]

اما این روش مرتب‌سازی در زمان مرتب‌سازی اعداد مشکلاتی ایجاد می‌کند. برای نمونه اگر بخواهیم دو عدد 100 و 25 را مرتب‌سازی کنیم، عدد 100 جلوتر از عدد 25 ظاهر می‌شود، زیرا 1 در ابتدای 100 کمتر از 2 در ابتدای 25 است.

1let num1 = [25, 100, 23]
2console.log(num1.sort())                       //[ 100, 23, 25 ]
3
4
5let num2 = ['25', '100', '23']
6console.log(num2.sort())                      //[ '100', '23', '25' ]

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

function(a, b){return a — b}

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

1let num = [25, 100, 23]
2console.log(num.sort((a, b) => {
3    return a - b
4}))
5
6//[ 23, 25, 100 ]

توجه کنید که ما به جای تابع معمولی از ساختار تابع arrow استفاده کرده‌ایم. اگر بخواهیم این تابع مقایسه را بررسی کنیم می‌بینیم که می‌تواند بسته به آرگومان‌ها و این که a بزرگ‌تر از b باشد یا نه، یک مقدار منفی، صفر یا مثبت بازگشت دهد.

زمانی که تابع ()sort دو مقدار را مقایسه می‌کند، مقادیر را به تابع مقایسه ارسال می‌کند و بر اساس موارد بازگشتی به صورت زیر آن‌ها را مرتب‌سازی می‌کند.

  • اگر نتیجه منفی باشد، a پیش از b مرتب‌سازی می‌شود.
  • اگر نتیجه مثبت باشد، b پیش از a مرتب‌سازی می‌شود.
  • اگر نتیجه صفر باشد، تغییری در شیوه مرتب‌سازی عناصر ایجاد نمی‌شود.
  • تابع مقایسه‌ای همه مقادیر را به صورت دو به دو در آرایه بررسی می‌کند.
  • زمانی که می‌خواهیم روی مقادیر 25 و 100 کار کنیم، تابع مقایسه‌ای sort()‎ تابع مقایسه 25 و 100 را فرا می‌خواند.
  • این تابع به مقایسه دو عدد 25 و 100 پرداخته و به دلیل بزرگ‌تر نبودن عدد اول مقدار منفی بازگشت می‌دهد. در ادامه تابع sort 25 را در مرتبه‌ای کمتر از 100 مرتب‌سازی می‌کند.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۲ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
better-programming
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *