JavaScript,Теорія

JavaScript. Методи, що модифікують масив. Частина 1.

Методи, що модифікують масив. Частина 1. Методи sort(), reverse(), forEach(), filter(), map(), copyWithin(), splice()

Зміст

Пошук на інших ресурсах:

1. Метод sort(). Сортування масиву у порядку зростання

Метод sort() повертає відсортований масив. Найпростіша реалізація методу сортує масиву у зростаючому порядку. У цьому випадку використання методу має декілька варіантів.

Варіант 1. Сортування в зростаючому порядку. Тут можна створити вираз порівняння

array.sort((a, b) => a - b)

або функцію порівняння з відповідним викликом

// функція порівняння
function Compare(a, b) {
  return a - b
}

// виклик методу sort()
array.sort(Compare)

У вищенаведеному коді:

  • array – масив, який потрібно відсортувати;
  • a, b – два умовних значення, які визначають знак результату. Якщо a<b, то результат різниці a-b від’ємний і масив сортується у порядку зростання. Якщо a>=b, то результат a-b додатній і масив сортується у порядку спадання.

Варіант 2. Сортування у спадному порядку. У цьому випадку вираз матиме вигляд

array.sort((a, b) => b - a) // a-b => b-a

Іншою буде й функція порівняння.

// функція порівняння
function Compare(a, b) {
  return b - a
}

// виклик методу sort()
array.sort(Compare)

Приклад.

// Метод sort(). Сортування масиву

// 1. Посортувати масив чисел у зростаючому порядку
// 1.1. Оголосити масив чисел
var A1 = new Array( 2.8, 3.3, -1.6, 5.8, 5.5, 1.4, -7.2 )

// 1.2. Оголосити функцію порівняння
function Compare(a, b) {
  return a - b
}

// 1.3. Посортувати масив у зростаючому порядку
var A2 = A1.sort(Compare)

// 1.4. Вивести результат
console.log("A1 = " + A1)
console.log("A2 = " + A2)

// 2. Посортувати масив A1 в спадному порядку
// 2.1. Оголосити вираз сортування, тільки замість a-b вказати b-a
var A3 = A1.sort((a, b) => b - a);

// 2.2. Вивести результат
console.log("A1 = " + A1)
console.log("A3 = " + A3)

Результат.

A1 = -7.2,-1.6,1.4,2.8,3.3,5.5,5.8
A2 = -7.2,-1.6,1.4,2.8,3.3,5.5,5.8
A1 = 5.8,5.5,3.3,2.8,1.4,-1.6,-7.2
A3 = 5.8,5.5,3.3,2.8,1.4,-1.6,-7.2

  ⇑

2. Метод reverse(). Сформувати елементи масиву у зворотньому порядку

Метод reverse() повертає масив, в якому елементи розміщуються у зворотньому порядку по відношенню до вихідного масиву. Метод не отримує параметрів і в програмі може використовуватись наступним чином

array1.reverse()
array2 = array1.reverse()

тут

  • array1 – масив, який реверсується. Після виклику reverse() цей масив також змінюється;
  • array2 – копія реверсованого масиву array1.

Метод reverse() повертає реверсований масив.

Приклад.

// Метод reverse(). Реверсування масиву

// 1. Оголосити масив чисел
var A1 = new Array(1, 2, 3, 4, 5, 6, 7)

// 2. Реверсувати масив
var A2 = A1.reverse()

// 3. Вивести масиви A1, A2
console.log("A1 => " + A1)
console.log("A2 => " + A2)

console.log("Ok");

Результат

A1 => 7,6,5,4,3,2,1
A2 => 7,6,5,4,3,2,1
Ok

  ⇑

3. Метод forEach(). Виконати задану функцію для кожного елементу масиву

Метод forEach() дозволяє виконати задану операцію (дію) над кожним елементом масиву. Наприклад, кожен елемент масиву чисел може бути помножений на 5.

Виклик методу forEach() для об’єкту масиву виглядає наступним чином

array.forEach(Func)

де

  • array – масив, що обробляється. Цей масив змінюється;
  • Func – ім’я функції зворотнього виклику (callback function), яка виконує операцію над елементом масиву.

Функція зворотнього виклику отримує 3 параметри і в програмі повинна мати приблизно наступне оголошення

function Func(value, index, array)
{
  // Дії, які змінюють array[index]
  // ...
}

тут

  • value – значення елементу масиву array[index];
  • index – позиція елементу масиву value;
  • array – безпосередньо масив, що обробляється.

Приклад.

У прикладі демонструється:

  • множення кожного елементу масиву чисел на 3;
  • реверсування кожного елементу масиву рядків.

 

