متدهای پرکاربرد آرایه

افزودن، حذف و جست‌وجوی عناصر با متدهای پرکاربرد آرایه

مقدمه

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

افزودن و حذف از انتهای آرایه: push و pop

let fruits = ["سیب", "موز"];

fruits.push("پرتقال"); // افزودن به انتها
console.log(fruits); // ["سیب", "موز", "پرتقال"]

fruits.pop(); // حذف از انتها
console.log(fruits); // ["سیب", "موز"]

push یک یا چند مقدار را به انتهای آرایه اضافه می‌کند و طول جدید آرایه را برمی‌گرداند. pop آخرین عنصر را حذف می‌کند و همان مقدار حذف‌شده را بازمی‌گرداند.

افزودن و حذف از ابتدای آرایه: unshift و shift

let fruits = ["موز", "پرتقال"];

fruits.unshift("سیب"); // افزودن به ابتدا
console.log(fruits); // ["سیب", "موز", "پرتقال"]

fruits.shift(); // حذف از ابتدا
console.log(fruits); // ["موز", "پرتقال"]

unshift و shift دقیقاً معادل push و pop هستند، با این تفاوت که روی ابتدای آرایه عمل می‌کنند، نه انتهای آن.

تحلیل رفتار جاوااسکریپت

نکته‌ی مهم این است که push/pop معمولاً از unshift/shift سریع‌تر عمل می‌کنند؛ چون افزودن یا حذف از انتهای آرایه نیازی به جابه‌جایی اندیس بقیه‌ی عناصر ندارد، اما افزودن یا حذف از ابتدا باعث می‌شود اندیس تمام عناصر دیگر یک واحد جابه‌جا شود.

پیدا کردن اندیس یک عنصر: indexOf

let colors = ["قرمز", "سبز", "آبی"];

console.log(colors.indexOf("سبز")); // 1
console.log(colors.indexOf("زرد")); // -1 — پیدا نشد

اگر مقدار موردنظر در آرایه پیدا نشود، indexOf مقدار -1 برمی‌گرداند؛ این مقدار معمولاً برای بررسی وجود یا عدم وجود یک عنصر استفاده می‌شود.

بررسی وجود یک عنصر: includes

let colors = ["قرمز", "سبز", "آبی"];

console.log(colors.includes("سبز")); // true
console.log(colors.includes("زرد")); // false

includes نسبت به indexOf برای این منظور خواناتر است، چون به‌جای عدد، مستقیماً یک مقدار Boolean برمی‌گرداند.

حذف یا افزودن در وسط آرایه: splice

splice قدرتمندترین و انعطاف‌پذیرترین متد برای تغییر مستقیم آرایه است؛ می‌تواند همزمان عناصری را حذف کند و عناصر جدیدی را اضافه کند:

let colors = ["قرمز", "سبز", "آبی", "زرد"];

let removed = colors.splice(1, 2);
console.log(colors);
console.log(removed);

تحلیل کد

splice(1, 2) یعنی: از اندیس 1 شروع کن و 2 عنصر را حذف کن. آرگومان اول محل شروع و آرگومان دوم تعداد عناصری است که باید حذف شوند. متد splice عناصر حذف‌شده را به‌صورت یک آرایه‌ی جدید برمی‌گرداند و خودِ آرایه‌ی اصلی را نیز تغییر می‌دهد.

می‌توان با آرگومان‌های سوم به بعد، همزمان عناصر جدیدی هم در همان محل اضافه کرد:

let colors = ["قرمز", "سبز", "آبی"];
colors.splice(1, 1, "بنفش", "صورتی"); // حذف یک عنصر و افزودن دو عنصر جدید
console.log(colors); // ["قرمز", "بنفش", "صورتی", "آبی"]

ساخت یک آرایه‌ی جدید از بخشی از آرایه: slice

برخلاف splice، متد slice آرایه‌ی اصلی را تغییر نمی‌دهد؛ فقط یک آرایه‌ی جدید از بخشی از آن برمی‌گرداند:

let numbers = [10, 20, 30, 40, 50];

let part = numbers.slice(1, 3); // از اندیس 1 تا قبل از اندیس 3
console.log(part);    // [20, 30]
console.log(numbers); // [10, 20, 30, 40, 50] — بدون تغییر

تبدیل آرایه به رشته: join

let fruits = ["سیب", "موز", "پرتقال"];
console.log(fruits.join(", ")); // "سیب, موز, پرتقال"
console.log(fruits.join(" - ")); // "سیب - موز - پرتقال"

جدول مقایسه‌ی splice و slice

ویژگی	splice	slice
تغییر آرایه‌ی اصلی	بله	خیر
خروجی	عناصر حذف‌شده	آرایه‌ی جدید
کاربرد	حذف/افزودن مستقیم	استخراج بخشی از آرایه

Best Practices

• برای افزودن یا حذف از انتهای آرایه، از push و pop استفاده کنید که سریع‌تر از معادل‌های ابتدایی آن‌ها هستند.
• برای بررسی وجود یک مقدار در آرایه، از includes استفاده کنید که خواناتر از indexOf است.
• اگر نمی‌خواهید آرایه‌ی اصلی تغییر کند، از slice استفاده کنید، نه splice.

ارتباط با سایر مفاهیم

تفاوت بین متدهایی که آرایه‌ی اصلی را تغییر می‌دهند (مثل splice) و متدهایی که آرایه‌ی جدید می‌سازند (مثل slice)، دقیقاً همان مفهوم Mutable بودن Reference Types است که در فصل انواع داده بررسی کردیم. در درس بعدی با متدهای تکرارکننده مثل map و filter آشنا می‌شویم که عمدتاً بدون تغییر آرایه‌ی اصلی عمل می‌کنند.

جمع‌بندی

جاوااسکریپت متدهای متنوعی برای کار با آرایه ارائه می‌دهد: push/pop و unshift/shift برای افزودن و حذف از دو سر آرایه، indexOf و includes برای جست‌وجو، و splice/slice برای تغییر یا استخراج بخشی از آرایه. تفاوت مهم بین این دو گروه آخر این است که splice آرایه‌ی اصلی را تغییر می‌دهد، اما slice یک آرایه‌ی جدید می‌سازد.