10 متد مفید جاوااسکریپت در رابطه با آرایه‌ها

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

1. متد forEach

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

  const arr = [1, 2, 3, 4, 5, 6];

  arr.forEach(function(item, index) {
    console.log(index); // output: 0 1 2 3 4 5
    console.log(item);  // output: 1 2 3 4 5 6
  });

همان‌طور که مشاهده می‌کنید متد forEach یک تابع با ورودی‌های item و index می‌گیره که اولی هرکدام از اعضای آرایه و دومی مکان قرارگیری یا ایندکس آن عضو است. توجه کنید که index از صفر شروع می‌شود.

2. متد includes

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

 const arr = [1, 2, 3, 4, 5, 6];

 arr.includes(2); // output: true
 arr.includes(7); // output: false

همان‌طور که مشاهده می‌کنید عدد 2 در آرایه موجود است. بنابراین این متد مقدار true را برمی‌گرداند. اما چون عدد 7 در آرایه موجود نیست مقدار برگردانده شده توسط این متد false است.

3. متد filter

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

  const arr = [1, 2, 3, 4, 5, 6];

  // item(s) greater than 3
  const filtered = arr.filter(function(num){ return num > ‌3; });
  
  console.log(filtered); // output: [4, 5, 6]
  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

همان‌طور که در مثال بالا ملاحظه می‌کنید متد filter به عنوان ورودی، یک تابع را با ورودی num (که هر کدام از اعضا را وارد تابع می‌کند) گرفته و تنها در صورتی که آن تابع برای عضو آرایه مقدار true برگرداند آن عضو آرایه در آرایه‌ی جدید حضور خواهد داشت. همان‌طور که می‌بینید آرایه filtered دارای اعضای 4، 5 و 6 است که همگی از 3 بزرگ‌ترند. همچنین آرایه‌ی اول یعنی arr تغییری نخواهد کرد.

4. متد map

متد map به ازای هریک از اعضای آرایه یک تابع را اجرا کرده و مقداری که آن تابع برمی‌گرداند را در آرایه جدیدی می‌ریزد. به شکل زیر:

  const arr = [1, 2, 3, 4, 5, 6];

  // double every element
  const doubled = arr.map(function(num) { return num * 2; });
  console.log(doubled); // output [2, 4, 6, 8, 10, 12]

  console.log(arr); // output: [1, 2, 3, 4, 5, 6]

همان‌طور که مشاهده می‌کنید تابعی که درون map قرار دارد هریک از اعضای آرایه‌ی arr را دوبرابر کرده و در آرایه‌ی doubled می‌ریزد. نتیجه‌ یعنی doubled آرایه‌ای است که اعضای آن دوبرابر شده‌ی اعضای arr هستند و همان‌طور که می‌بینید خود arr نیز تغییری نداشته است.

5. متد reduce

کاری که متد reduce انجام می‌دهد این است که با گرفتن یک “جمع کننده” (accumulator) و هریک از اعضای آرایه، اعضای آرایه را به “یک مقدار” مشخص تقلیل می‌دهد. برای روشن شدن موضوع به مثال زیر دقت کنید:

const arr = [1, 2, 3, 4, 5, 6];

const sum = arr.reduce(function(total, value){ return (total + value); }, 0);
console.log(sum); // 21

همان‌طور که در مثال بالا ملاحظه می‌کنید، reduce دو مقدار می‌گیرد: اول یک تابع که تک‌تک مقادیر را (value) می‌گیرد و مقداربرگشتی از آن تابع به “جمع‌کننده” (total) اضافه می‌شود. هر مقداری که این تابع برگرداند داخل جمع‌کننده ذخیره می‌شود تا در هنگام اجرای تابع برای عضو بعدی آرایه بتوان از آن استفاده کرد. دوم مقدار اولیه‌ی جمع کننده که این‌جا صفر است. بنابر توضیحات گفته شده چیزی که از کد بالا انتظار داریم مجموع اعداد آرایه است که در ثابت sum قرار می‌گیرد. اگر بخواهیم با استفاده از for مشابه کد بالا را بنویسیم به شکل زیر در می‌آید:

const arr = [1, 2, 3, 4, 5, 6];
let sum = 0;
for(let i = 0; i< arr.length; i++){
    sum += arr[i];
}
console.log(sum); //21

همان‌طور که می‌بینید کد اول نسبت به این کد کوتاه‌تر و دارای خوانایی بیش‌تری است. بخصوص اگر بخواهید عملیات مفصل‌تری را بر روی اعضای آرایه انجام دهید.

6. متد some

این متد یک شرط را به عنوان ورودی می‌گیرد و بررسی می‌کند تا این شرط حداقل روی یکی از اعضای آرایه (و بیش‌تر) صدق کند. در این صورت مقدار true برمی‌گرداند. اگر شرط روی هیچ‌کدام از اعضا صادق نبود مقدار برگردانده شده false خواهد بود. مثال:

const arr = [1, 2, 3, 4, 5, 6];

// at least one element is greater than 4?
const largeNum = arr.some(function (num) { return num > 4; });
console.log(largeNum); // output: true

// at least one element is less than or equal to 0?
const smallNum = arr.some(function (num) { num <= 0; });
console.log(smallNum); // output: false

در مثال بالا، بار اول چک کرده‌ایم آیا آرایه عددی بزرگ‌تر از 4 دارد یا نه (خط 4). که مشخصا جواب true خواهد بود که این مقدار داخل largeNum ریخته می‌شود. بار دوم در خط 8 چک کرده‌ایم آیا آرایه عددی کم‌تر از صفر دارد یا نه و این‌بار جواب منفی یا false است که این مقدار داخل smallNum ریخته می‌شود.

