JavaScript,Теорія

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

Методи, що модифікують масив. Частина 2. Методи pop(), push(), reduce(), reduceRight(), shift(), unshift(), fill()

Зміст

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

1. Метод pop(). Витягнути останній елемент з масиву

Метод pop() виконує наступні операції:

  • повертає останній елемент масиву;
  • видаляє цей останній елемент.

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

number = array.pop()

де

  • number – останній елемент в масиві array. Якщо масив пустий [], то number = undefined;
  • array – вихідний масив, з якого витягується останній елемент. Тип елементів масиву може бути довільним.

Приклад.

// Метод pop().
// Витягнути останній елемент з масиву

// Обробка масиву цілих чисел.
// 1. Оголосити масив чисел та вивести його
var A1 = new Array( 1, 2, 3, 4, 5 )
console.log("A1:")
console.log(A1)

// 2. Викликати метод pop()
var number = A1.pop() // number = 5

// 3. Вивести змінений масив
console.log("A1:")
console.log(A1) // A1 = [ 1, 2, 3, 4 ]

// 4. Вивести отримане число
console.log("number = " + number)

console.log("Ok");

Результат

A1:
[ 1, 2, 3, 4, 5 ]
A1:
[ 1, 2, 3, 4 ]
number = 5
Ok

  ⇑

2. Метод push(). Додати один або декілька елементів в кінець масиву

Метод push() використовується для додавання нового елементу в кінець масиву. Розмір масиву збільшується. Метод повертає нову довжину масиву.

Використання методу у програмі може бути, наприклад, таким

length = array.push(item1, item2, ..., itemN)

де

  • item1, item2, itemN – елементи, що додаються до масиву array;
  • array – масив, який формується;
  • length – довжина масиву array (ціле число).

Приклад.

// Метод push().
// Додати новий елемент в кінець масиву

// 1. Сформувати масив різнотипних елементів
// 1.1. Оголосити пустий масив чисел
var A1 = new Array()

// 1.2. Додати до масиву різнотипні елементи
A1.push(25)
A1.push("abcd")
A1.push(2.237)
A1.push('+')
var length = A1.push(true) // length = 5

// 1.3. Вивести масив A1
console.log("A1:")
console.log(A1)

// 1.4. Вивести нову довжину масиву
console.log("A1.length = " + length)

// 2. Сформувати масив на основі інших двох масивів
// 2.1. Оголосити пустий масив-результат та два масиви, заповнені даними
var B1 = [] // масив - результат
var B2 = ['1', '2', '3']
var B3 = [10, 28, 33, 49]

// 2.2. Викликати метод push(), отримати нову довжину масиву
length = B1.push(B2, B3) // B1 = [ [ '1', '2', '3' ], [ 10, 28, 33, 49 ] ]

// 2.3. Вивести масив-результат
console.log("B1:")
console.log(B1)

// 2.4. Вивести нову довжину масиву
console.log("B1.length = " + length)

console.log("Ok");

Результат

A1:
[ 25, 'abcd', 2.237, '+', true ]
A1.length = 5
B1:
[ [ '1', '2', '3' ], [ 10, 28, 33, 49 ] ]
B1.length = 2
Ok

  ⇑

3. Методи reduce() та reduceRight(). Звести два значення масиву в одне

Методи reduce() та reduceRight() здійснюють послідовне сканування масиву та виконання заданої зворотньої функції над парою поточного та попереднього елементів. Метод reduce() розглядає масив у напрямку зліва направо. Метод reduceRight() розглядає масив у напрямку справа наліво.

Використання методів у програмі наступне

result = array.reduce(Func)
result = array.reduceRight(Func)

де

  • array – вихідний масив;
  • result – результат, який отримується поєднанням сусідніх елементів масиву;
  • Func – зворотня функція (callback function), яка визначає формулу поєднання чи використання сусідніх елементів масиву.

У програмі зворотня функція Func() оголошується наступним чином:

function Func(previousValue, currentValue, currentIndex, array) {
  // Дії, що визначають формулу зменшення масиву до одиночного значення
  // ...
}

тут

  • previousValue – попереднє значення в масиві. Для методу reduce() попереднім є значення з меншим індексом. Для методу reduceRight() попереднім є значення з більшим індексом;
  • currentValue – поточне значення в масиві. Це значення рівне array[currentIndex];
  • currentIndex – індекс (позиція) значення currentValue;
  • array – ім’я масиву, який обробляється.

Приклад.

У прикладі демонструється обчислення суми елементів масиву завдяки використанню функцій reduce() та reduceRight().

// Методи reduce() та reduceShift()
// Звести два значення масиву в одне

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

// Функція, яка визначає суму попереднього та наступного значень,
// таким чином обчислюється сума елементів масиву
function Func(previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue
}

// Обчислити суму
var sum = A1.reduce(Func)

