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

  ⇑

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

  ⇑