Перетворювальні чари Еліз

У JavaScript клас Array має багато потужних вбудованих методів для перетворення масивів. Ці методи значно полегшують перетворення одного масиву на інший, ніж якби ми робили це простим циклом for чи прямим маніпулюванням.

Деякі методи є чистими: вони не змінюють початковий масив, а натомість повертають новий. Інші ж методи змінюють масив, для якого їх викликано, і не повертають змінений масив.

Нижче наведено деякі з найуживаніших методів для перетворення масивів. Повний список доступних методів можна знайти в документації MDN.

map (чистий)

Створює новий масив, перетворюючи кожен елемент за функцією, переданою як аргумент. Такі функції зворотного виклику часто записують як стрілкові функції.

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 (чистий)

Створює масив, фільтруючи наявний, за допомогою функції фільтрування (вона повертає правду, якщо елемент слід залишити, і неправду, якщо його слід прибрати).

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 сортує елементи масиву, спершу перетворюючи їх на рядки тексту (англ. string), а потім застосовуючи порівняння рядків тексту (див. концепцію «Порівняння»). Сортування відбувається на місці, тобто початковий масив змінюється. 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']

Щоб налаштувати поведінку сортування, ми можемо передати функцію порівняння як аргумент. Саму функцію порівняння викликають із двома аргументами, які є двома елементами масиву. Вона має повернути таке:

• відʼємне число, якщо перший аргумент має стояти перед другим після сортування
• додатне число, якщо перший аргумент має стояти після другого
• 0, якщо порядок елементів має залишитися незмінним

Ось приклад того, як за допомогою власної функції порівняння можна відсортувати масив обʼєктів.

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 } ]