تفاوت متد های slice، splice و split در جاوا اسکریپت + ویدئو

سلام و عرض ادب خدمت همه برنامه نویسای عزیز و همراهان سایت سبزلرن ،همون طور که میدونین تو جاوا اسکریپت 3 تا متد با اسم های slice، split و splice وجود داره ، تو این مقاله قصد دارم تفاوت متد های slice، splice و split رو در جاوا اسکریپت با چندین مثال بهتون یاد بدیم.

این 3 تا متد به دلیل شباهت اسم و کاربردی که با همدیگه دارن، خیلی وقتا برنامه نویس رو سردرگم میکنن.

همچنین بررسی کنیم متد ها چه ویژگی هایی دارند.

خب بریم سراصل مطلب تفاوت متد های slice، splice و split در جاوا اسکریپت را بررسی کنیم اما اول از همه متد را بشناسیم:

معرفی متد slice

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

سینتکس متد slice به شکل زیر هست:

array.slice(start, finish)

start: ایندکس شروع. ایندکسی از آرایه که میخواین برش (cut) از اون ایندکس شروع بشه.

finish: ایندکس پایان. ایندکسی از آرایه که میخواین از start تا این ایندکس از آرایه جدا بشه.

این متد بر اساس index کار میکنه ، به این ترتیب که  از شما 2 تا پارامتر میگیره که پارامتر اول ایندکس شروع و پارامتر دوم ایندکس پایان محسوب میشه.

به کد زیر دقت کنین:

[1, 2, 5, 7, 8, 4, 99, 65].slice(2, 5)  // [5, 7, 8]

همون طور که می بینین به کمک تابع slice گفتیم که از ایندکس 2 تا 5 رو واسمون جدا کنه.

به این ترتیب از ایندکس 2 به بعد(عدد 7) تا ایندکس 5(عدد 8) برامون جدا کرده و برمیگردونه.

اگه به تابع slice فقط یه پارامتر پاس بدیم چی میشه؟!

اگه فقط یک پارامتر به این متد پاس بدین، از پارامتر مد نظر شما تا انتهای آرایه رو براتون جدا میکنه. به کد زیر دقت کنین:

[1, 2, 5, 7, 8, 4, 99, 65].slice(2)  // [5, 7, 8, 4, 99, 65]

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

ایندکس منفی آرایه ها

جالب اینجاست که میتونین به متد slice پارامتر منفی هم بفرستین!!

ممکنه براتون سوال باشه و بگین که مگه آرایه ها ایندکس منفی دارن؟؟!!

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

[1, 2, 5, 7, 8, 4, 99, 65].slice(-4)  // [8, 4, 99, 65]

همان طور که می بینین پارامتر منفی 4 رو ارسال کردیم.

اگه از انتهای تابع بشمرید به عدد 8 میرسین.

به این ترتیب از عدد 8 تا انتهای آرایه برامون جدا می کنه(چون پارامتر دوم رو ارسال نکردیم تا انتهای آرایه جدا می کنه)

اگه در این حالت پارامتر دوم رو هم ارسال کنیم:

[1, 2, 5, 7, 8, 4, 99, 65].slice(-4, -1)  // [8, 4, 99]

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

برای پارامتر های منفی کافیه فقط اینو بدونین که از انتهای آرایه شمرده میشه، همین.

در کد بالا ابتدا از انتهای آرایه 4 واحد شمرده و به عدد 8 می رسد و سپس پارامتر دوم را در نظر گرفته و یک واحد از انتهای آرایه می شمرد و به 99 می رسد.

در نهایت محدوده 8 تا 99 رو برامون جدا می کنه.

متد slice برای رشته های متنی

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

پس میتونیم از متد slice برای رشته های متنی نیز استفاده کنیم. به مثال زیر دقت کنین:

"SabzLearn.ir".slice(4, 9)  // "Learn"

همون طور که می بینین از ایندکس 4 (حرف L) شروع کرده و تا ایندکس 9 (حرف n) از رشته متنی رو برامون جدا می کنه.

استفاده از تابع slice برای رشته های متنی هیچ تفاوتی با آرایه ها نداره و از تمامی نکات گفته شده از متد slice برای آرایه ها میتونین برای رشته های متنی نیز استفاده کنین.

مقدار NaN در جاوا اسکریپت (۲۰۲۰) + ویدئو

معرفی متد splice

اسم این تابع شباهت زیادی به متد قبلی داره و این شباهت باعث سردرگمی برنامه نویسا میشه.

به کمک متد splice میتونین به مقادیر جدیدی به آرایه اضافه کرده یا مقادیری را از آرایه حذف کنید.

ابتدا به نحوه حذف کردن مقادیر آرایه با splice می پردازیم.

سینتکس استفاده از متد splice برای حذف مقادیر آرایه به شکل زیر هست:

array.splice(start, count)

index: این پارامتر ضروری بوده و اینذکسی از آرایه محسوب میشود که قصد جدا کردن آرایه رو از اون نقطه دارین.

