Как использовать методы массивов в JavaScript: Методы итерации

Введение

В JavaScript тип данных array состоит из списка элементов. У JavaScript-разработчиков есть множество полезных встроенных методов для работы с массивами. Методы, изменяющие исходный массив, известны как методы мутации, а методы, возвращающие новое значение или представление, известны как методы доступа.

Существует третий класс методов массива, известный как методы итерации, которые работают с каждым элементом массива по отдельности. Эти методы тесно связаны с циклами. В этом учебнике мы будем сосредотачиваться на методах итерации.

Для получения максимальной пользы от этого учебника вам следует иметь некоторое представление о создании, индексации, модификации и переборе массивов, что вы можете изучить в учебнике Понимание массивов в JavaScript.

В этом руководстве мы будем использовать методы итерации для прохождения по массивам, выполнения функций для каждого элемента в массиве, фильтрации желаемых результатов массива, уменьшения элементов массива до одного значения и поиска значений или индексов в массивах.

Понимание стрелочных функций

Во многих примерах этого руководства будет использоваться JavaScript стрелочные функции, которые представлены знаком равенства, за которым следует знак “больше”: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // код для выполнения
}

example();

Последняя версия JavaScript на момент написания позволяет использовать стрелочные функции, которые могут быть записаны следующим синтаксисом:

var example = () => {
  // код для выполнения
}

example();

В обоих случаях скобки могут содержать параметры. Когда есть только один параметр, скобки могут быть опущены, как в следующем примере:

var example = parameter1 => {
  // код для выполнения
}

В течение примеров в этом учебнике мы будем использовать синтаксис стрелочных функций. Чтобы прочитать и понять больше о функциях в JavaScript, прочтите Справочник по функциям на сайте Mozilla Developer Network.

forEach()

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

Давайте начнем с следующего массива, назначенного переменной fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

Мы можем использовать forEach(), чтобы вывести каждый элемент массива fish в консоль.

// Вывести каждый элемент массива
fish.forEach(individualFish => {
	console.log(individualFish);
})

После этого мы получим следующий вывод:

Output
piranha
barracuda
cod
eel

Другой способ сделать это – использовать ключевое слово for loop и проверить его по свойству длины массива.

// Проход через длину массива
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

Вышеуказанный код будет иметь тот же вывод, что и при использовании метода forEach(). В качестве метода итерации, специально предназначенного для использования с массивами, forEach() более краткий и прямолинейный для этой конкретной задачи.

map()

Метод map() создает новый массив с результатами вызова функции для каждого элемента в массиве.

Для примера использования итерационного метода map() мы можем выводить каждую итерацию цикла в консоль. map() не изменяет исходный массив, а вместо этого возвращает новое значение массива.

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Выводим каждый элемент массива
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

Мы также можем использовать map() для изменения значений каждого элемента в массиве. Чтобы продемонстрировать это, мы добавим s в конец каждого элемента в массиве fish, чтобы сделать каждое слово во множественном числе.

// Преобразуем все элементы массива fish во множественное число
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

Исходная переменная fish остается неизменной, но теперь pluralFish содержит измененную версию исходной переменной.

filter()

Метод filter() создает новый массив с элементами, которые проходят тест.

Мы можем использовать filter(), чтобы вернуть новый массив, содержащий только элементы из списка, которые начинаются с определенной буквы. Для этого мы можем воспользоваться индексированием строк, чтобы вызвать первый элемент (или букву) в каждом строковом элементе массива.

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Фильтруем всех существ, которые начинаются на "s", в новый список
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

Мы проверили, какие элементы в массиве имеют s на 0 индексе, и присвоили результат новой переменной.

filter() является методом итерации и не изменяет исходный массив.

reduce()

Метод reduce() уменьшает массив до одного значения.

Это часто встречается с числами, например, при поиске суммы всех чисел в массиве.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Получить сумму всех числовых значений
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce() также можно использовать с строками и другими типами данных. Значение, возвращаемое reduce(), может быть числом, строкой, массивом или другим типом данных. reduce() является методом итерации, который не изменяет исходный массив.

find()

Метод find() возвращает первое значение в массиве, которое проходит заданное тестирование.

В качестве примера мы создадим массив морских существ.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Затем мы будем использовать метод find(), чтобы проверить, является ли какое-либо из существ в массиве головоногим.

// Проверяем, является ли заданное значение головоногим
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

Поскольку осьминог был первым элементом в массиве, который удовлетворил условию в функции isCephalopod(), он и будет возвращен первым значением.

Метод find() может помочь вам работать с массивами, содержащими множество значений.

findIndex()

Метод findIndex() возвращает первый индекс в массиве, который проходит заданное тестирование.

Мы можем использовать тот же пример с seaCreatures, что и для метода find().

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

С помощью тестирования isCephalopod мы найдем номер индекса вместо значения первого совпадения.

// Проверяем, является ли заданное значение головоногим
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

осьминог – первый элемент, соответствующий тестированию, и его индекс равен 1, поэтому возвращается номер индекса.

Если условие не выполняется, findIndex() вернет -1.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

Метод findIndex() особенно полезен при работе с массивами, содержащими много элементов.

Вывод

В этом учебнике мы рассмотрели основные встроенные методы итерации массивов в JavaScript. Методы итерации действуют на каждый элемент массива и часто выполняют новую функцию. Мы изучили, как перебирать массивы, изменять значение каждого элемента в массиве, фильтровать и уменьшать массивы, а также находить значения и индексы.

Для ознакомления с основами массивов прочитайте Понимание массивов в JavaScript. Для получения дополнительной информации о синтаксисе в JavaScript ознакомьтесь с нашим учебником по “Понимание синтаксиса и структуры кода в JavaScript”.