// Функція forEach().
// Виконати задану операцію для кожного елементу масиву.

// 1. Обробка масиву чисел. Помножити кожен елемент масиву на 3
// 1.1. Оголосити масив
var A = new Array(2, 8, 3, 5, 4, 1)

// 1.2. Оголосити функцію, яка множить параметр array[index] на 3
function Mult3(value, index, array) {
  array[index] = value * 3
}

// 1.3. Утворити новий масив та вивести його - викликати forEach()
A.forEach(Mult3);
console.log("A = " + A)

// 2. Обробка масиву рядків. Реверсувати кожен рядок масиву
// 2.1. Оголосити масив
var S = ["abc", "def", "jklm", "ghi"]

// 2.2. Функція Reverse - реверсує array[index]
function Reverse(value, index, array) {
  var str = ""
  for (var i = 0; i < value.length; i++)
    str = value[i] + str
  array[index] = str
}

// 2.3. Застосувати функцію Reverse над кожним рядком масиву S
S.forEach(Reverse)
console.log(S)

console.log("Ok");

Результат

A = 6,24,9,15,12,3
[ 'cba', 'fed', 'mlkj', 'ihg' ]
Ok

  ⇑

4. Метод filter(). Отримати новий масив, елементи якого задовільняють заданій умові

Метод filter() дозволяє вибрати з вихідного масиву елементи згідно з умовою, і утворити новий масив з цих елементів.

Використання методу filter() у спрощеному вигляді наступне:

array1 = array2.filter(Func);

де

  • array2 – об’єкт, що є вихідним масивом;
  • array1 – об’єкт, що є результуючим масивом;
  • Func – ім’я функції, яка може отримувати до 3 параметрів.

Функція Func() оголошується з наступним синтаксисом

function Func(value, index, array)
{
  // Тіло функції, яке повертає
  // логічне значення (true або false)
  // ...
}

де

  • array – масив, який фільтрується;
  • value – деяке значення з масиву array. Для value справедлива рівність: value==array[index];
  • index – позиція значення value в масиві array. Маючи index, можна фільтрувати вихідний масив на основі індексу. Наприклад, отримати новий масив елементів, що розміщені на парних позиціях (0, 2, 4, …).

Таким чином, у функції обробки є доступ до масиву за індексом array[index] або за значенням value.

Якщо для отримання потрібного результату достатньо одного параметра value, то функція Func() може мати спрощений вигляд:

function Func(value)
{
  // Тіло функції, яке повертає
  // логічне значення (true або false)
  // ...
}

Приклад.

У прикладі демонструється отримання нового масиву, елементи якого лежать в діапазоні [ 5; 10].

// Функція filter().
// Фільтрує масив на основі заданої умови
// 1. Оголосити масив чисел
var A1 = [2, 8, 3, 5, 4, 1, 8, 3, 10];

// 2. Функція, яка повертає true, якщо число знаходиться
// в межах 5-10
function Range_5_10(value, index, array) {
  if ((array[index] >= 5) && (array[index] <= 10))
    return true;
  return false;
}

// 3. Функція, яка робить те саме, що й функція Range_5_10(),
// тільки перевіряється значення value
function Range_5_10_2(value)
{
  return (value >= 5) && (value <= 10);
}

// 4. Отримати новий масив на основі функції Range_5_10()
var A2 = A1.filter(Range_5_10)
console.log("A2 = " + A2)

// 5. Отримати новий масив на основі функції Range_5_10_2()
var A3
A3 = A1.filter(Range_5_10_2)
console.log("A3 = " + A3)

console.log("Ok");

Результат

A2 = 8,5,8,10
A3 = 8,5,8,10
Ok

  ⇑

5. Метод map(). Отримати новий масив, який формується на основі заданої функції перетворення

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

array2 = array1.map(Func)

де

  • array1 – вихідний масив, над елементами якого здійснюється перетворення. Цей масив так само змінюється;
  • array2 – результуючий масив;
  • Func – функція зворотнього виклику, в якій задається операція над елементом масиву.

Оголошення функції Func() виглядає наступним чином

function Func(value, index, array)
{
  // Дії, які змінюють array[index]
  // ...
}

тут

  • value – значення елементу масиву array[index]. Тут справедлива рівність array[index]==value;
  • index – позиція елементу масиву value;
  • array – безпосередньо масив, що обробляється.

Приклад.

// Функція map().
// Отримати новий масив на основі заданої функції

