دانلود ویدیو

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

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

 افزودن المان

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

Array.prototype.push

زمانی از push برای اضافه کردن یک یا چند عنصر به آرایه استفاده می‌کنیم که بخواهیم این عناصر را به انتهای آرایه اضافه کنیم.

const numbers = [3, 4];
numbers.push(5, 6); 
// numbers: [3, 4, 5, 6]

Array.prototype.unshift

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

const numbers = [3, 4];
numbers.unshift(1, 2);   
// numbers: [1, 2, 3, 4]

Array.prototype.splice

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

const numbers = [1, 2, 3, 4, 5, 6];
numbers.splice(2, 0, 'a', 'b');  
// numbers: [1, 2, "a", "b", 3, 4, 5, 6]

در سطر دوم این کد عنوان splice دید می‌شود. اما نحوه عملکرد آن به چه ترتیبی است؟ نحوه عملکرد splice را می‌توان به سه مرحله زیر تقسیم کرد: 

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

طبق تقسیم‌بندی بالا، سطر دوم این مثال بیانگر این عبارت است: از ایندکس ۲ به بعد ۰ عنصر را حذف کن و سپس عناصر a و b را به آرایه اضافه کن.

حذف کردن المان

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

Array.prototype.pop

از متد pop زمانی استفاده می‌کنیم که قصد داریم آخرین المان یا ایندکس را از آرایه حذف کنیم. به مثال زیر دقت کنید:

const numbers = [1, 2, 3, 4];
var last = numbers.pop();
// last: 4
// numbers: [1, 2, 3]

Array.prototype.shift

به هنگام استفاده از متد shift اولین المان یا ایندکس از آرایه حذف می‌شود.

const numbers = [1, 2, 3, 4];
var first = numbers.shift();
// first: 1
// numbers: [2, 3, 4]

Array.prototype.splice

سومین متد برای حذف المان از آرایه splice است. با استفاده از این متد می‌توان از هر کجای آرایه که خواستیم، المان یا المان‌هایی را حذف کنیم.

const numbers = [1, 2, 3, 4];
var splice = numbers.splice(1, 2);
// splice: [1, 4]

حذف کردن یک یا چند المان به روش splice دارای دو پارامتر زیر است: 

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

[button class=”github-btn” href=”http://frontcast.ir/this-in-javascript”]بررسی this در جاوااسکریپت[/button]

عملیات پیچیده‌تر بر روی آرایه (توابع مرتبه بالاتر)

در بالا، ما شاهد عملیات پایه مانند اضافه یا حذف یک یا چند المان از یک آرایه بودیم. اکنون بیایید کمی عملیات را پیچیده‌تر کنیم و عمیق‌تر به این موضوع نگاه کنیم. 

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

Array.prototype.sort

مرتب‌سازی آرایه یکی از رایج‌ترین عملیاتی است که در طول برنامه‌نویسی ممکن است بارها از آن استفاده کنید. متد sort() المان‌های یک آرایه را مرتب کرده و آرایه مرتب‌شده را return می‌کند. نحوه عملکرد sort() در مثال زیر آمده است:

arr.sort([compareFunction])

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

یک compareFunction می‌تواند به فرمت زیر باشد:

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

همان‌طور که می‌بینید در مثال بالا، سعی در مرتب‌سازی اعداد به صورت صعودی داریم. این کار می‌تواند ساده‌تر هم باشد. به مثال زیر دقت کنید:

function compareNumbers(a, b) {
  return a - b;
}

نظرتان راجع به ساده‌سازی بیشتر چیست؟ کد بالا باز هم می‌تواند ساده‌تر شود؟ پاسخ یک “بله” قاطعانه است. با استفاده از تابع arrow کار مرتب‌سازی می‌تواند بسیار آسان‌تر شود:

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);
 
// [۱, ۲, ۳, ۴, ۵]

Array.prototype.map

نحوه عملکرد متد map() به این ترتیب است که یک متغیر جدید ایجاد کرده و یک تابع را به تعداد عناصر آرایه فراخوانی می‌کند. به عبارت دیگر، متد map() تابع callback را برای تک تک عناصر آرایه به ترتیب فراخوانی می‌کند. سپس یک آرایه جدید برای نمایش نتایج ایجاد می‌کند. 

