بررسی متد های splice , slice و split در جاوااسکریپت

متدهای داخلی جاوااسکریپت، زمانی که به درستی آن‌ها را بشناسیم، کمک زیادی در زمان برنامه‌نویسی به ما می‌کنند. در این نوشته به توضیح سه مورد از این متدها یعنی ()splice()، slice و ()split می‌پردازیم.

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

آرایه‌های جاوااسکریپت

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

برخی اوقات لازم می‌شود که عملیاتی روی این آرایه‌ها انجام دهیم. در این موارد از برخی متدهای جاوااسکریپت مانند ()slice و ()splice استفاده می‌کنیم. در ادامه روش اعلان یک آرایه در جاوااسکریپت را مشاهده می‌کنید:

let arrayDefinition = []; // Array declaration in JS

در ادامه آرایه دیگری را با انواع داده متفاوت ایجاد می‌کنیم. از این آرایه در مثال‌های خود بهره خواهیم گرفت:

let array = [1, 2, 3, &quothello world&quot, 4.12, true];

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


متد ()Slice

متد ()Slice بخش مفروضی از یک آرایه را کپی کرده و این بخش کپی شده را در یک ارائه جدید باز می‌گرداند. این متد تغییری در آرایه اولیه ایجاد نمی‌کند.

array.slice(from, until);

این متد دو پارامتر دارد:

  • From: بخشی که آرایه جدید آغاز می‌شود را تعیین می‌کند.
  • Until: بخش انتهایی که آرایه جدید در آن پایان می‌یابد را مشخص می‌سازد.

برای نمونه اگر بخواهیم سه عنصر اولیه آرایه فوق را بازگردانیم، از آنجا که عنصر اولیه آرایه همیشه از اندیس 0 آغاز می‌شود باید مقدار from را برابر با 0 در نظر بگیریم.

برای نمونه اگر بخواهیم سه عنصر اولیه آرایه فوق را بازگردانیم، از آنجا که عنصر اولیه آرایه همیشه از اندیس 0 آغاز می‌شود باید مقدار from را برابر با 0 در نظر بگیریم.

array.slice(0, until);

اینک به بخشی می‌رسیم که شاید کمی گیج‌کننده باشد. وقتی می‌خواهیم سه عنصر نخست را جدا کنیم ممکن است فکر کنید باید مقدار until را برابر با 3 قرار دهیم؛ اما در این صورت با خطا مواجه می‌شویم چون عنصر اندیس 3 در این آرایه وجود ندارد.

array[0] --> 1// included

array[1] --> 2// included

array[2] --> 3// included

array[3] --> &quothello world&quot// not included

این وضعیت موجب سردرگمی می‌شود. به همین دلیل است که پارامتر دوم Until (به معنی «تا اینجا») نام‌گذاری شده است.

let newArray = array.slice(0, 3);// Return value is also an array

در نهایت آرایه جدا شده را به متغیر newArray انتساب می‌دهیم. نتیجه را در تصویر زیر مشاهده می‌کنید:

let array = [1, 2, 3, &quothello world&quot, 4.12, true];
let newArray = array.slice(0, 3); // [1,2,3]

آرایه جدا شده و به متغیر newArray انتساب یافته است.

متغیر newArray اینک یک آرایه است و آرایه اولیه نیز به شکل اصلی خود باقی است.

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


متد ()Splice

نام این تابع کاملاً شبیه ()slice است. این شباهت نام در اغلب موارد موجب سردرگمی توسعه‌دهندگان می‌شود. متد ()splice یک آرایه را با افزودن یا حذف عناصر آن تغییر می‌دهد. در ادامه روش حذف یا اضافه کردن عناصر با استفاده از ()splice را بررسی می‌کنیم.

حذف عناصر

برای حذف کردن عناصر یک آرایه باید پارامتر index و تعداد عناصری که باید حذف شوند را تعیین کنیم:

array.splice(index, number of elements);

index نقطه آغاز حذف عناصر مفروض از آرایه است. عناصری که اندیسی کمتر از index دارند از آرایه حذف نمی‌شوند:

array.splice(2);// Every element starting from index 2, will be removed

اگر پارامتر دوم تعیین نشود همه عناصر بزرگ‌تر از index در آرایه حذف خواهند شد:

let array = [1, 2, 3, &quothello world&quot, 4.12, true]; 
let newArray = array.splice(2); // [3, &quothello world&quot, 4.12, true]
console.log(array); // [1,2]

تنها اندیس‌های 0 و 1 در آرایه باقی می‌مانند.

