Методы массивов в JavaScript: методы итерации
Массивы в JavaScript состоят из списков элементов. JavaScript предоставляет множество полезных встроенных методов для работы с массивами. Методы, которые изменяют исходный массив, называются модификаторами, а методы, которые отображают значения массива, называются методами доступа.
Третий класс методов массивов – это методы итерации, которые перебирают все элементы массива по очереди. Эти методы тесно связаны с циклами.
Чтобы лучше понять данное руководство, необходимо иметь базовые навыки работы с массивами: уметь создавать, индексировать, изменять и итерировать массивы.
Читайте также:
- Работа с массивами в JavaScript
- Индексация, разделение и управление строками в JavaScript
- Методы массивов в JavaScript: методы доступа
- Методы массивов в JavaScript: модификаторы
В данном мануале описаны методы итерации, методы выполнения функций по каждому элементу в массиве, фильтрации желаемых результатов массива, уменьшения элементов массива до одного значения и поиска значений или индексов по массиву.
Примечание: Методы массивов пишутся как Array.prototype.method(), где Array.prototype относится к объекту Array. Но для простоты в руководстве массивы пишутся как method().
Стрелочные функции Javascript
Во многих примерах этого мануала используются стрелочные функции, представленные с помощью символов =>.
Функция – это блок кода, который можно повторно использовать. Стандартный синтаксис функции выглядит так:
var example = function() {
// code to execute
}
example();
Последняя версия JavaScript, доступная на момент написания мануала, поддерживает такой синтаксис стрелочных функций.
var example = () => {
// code to execute
}
example();
Каждый вид функции может принимать параметры в круглых скобках. Чтобы передать функции только один параметр, скобки можно опустить.
var example = parameter1 => {
// code to execute
}
В примерах данного мануала используется синтаксис стрелочных функций. Больше о функциях в JavaScript можно узнать здесь.
Метод forEach()
Метод forEach() вызывает функцию для каждого элемента в массиве.
Рассмотрим следующий массив с переменной fish:
let fish = [ "piranha", "barracuda", "cod", "eel" ];
Метод forEach() может вывести каждый элемент массива fish в консоль.
// Print out each item in the array
fish.forEach(individualFish => {
console.log(individualFish);
})
piranha
barracuda
cod
eel
Также для этого можно использовать цикл for и проверить свойство length.
// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
console.log(fish[i]);
}
Этот цикл выведет тот же результат, что и метод forEach (). Поскольку метод итерации специально предназначен для работы с массивами, forEach () является более простым вариантом решения этой конкретной задачи.
Метод map()
Метод map() создает новый массив из результатов вызова функции для каждого элемента массива.
Для примера этот метод может вывести каждую итерацию цикла в консоль. Метод map() не изменяет исходный массив. Он выводит значение нового массива. В отличие от forEach(), метод map() нужно присваивать новой переменной.
let fish = [ "piranha", "barracuda", "cod", "eel" ];
// Print out each item in the array
let printFish = fish.map(individualFish => {
console.log(individualFish);
});
printFish;
piranha
barracuda
cod
eel
Также map() можно использовать для изменения значения каждого элемента в массиве. Попробуйте добавить s в конец каждого элемента массива fish.
let pluralFish = fish.map(individualFish => {
return `${individualFish}s`;
});
pluralFish;
[ 'piranhas', 'barracudas', 'cods', 'eels' ]
Исходный массив в переменной fish не изменился, а измененная версия исходного массива хранится в переменной pluralFish.
Метод filter()
Метод filter() создает новый массив из элементов, которые прошли заданный отбор.
Для примера можно использовать filter (), чтобы вернуть новый массив, содержащий только элементы, которые начинаются с определенной буквы. Используйте индексацию строк для вызова первого элемента из каждого строкового элемента массива (то есть первой буквы).
let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];
// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter(creature => {
return creature[0] === "s";
});
filteredList;
[ 'shark', 'squid', 'starfish' ]
Этот метод отобрал элементы, в которых индексу 0 соответствует символ s, а затем присвоил результат новой переменной.
Метод filter() не меняет исходный массив.
Метод reduce()
Метод reduce() сокращает массив до одного значения.
Обычно он используется в массивах чисел, к примеру, чтобы найти сумму всех чисел в массиве.
let numbers = [ 42, 23, 16, 15, 4, 8 ];
// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
return a + b;
});
sum;
108
Этот метод также может работать со строками и другими типами данных. Результат reduce() может быть числом, строкой, массивом или другим типом данных. Метод reduce() не меняет исходный массив.
Метод find()
Метод find() возвращает первое значение массива, которое отвечает всем заданным условиям.
Например, можно создать такой массив:
let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];
Теперь с помощью этого метода попробуйте найти в массиве морских существ головоногого моллюска.
// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
return [ "cuttlefish", "octopus" ].includes(cephalopod);
}
seaCreatures.find(isCephalopod);
octopus
Поскольку octopus – первое значение в массиве, которое отвечает функции isCephalopod, метод вернет его.
Метод find() очень полезен при работе с объемными массивами.
Метод findIndex()
Метод findIndex() возвращает первый индекс в массиве, который отвечает всем заданным условиям.
К примеру, можно снова использовать этот массив seaCreatures:
let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];
Функция isCephalopod поможет найти индекс первого элемента, который отвечает этому условию.
// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
return [ "cuttlefish", "octopus" ].includes(cephalopod);
}
seaCreatures.findIndex(isCephalopod);
1
Элемент octopus является первым отвечающим этой функции элементом. Его индекс – 1.
Если запрашиваемого элемента не существует в массиве, метод вернет индекс -1.
const isThereAnEel = eel => {
return [ "eel" ].includes(eel);
}
seaCreatures.findIndex
-1
Метод findIndex() особенно полезен при работе с объемными массивами.
Заключение
В этом мануале мы рассмотрели основные встроенные методы итерации массивов в JavaScript. Методы итерации работают с каждым элементом в массиве. Теперь вы умеете перебирать массивы, изменять значение каждого элемента в массиве, фильтровать и сокращать массивы, а также находить значения и индексы.
Tags: Javascript