console.log("A1 => " + A1)
console.log("reduce(A1) = " + sum)

sum = A1.reduceRight(Func)
console.log("reduceRight(A1) = " + sum)

console.log("Ok");

Результат

A1 => 1,2,3,4,5,6,7
reduce(A1) = 28
reduceRight(A1) = 28
Ok

  ⇑

4. Метод shift(). Витягнути перший елемент з масиву

Метод shift() видаляє (витягує) перший елемент з масиву. Використання методу у програмі виглядає так

item = array.shift()

тут

  • array – масив, з якого витягується перший елемент;
  • item – елемент, що був витягнутий;

Метод shift() повертає елемент, що був витягнутий з масиву.

Приклад.

// Метод shift(). Витягнути перший елемент з масиву
// 1. Оголосити масив чисел
var A = new Array(1, 2, 3, 4, 5, 6, 7)

// 2. Витягнути елемент
var number = A.shift()

// 3. Вивести масив A та число number
console.log("A => " + A)
console.log("number = " + number)

// 4. Оголосити масив рядків
var S = ["abc", "ac", "abcd", "jklmn"]

// 5. Витягнути перші 2 елементи з масиву S
S.shift()
S.shift()

// 6. Вивести масив S
console.log("S => " + S)

Результат

A => 2,3,4,5,6,7
number = 1
S => abcd,jklmn

  ⇑

5. Метод unshift(). Вставка елементів на початок іншого масиву

Метод unshift() здійснює вставку одного або декількох елементів на початок вихідного масиву. Використання методу має декілька реалізацій:

array.unshift(item1, item2, itemN)
array.unshift(item)
array.unshift(arrayItems)

де

  • array – вихідний масив;
  • item, item1, item2, itemN – окремі елементи, які вставляються на початок масиву array;
  • arrayItems – масив елементів, що вставляються на початок масиву array.

Приклад.

// Метод unShift(). Вставити один або декілька
// елементів на початку масиву.

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

// 2. Масив рядків, який буде вставлятись на початку масиву A
var B = ["abc", "ab", "cde"]

// 3. Викликати unShift()
A.unshift(B) // вставити масив
A.unshift(233) // вставити одне число
A.unshift(true, '+') // вставити 2 елементи

// 4. Вивести результат
console.log("A = " + A)
console.log("B = " + B)

Результат

A = true,+,233,abc,ab,cde,0,1,2,3,4,5,6,7
B = abc,ab,cde

  ⇑

6. Метод fill(). Заповнити фрагмент масиву значенням

З допомогою методу fill() можна заповнювати конкретним значенням масив або його фрагмент. Розглядаються 3 випадки використання методу fill().

Випадок 1. Виклик методу з 1 параметром. У цьому випадку значенням заповнюється увесь вихідний масив

array1.fill(value)
array2 = array1.fill(value)

тут

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

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

array1.fill(value, start)
array2 = array1.fill(value, start)

тут

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

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

array1.fill(value, start, end)
array2 = array1.fill(value, start, end)

тут

  • array1 – вихідний масив. Цей масив також змінюється;
  • array2 – результуючий масив;
  • value – значення, що заповнює масив array1;
  • start, end – відповідно початкова та кінцева позиції (індекси) масиву array1, які вказують на діапазон, що повинен бути заповнений. Заповнюється діапазон [start; end-1].

Приклад.

// Метод fill(). Заповнити масив значенням.

// 1. Виклик методу з одним параметром
// 1.1. Вихідний масив чисел
var A1 = new Array( 10, 11, 12, 33, 41, 55, 60, 87 )

// 1.2. Заповнити увесь масив значенням 3
var A2 = A1.fill(3)

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

// 2. Виклик методу з 2 параметрами
// 2.1. Оголосити масив різнотипних об'єктів
var B1 = [2, "abc", true, 2.18, -1.7, [2, 3]]

// 2.2. Заповнити масив значеннями '+'
//      починаючи з позиції 2
var B2 = B1.fill('+', 2)

// 2.1. Вивести результат
console.log("B1 = " + B1)
console.log("B2 = " + B2)

// 3. Виклик методу з 3 параметрами
// 3.1. Оголосити масив рядків
var C1 = ["a", "b", "c", "d", "ef", "gh"]

// 3.2. Заповнити масив числом 7.77
// починаючи з позиції 1, закінчуючи позицією 3 включно
var C2 = C1.fill(7.77, 1, 4)

// 3.3. Вивести результат
console.log("C1 = " + C1)
console.log("C2 = " + C2)

Результат

A1 = 3,3,3,3,3,3,3,3
A2 = 3,3,3,3,3,3,3,3
B1 = 2,abc,+,+,+,+
B2 = 2,abc,+,+,+,+
C1 = a,7.77,7.77,7.77,ef,gh
C2 = a,7.77,7.77,7.77,ef,gh

  ⇑

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

  ⇑