7. متد every

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

const arr = [1, 2, 3, 4, 5, 6];

// all elements are greater than 4
const greaterFour = arr.every(function (num) { return num > 4; });
console.log(greaterFour); // output: false

// all elements are less than 10
const lessTen = arr.every(function (num) { return num < 10; });
console.log(lessTen); // output: true

در خط 4 بررسی می‌کنیم آیا همه‌ی اعضای آرایه از 4 بزرگ‌تر هستند؟ که البته جواب false است. در خط 8 بررسی می‌کنیم آیا همه‌ی اعضای آرایه از 10 کم‌تر هستند؟ بله و جوابtrue است.

8. متد sort

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

const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];

// sort in descending order
descOrder = arr.sort(function (a, b) { return a > b ? -1 : 1; });
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

// sort in ascending order
ascOrder = alpha.sort(function (a, b) { return a > b ? 1 : -1; });
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

یک تابع با دو ورودی وارد sort می‌شود. ورودی‌ها با یک‌دیگر مقایسه می‌شوند. بسته به مقایسه‌ی دو عضو، اگر مقداری کوچک‌تر از صفر برگردانده شود، مقدار a در ایندکس کم‌تری نسبت به مقدار b قرار می‌گیرد و اگر مقداری بزرگ‌تر از صفر برگردانده شود، b در ایندکس کم‌تری نسبت به a قرار می‌گیرد. در صورتی که صفر برگردانده شود، ترتیب a و b تغییر داده نمی‌شود. برای مثال در خط 5، گفته شده که اگر a از b بزرگ‌تر باشد در ایندکس کم‌تری قرار بگیرد (برگرداندن مقدار منفی) و این به معنی مرتب‌سازی نزولی است. در خط 9 نیز حروف با هم مقایسه شده و گفته شده اگر ترتیب الفبایی a بزرگ‌تر از b باشد، b در ایندکس کم‌تری نسبت به a قرار بگیرد (برگرداندن مقدار مثبت) که به معنی مرتب‌سازی صعودی است.

این قابلیتِ انتخابی بودن تابع ورودی در sort باعث می‌شود این متد انعطاف‌پذیری بالایی داشته باشد. مثلا اگر بخواهیم آرایه‌ای از آرایه‌ها (آرایه‌ی دو بعدی) را بر اساس یکی از اعضای آرایه‌های داخلی مرتب‌سازی کنیم می‌توانیم بنویسیم:

const arr = [[2, 'two'], [4, 'four'], [3, 'three'], [1, 'one']];

const newArr = arr.sort(function (a, b) { return a[0] - b[0]; });
console.log(newArr);

اگر a[0] بزرگ‌تر از b[0] باشد، مقدار بزرگ‌تر از صفر برگردانده شده و b در ایندکس کم‌تری نسبت به a قرار می‌گیرد که به معنی مرتب‌سازی صعودی نسبت به مقدار اول آرایه‌های داخلی است.

9. متد Array.from

این متد یک مقدار شبه‌آرایه یا قابل گسترش (iterable) را گرفته و از آن یک آرایه‌ی واقعی می‌سازد. در مورد مقادیر قابل گسترش بعدها می‌نویسم و این‌جا لینک می‌کنم ولی توصیه می‌کنم اگر در مورد این نوع مقادیر اطلاعی ندارید گوگل کنید. مثال زیر را ببینید:

 const name = 'Maysam';
 const nameArray = Array.from(name);

 console.log(name); // output: Maysam
 console.log(nameArray); // output: ['M', 'a', 'y', 's', 'a', 'm']

همان‌طور که می‌دانید مقادیر رشته‌ای (String) جزو مقادیر گسترش‌پذیر محسوب می‌شوند و می‌توان آن را نسبت به کاراکترها گسترش و به آرایه‌ای از کاراکترها تبدیل کرد. چیزی که کد بالا به روشنی نمایش می‌دهد. این متد در مورد تبدیل عبارات شبه‌آرایه‌ای به آرایه واقعی نیز کاربرد دارد. مثال زیر را ببینید:

  // I assume that you have created unorder list of items in our html file.

  const lis = document.querySelectorAll('li');
  const lisArray = Array.from(document.querySelectorAll('li'));

  // is true array?
  console.log(Array.isArray(lis)); // output: false
  console.log(Array.isArray(lisArray));  // output: true

در مثال بالا فرض شده ما در فایل HTML خود چند تگ li داریم. در خط 3 این کدها توسط querySelectorAll به شکل شبه‌آرایه‌ای داخل متغیر lis ریخته شده است. در خط 4 این مقدار شبه‌ آرایه‌ای به آرایه واقعی تبدیل شده است. همان‌طور که می‌بینید در خط 7 متد isArray برای متغیر lis مقدار false برمی‌گرداند و آن را آرایه نمیشناسد. اما در خط 8 نوع lisArray را آرایه تشخیص می‌دهد.

نکته:

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

const name = 'Maysam';
const nameArray = [...name];

console.log(name); // output: Maysam
console.log(nameArray); // output: ['M', 'a', 'y', 's', 'a', 'm']

  // I assume that you have created unorder list of items in our html file.

  const lis = document.querySelectorAll('li');
  const lisArray = [...document.querySelectorAll('li')];

  // is true array?
  console.log(Array.isArray(lis)); // output: false
  console.log(Array.isArray(lisArray));  // output: true

10. متد of

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

const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]

اقتباس شده از:
10 JavaScript array methods you should know