count: این پارامتر تعداد آیتم های بعدی آرایه جهت جدا کردن را به متد splice پاس می دهد.

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

[1, 2, 5, 7, 8, 4, 99, 65].splice(2)  // [5, 7, 8, 4, 99, 65]

اگه به متد splice فقط یک پارامتر پاس بدیم دقیقا مثل متد slice عمل کرده و در این حالت هیچ تفاوتی ندارند.

تفاوت متد های slice، splice و split در جاوا اسکریپت

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

ولی اگه پارامتر رو دوم رو هم پاس بدیم خروجیمون چی میشه؟ به کد زیر دقت کنین:

[1, 2, 5, 7, 8, 4, 99, 65].splice(2, 4)  // [5, 7, 8, 4]

همون طور که می بینین از ایندکس 2(عدد 5) شروع کرده و به تعداد 4 ایندکس جلو رفته و به عدد 4 می رسد(ایندکس ششم آرایه).

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

تفاوت پارامتر دوم متد های slice و splice اینه که پارامتر دوم در متد slice ایندکس نهایی محدوده را تعیین می کند ولی پارامتر دوم متد splice تعداد گام های بعد از شروع رو تعیین می کنه.(با مشاهده ویدئوی مربوط به این مقاله، این مباحث رو کامل تر درک خواهید کرد)

این از نحوه حذف کردن تعدادی از آیتم ها از آرایه به کمک متد splice.

حالا بریم سراغ اضافه کردن آیتم به آرایه به کمک متد splice.

تفاوت اساسی slice و splice هم این است که متد slice آرایه اصلی را دستکاری نمی کند

ولی متد splice آرایه اصلی را نیز دستکاری می کند(برای درک این موضوع حتما ویدئوی مربوط به این مقاله را مشاهده کنید)

سینتکس استفاده از متد splice برای اضافه کردن مقادیر جدید به آرایه به شکل زیر هست:

[1, 2, 5, 7, 8, 4, 99, 65].splice(start, count of items, item, item , ...)

index: این پارامتر ایندکس شروع را محسوب می شود. ایندکسی از آرایه که قصد اضافه کردن آیتم جدید را بعد از آن ایندکس دارید.

count of items: این پارامتر تعداد گام های بعد از پارامتر اول را محسوب می شود.

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

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

var myArr = [1, 2, 5, 7, 8, 4, 99, 65]
myArr.splice(1, 3, 'a', 'b')
console.log(myArr)  // [1, "a", "b", 8, 4, 99, 65]

خیلی ساده بهتون توضیح میدم. با توجه به کد بالا متد splice از ایندکس 1 شروع میکنه و به تعداد پارامتر دوم جلو میره.

به تعداد پارامتر دوم از آرایه حذف کرده و سپس مقادیر a و b را اضافه می کند و سپس آیتم های بعدی را سر جای خود نگه میدارد.

اگه بخوایم حین اضافه کردن آیتم جدید آیتمی از آرایه حذف نشود پارامتر دوم را 0 قرار میدیم(اگر درک این موضوع برای شما سخت است لطفا برای درک بیشتر ویدیوی مربوط به این مقاله را مشاهده کنید، در ویدئو مثال های بیشتری حل شده است.)

معرفی متد split

این متد برای رشته های متنی استفاده می شود و کاربرد آن به این شکل است که رشته متنی مدنظر شما رو به زیررشته های مختلفی تقسیم کرده و آن ها را در قالب یک آرایه به شما برمیگرداند.

سینتکس استفاده از split به شکل زیر هست:

"SabzLearn.ir".split(separator, limit)

separator: پارامتر اول این متد اختیاری بوده و نحوه جدا کردن زیر رشته ها رو تعیین میکنه.

limit: این پارامتر نیز اختیاری بوده و تعیین می کند آرایه مد نظر شما حداکثر چند آیتم داشته باشد.

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

"SabzLearn.ir".split('a', 3)  // ["S", "bzLe", "rn.ir"]

در کد بالا گفتیم که از رشته مد نظرمون هر کجا به حرف a رسیدی، تا همون جا رو یک ایندکس از آرایه قرار بده.

و در پارامتر بعدی گفتیم آرایه خروجیمون حداکثر 3 تا پارامتر داشته باشه.

همان طور که می بینید داخل رشته SabzLearn.ir هر کجا به حرف a رسیده، یک ایندکس از آرایه را تشکیل داده است.

برای درک بیشتر و بهتر این متد هم حتما ویدئوی مربوط به این مقاله را مشاهده کنین.

سخنان پایانی

در این مقاله قصد داشتم تفاوت متد های slice، splice و split رو بهتون بگم.

امیدوارم براتون مفید واقع شده باشه.

ضمنا، اگه میخواین این مباحث رو دقیق تر و عمیق تر متوجه بشین پیشنهاد می کنم ویدئوی مربوط به این مقاله را حتما مشاهده کنید.

تا مقاله بعدی شما رو به خدا میسپرم.