تفاوت متد های ()slice() ،splice و ()split در جاوا اسکریپت – به زبان ساده

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

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

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

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

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

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

let array = [1, 2, 3, "hello world", 4.12, true];

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

دقت کنید که کلیدواژه let یکی از خصوصیات ES6 است. شما می‌توانید برای مطالعه بیشتر به «آموزش‌های طراحی و برنامه‌نویسی وب» مراجعه کنید.

()Slice

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

array.slice(from, until);

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

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

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

array.slice(0, until);

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

array[0] --> 1// included

array[1] --> 2// included

array[2] --> 3// included

array[3] --> "hello world"// not included

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

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

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

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

متد ()Splice

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

حذف عناصر

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

array.splice(index, number of elements);

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

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

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

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

array.splice(2, 1);

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

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

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

افزودن عناصر

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

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

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

array.splice(0, 0, '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(",", 3);

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

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

جمع‌بندی

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

()Slice

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

()Splice

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

()Split

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

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

• مجموعه آموزش‌های طراحی و برنامه نویسی وب
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های ابزارها و راهکارهای مدیریت وبسایت‌ها
• ۱۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید
• تابع های جاوا اسکریپت — راهنمای جامع
• بهینه‌سازی کد‌های جاوا اسکریپت در سال ۲۰۱۸ — راهنمای جامع
• حلقه for در جاوا اسکریپت — از صفر تا صد + مثال و کد

==