مسیر
/
JavaScript
JavaScript
/
برنامه‌ی درسی
/
تبدیل‌های آرایه
تب

تبدیل‌های آرایه در JavaScript

20 تمرین

درباره‌ی تبدیل‌های آرایه

در JavaScript، کلاس Array متدهای درون‌ساز قدرتمند زیادی برای تبدیل آرایه‌ها دارد. این متدها تبدیل یک آرایه به آرایه‌ی دیگر را بسیار ساده‌تر از زمانی می‌کنند که بخواهید از یک حلقه‌ی For ساده یا دستکاری مستقیم‌تر استفاده کنید.

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

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

map (خالص)

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

let arr = [1, 2, 3, 4];

const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]

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

filter (خالص)

با فیلتر کردن آرایه‌ی فعلی، آرایه‌ای جدید می‌سازد؛ به کمک یک تابع فیلتر (که اگر عنصر باید نگه داشته شود true و اگر باید حذف شود false برمی‌گرداند).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (خالص)

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

let arr = [1, 2, 3, 4];

// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10

// Classify the numbers by whether they are odd or not
arr.reduce(
  (accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
      accumulator.even.push(currentValue);
    } else {
      accumulator.odd.push(currentValue);
    }

    return accumulator;
  },
  { even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }

reverse

ترتیب عناصر یک آرایه را برعکس می‌کند.

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

arr.reverse();
// => [4, 3, 2, 1]

این متد آرایه‌ای را که روی آن فراخوانی می‌شود تغییر می‌دهد.

slice (خالص)

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

عنصری که در اندیس پایان قرار دارد شامل نمی‌شود. همچنین همه‌ی پارامترها اختیاری‌اند: اندیس شروع به‌طور پیش‌فرض 0 است و اندیس پایان به‌طور پیش‌فرض طول آرایه.

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

arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]

splice

عناصر جدیدی از یک آرایه را حذف یا جایگزین می‌کند و/یا اضافه می‌کند. پارامترهای زیر را می‌گیرد:

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

splice عناصری را که حذف شده‌اند برمی‌گرداند.

const arr = ['1', '2', '5', '6'];

// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']

// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']

// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']

sort

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

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']
Caution

این رفتار پیش‌فرض وقتی می‌خواهید اعداد را مرتب کنید به نتایج نادرست منجر می‌شود.

const arr = [3, 1, 2, 10];
arr.sort();
// => [1, 10, 2, 3]
// Because the string '10' comes before '2' in dictionary order.

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

  • عدد منفی اگر آرگومان اول باید قبل از دومی مرتب شود
  • عدد مثبت اگر آرگومان اول باید بعد از دومی مرتب شود
  • 0 اگر ترتیب عناصر باید یکسان بماند

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

const arr = [3, 1, 2, 10];
arr.sort((a, b) => a - b);
// => [1, 2, 3, 10]
// "a - b" is negative when b is greater than a, positive when
// a is greater than b and 0 when they are equal.

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

const arr = [
  { name: 'Lydia', age: 7 },
  { name: 'Anne', age: 34 },
  { name: 'Holger', age: 59 },
];

arr.sort((item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }
  if (item1.name > item2.name) {
    return 1;
  }
  return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]

از سال ۲۰۱۹، مشخصات زبان می‌گوید که مرتب‌سازی باید پایدار باشد، اما هیچ تضمینی درباره‌ی کارایی (پیچیدگی زمانی و مکانی) وجود ندارد.

ویرایش از طریق GitHub این پیوند در پنجره یا زبانه‌ی جدیدی باز می‌شود

تبدیل‌های آرایه را یاد بگیرید