Перетворення масивів у

Про концепцію Перетворення масивів

У 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']

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

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