// 1. Обробка масиву цілих чисел.
// Сформувати абсолютне значення кожного елементу масиву.
// 1.1. Оголосити масив чисел та вивести його
var A1 = new Array(2, -8, -3, 5, -4, 1, 2, -3, 4, 4, -5, -2)
console.log("A1:")
console.log(A1)

// 1.2. Викликати метод map() з функцією, яка повертає
// абсолютне значення числа
var A2 = A1.map(Math.abs) // використати функцію з бібліотеки Math
console.log("A2:")
console.log(A2)

// 2. Обробка масиву дійсних чисел.
// Сформувати новий масив, в якому числа
// попереднього масиву помножені на 2.
// 2.1. Оголосити масив чисел та вивести його
var B1 = [ -2.8, -3.5, -1.4, -0.9905]
console.log("------------------------")
console.log("B1:")
console.log(B1)

// 2.1. Оголосити нашу функцію, яка буде
// множити елемент масиву на 2
function Func(value, index, array) {
  array[index] = array[index] * 2
}

// 2.2. Викликати метод map()
B1.map(Func)
console.log("B1:")
console.log(B1)

console.log("Ok");

Результат

A1:
[
2, -8, -3, 5, -4,
1, 2, -3, 4, 4,
-5, -2
]
A2:
[
2, 8, 3, 5, 4,
1, 2, 3, 4, 4,
5, 2
]
------------------------
B1:
[ -2.8, -3.5, -1.4, -0.9905 ]
B1:
[ -5.6, -7, -2.8, -1.981 ]
Ok

  ⇑

6. Метод copyWithin(). Скопіювати в поточний масив фрагмент підмасиву, що є частиною поточного масиву

Метод copyWithin() використовується для копіювання фрагментів масиву в інше місце цього ж масиву. Виклик методу може бути з різною кількістю параметрів (від 1 до 3). Метод повертає цей же масив (цей об’єкт).

В залежності від кількості параметрів виділяють такі випадки.

Випадок 1. Виклик методу з 1 параметром

array1.copyWithin(target)
array2 = array1.copyWithin(target)

тут

  • array1 – вихідний масив;
  • array2 – масив, що є посиланням на результуючий вихідний масив array1;
  • target – позиція, з якої починається вставка фрагменту цього ж масиву. Сам фрагмент починається з початку масиву (з позиції 0).

Випадок 2. Виклик методу з 2 параметрами

array1.copyWithin(target, start)
array2 = array1.copyWithin(target, start)

тут

  • array1 – вихідний масив;
  • array2 – посилання на array1;
  • target – позиція вставки фрагменту масиву array1, який починається з позиції start;
  • start – позиція, з якої починається фрагмент, що вставляється. Розмір фрагменту починається з позиції start до кінця масиву.

Випадок 3. Виклик методу з 3 параметрами

array1.copyWithin(target, start, end)
array2 = array1.copyWithin(target, start, end)

тут

  • array1 – вихідний масив;
  • array2 – посилання на array1;
  • target – позиція вставки фрагменту масиву array1, який починається з позиції start;
  • start, end – позиції початку та кінця фрагменту, що вставляється. Останнім елементом, який вставляється, є елемент з позицією end-1.

Приклад.

// Метод copyWithin(). Скопіювати частину масиву самого в себе.

// Вихідний масив чисел
var A1 = new Array( 0, 1, 2, 3, 4, 5, 6, 7 )

// 1. Виклик методу з одним параметром.
// Вставити у масив A1 фрагмент цього ж масиву, починаючи з позиції 3
var A2 = A1.copyWithin(3) // A2 = A1 = [0, 1, 2, 0, 1, 2, 3, 4 ]
console.log("A1 = " + A1)
console.log("A2 = " + A2)

// 2. Виклик методу з 2 параметрами
A1 = [0, 1, 2, 3, 4, 5, 6, 7]

// Вставити в масив A1 фрагмент цього ж масиву.
// Вставка починається з позиції 2.
// фрагмент, що вставляється, починається з позиції 3.
var A3 = A1.copyWithin(2, 3) // A3 = A1 = [0, 1, 3, 4, 5, 6, 7, 7]
console.log("A1 = " + A1)
console.log("A3 = " + A3)

// 3. Виклик методу з 3 параметрами
A1 = [0, 1, 2, 3, 4, 5, 6, 7]

// Вставити в масив A1 фрагмент цього ж масиву.
// Вставка починається з позиції 2.
// Фрагмент, що вставляється, починається з позиції 3
// і закінчується позицією 6. Позиція 6 не входить у фрагмент.
var A4 = A1.copyWithin(2, 3, 6) // A4 = A1 = [0, 1, 3, 4, 5, 5, 6, 7]
console.log("A1 = " + A1)
console.log("A4 = " + A4)