در مثال دوم، پارامتر دوم را برابر 1 قرار می‌دهیم و از این رو عناصر بالاتر از اندیس 2 با هر فراخوانی splice به تعداد 1 عدد حذف می‌شود:

let array = [1, 2, 3, &quothello world&quot, 4.12, true]; 
array.splice(2, 1);

آرایه در آغاز

پس از فراخوانی اول:

let array = [1, 2 , &quothello world&quot, 4.12, true];

مقدار 3 از آرایه حذف می‌شود و بنابراین «hello world» اینک اندیس 2 را یافته است.

پس از فراخوانی دوم:

let array = [1, 2 , 4.12, true];

این بار «hello world» به عنوان اندیس 2 آرایه حذف شده است.

این وضعت تا زمانی که همه اندیس‌های بالاتر از 2 حذف شوند، قابل ادامه است.

افزودن عناصر

برای افزودن عناصر، باید آن‌ها را در پارامترهای سوم، چهارم و غیره تابع ()splice ذکر کنیم:

array.splice(index, number of elements, element, element);

به عنوان نمونه فرض کنید می‌خواهیم a و b را در ابتدای آرایه اضافه کنیم و چیزی را نیز حذف نکنیم:

let array = [1, 2, 3, &quothello world&quot, 4.12, true];
array.splice(0, 0, 'a', 'b'); // [&quota&quot,&quotb&quot,1, 2, 3, &quothello world&quot, 4.12, true]

a و b به ابتدای آرایه اضافه شدند و هیچ عنصری نیز حذف نشده است.


متد ()Split

متدهای ()Slice و ()splice برای آرایه‌ها استفاده می‌شوند. متد ()Split در مورد رشته‌ها کاربرد دارد. این متد یک رشته را به زیررشته‌هایی تقسیم کرده و آن‌ها را به صورت یک آرایه بازگشت می‌دهد. این متد دو پارامتر می‌گیرد که هر دو اختیاری هستند.

string.split(separator, limit);
  • separator: روش تقسیم رشته را تعیین می‌کند، مثلاً بر اساس کاما، یک کاراکتر خاص یا موارد دیگر.
  • Limit: تعداد اِفرازها را بر اساس یک عدد مشخص محدود می‌سازد.

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

ابتدا با متد ()toString آرایه خود را به یک رشته تبدیل می‌کنیم:

let myString = array.toString();

اینک myString را بر اساس کاما ها تقسیم می‌کنیم و تعداد آن‌ها را هم به 3 زیررشته محدود می‌سازیم و آن‌ها را به صورت یک آرایه باز می‌گردانیم:

let newArray = myString.split(&quot,&quot, 3);
تنها 3 عنصر اول بازگشت می‌یابند.
تنها 3 عنصر اول بازگشت می‌یابند.

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

نکته: اگر از این تابع به صورت ;(“”)array.split استفاده کنیم، در این صورت هر کاراکتر رشته به صورت یک زیررشته تقسیم می‌شود:

هر کاراکتر به صورت یک به یک، به صورت رشته مستقلی افراز می‌شود.
هر کاراکتر به صورت یک به یک، به صورت رشته مستقلی افراز می‌شود.

جمع‌بندی

در ادامه جمع‌بندی از متدهایی که در بالا از آن‌ها صحبت شد ارائه شده است.

()Slice

  • عناصری را از یک آرایه کپی می‌کند.
  • این عناصر را به صورت یک آرایه جدید بازمی گرداند.
  • آرایه اصلی تغییری نمی‌یابد.
  • محل شروع جداسازی آرایه جدید از پارامتر اول تابع (from) و تا پارامتر دوم (until) است.
  • Slice خود اندیس until را شامل نمی‌شود.
  • این متد هم برای آرایه‌ها و هم رشته‌ها کاربرد دارد.

()Splice

  • برای افزودن/حذف عناصر از آرایه استفاده می‌شود.
  • یک آرایه از عناصر حذف شده باز می‌گرداند.
  • آرایه اصلی را تغییر می‌دهد.
  • برای افزودن عناصر به صورت (array.splice (index, number of elements, element استفاده می‌شود.
  • برای حذف عناصر به صورت (array.splice (index, number of elements استفاده می‌شود.
  • تنها برای آرایه‌ها می‌تواند استفاده شود.

()Split

  • یک رشته را به زیررشته‌هایی تقسیم می‌کند.
  • آن‌ها را در یک آرایه باز می‌گرداند.
  • دو پارامتر می‌گیرد که هر دو اختیاری هستند: (string.split(separator, limit
  • رشته اصلی را تغییر نمی‌دهد.
  • تنها در مورد رشته‌ها قابل استفاده است.


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


منبع : freecodecamp.org