تابع callback سه آرگومان زیر را می‌پذیرد: 

• مقدار المان 
• ایندکس المان 
• Object آرایه

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

به مثال زیر توجه کنید تا عملکرد map() را به طور کامل درک کنید: 

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
 
// doubles is now [2, 8, 18]
// numbers is still [1, 4, 9]

در مثال بالا، ما آرایه‌ای از اعداد به نام numbers داریم و با استفاده از map() می‌خواهیم یک آرایه جدید با نتایج جدید ایجاد کنیم. آرایه‌ای که حاصل ضرب تمامی عناصر آرایه num در ۲ است. 

همان‌طور که می‌بینید، متد map() یک تابع را به عنوان آرگومان ورودی دریافت می‌کند. سپس map() همانند یک حلقه عمل می‌کند و تک تک عناصر آرایه numbers را در ۲ ضرب می‌کند و در آرایه جدید با نام doubles ذخیره می‌کند. بدون این که هیچ تغییری در آرایه numbers ایجاد شود.

[button class=”github-btn” href=”http://frontcast.ir/difference-between-foreach-and-map-in-javascript”]تفاوت forEach و map در جاوااسکریپت[/button]

Array.prototype.filter

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

لازم به ذکر است که تابع callback سه آرگومان زیر را می‌پذیرد: 

• مقدار المان 
• ایندکس المان 
• Object آرایه

بیایید نگاهی به مثال زیر بیاندازیم و نحوه عملکرد filter() را در عمل نشان دهیم:

function isAboveMyRange(value) {
  return value >= 25;
}
var filtered = [12, 5, 8, 130, 44].filter(isAboveMyRange);
// filtered is [130, 44]

همان‌طور که می‌بینید، متد filter() تابع isAboveMyRange را به عنوان پارامتر ورودی در نظر گرفته است. در این تابع هم فیلتری گذاشته شده است با این مضمون که تنها اعدادی را return کن که بزرگتر یا مساوی عدد ۲۵ باشد.

در نتیجه مشاهده می‌کنید که تنها اعداد ۱۳۰ و ۴۴ چاپ شده‌اند و سایر اعداد آرایه که از ۲۵ کوچکتر بودند از فیلتر رد نشده‌اند و در خروجی دیده نمی‌شوند.

Array.prototype.reduce

متد دیگری که در مجموعه توابع مرتبه بالاتر جای می‌گیرد، متد reduce() است. این متد، یک تابع callback را به هر یک از عناصر آرایه باز می‌گرداند و نتیجه آن یک مقدار خروجی واحد است. 

متد reduce() دو پارامتر را به عنوان ورودی می‌گیرد: 

• تابع callback ای که برای تک تک عناصر آرایه اجرا می‌شود (این پارامتر باعث تبدیل این متد به تابع مرتبه بالاتر است).
• مقدار اولیه

arr.reduce(callback[, initialValue])

همچنین، تابع reducer (callback) چهار پارامتر را می‌پذیرد: 

• accumulator
• currentValue (مقدار فعلی)
• currentIndex (ایندکس فعلی) 
• sourceArray

حال اگر یک مقدار اولیه در نظر گرفته شود، آن‌گاه accumulator برابر با مقدار اولیه و currentValue برابرا با اولین المان آرایه خواهد بود. 

در مقابل اگر مقدار اولیه‌ای در نظر نگیریم، در این حالت accumulator برابر با اولین المان آرایه بوده و currentValue برابر با دومین المان آن خواهد بود. بیایید این موضوع را با یک مثال بهتر درک کنیم:

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, ۰);
// sum is 6

در این مثال، ما مقدار اولیه را صفر قرار دادیم که در این صورت این مقدار به accumulator نیز اختصاص داده می‌شود. هر بار که تابع reduce() بر روی هر عنصر آرایه فراخوانی می‌شود، accumulator نتیجه عملیات قبلی را در خود نگه می‌دارد. سپس currentValue بر روی مقدار فعلی آرایه تنظیم می‌شود. در پایان نتیجه در متغیر sum ذخیره می‌شود. 

نتیجه‌گیری

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

[button class=”github-btn” href=”http://frontcast.ir/become-a-javascript-developer”]پادکست شماره ۵: تبدیل شدن به توسعه دهنده جاوااسکریپت[/button]

منبع