Результат

A1 = 0,1,2,0,1,2,3,4
A2 = 0,1,2,0,1,2,3,4
A1 = 0,1,3,4,5,6,7,7
A3 = 0,1,3,4,5,6,7,7
A1 = 0,1,3,4,5,5,6,7
A4 = 0,1,3,4,5,5,6,7

  ⇑

7. Метод splice(). Отримати новий масив, що складається з елементів, які були додані чи видалені з заданого масиву

Метод splice() призначений для витягування (видалення) елементів з вихідного масиву і заміни їх новими елементами. Метод повертає масив, що містить витягнуті (видалені) елементи.

При використанні методу, йому може передаватись один, два або три аргументи. Нижче розглядаються можливі випадки використання методу.

Випадок 1. Метод отримує один аргумент. У цьому випадку використання методу наступне

array2 = array1.splice(start)

де

  • array1 – вихідний масив, що обробляється;
  • array2 – результуючий масив, який містить елементи, що були витягнуті з масиву array1. Цей масив містить всі елементи масиву array1 починаючи з позиції start і до кінця масиву;
  • start – ціле число, що визначає позицію в масиві array, з якої елементи видаляються. Значення start починається з 0.

Після виклику методу splice() з 1 параметром масив array1 урізається. Видалені елементи копіюються в масив array2.

Випадок 2. Метод отримує 2 аргументи. У цьому випадку використання методу наступне

array2 = array1.splice(start, deleteCount)

де

  • array1 – вихідний масив;
  • array2 – масив, що утворюється копіюванням deleteCount елементів з масиву array1 починаючи з позиції start масиву array1;
  • start – позиція в масиві array1, з якої видаляються елементи з масиву array1 та копіюються елементи в масив array2;
  • deleteCount – кількість елементів з масиву array1, які потрібно видалити. Значення deleteCount також визначає кількість елементів, які копіюються з array1 в array2.

Випадок 3. Метод отримує 3 аргументи. Тут виклик методу може бути такий

array2 = array1.splice(start, deleteCount, arrayItems)

тут

  • array1, array2 – вихідний та результуючий масиви;
  • start – позиція в масиві array1 з якої дані видаляються та копіюються в масив array2. Значення start починається з 0;
  • deleteCount – кількість елементів, які видаляються з array1 і копіюються в array2;
  • arrayItems – масив елементів, які вставляються на місце видалених елементів з array1. Вставляються всі елементи масиву arrayItems незалежно від їхньої кількості.

Приклад.

// Метод splice(). Отримати новий масив,
// що складається з елементів, які були додані чи видалені.

// 1. Реалізація методу з 1 параметром
// 1.1. Вихідний масив чисел
var A = new Array( 0, 1, 2, 3, 4, 5, 6, 7 )

// 1.2. Урізати масив A до позиції 3,
// отримати новий масив починаючи з позиції 3
var B = A.splice(3)

// 1.3. Вивести результат
console.log("A = " + A) // A = [ 0, 1, 2 ]
console.log("B = " + B) // B = [ 3, 4, 5, 6, 7 ]

// ---------------------------------

// 2. Реалізація методу з 2 параметрами
// 2.1. Вихідний масив чисел
A = [0, 1, 2, 3, 4, 5, 6, 7]

// 2.2. Витягнути з масиву A елементи [3, 4]
//      та записати їх в масив B
B = A.splice(3, 2)

// 2.3. Вивести результат
console.log("A = " + A) // A = [ 0, 1, 2, 5, 6, 7 ]
console.log("B = " + B) // B = [ 3, 4 ]

// 3. Реалізація методу з 3 параметрами.
// Тут елементи, що витягуються з вихідного масиву, замінюються новими елементами
// 3.1. Вихідний масив чисел
A = [0, 1, 2, 3, 4, 5, 6, 7]

// 3.2. Замінити в масиві A елементи [3, 4] з позиції 3 на [8, 9, 10, 11],
// одночасно 2 елементи [3, 4] скопіювати в масив B
B = A.splice(3, 2, [8, 9, 10, 11])

// 3.3. Вивести результат
console.log("A = " + A) // A = [ 0, 1, 2, 8, 9, 10, 11, 5, 6, 7 ]
console.log("B = " + B) // B = [ 3, 4 ]

Результат

A = 0,1,2
B = 3,4,5,6,7
A = 0,1,2,5,6,7
B = 3,4
A = 0,1,2,8,9,10,11,5,6,7
B = 3,4

  ⇑

Споріднені теми

  ⇑