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

  ⇑

Связанные темы

  ⇑