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

Вступление

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

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

Чтобы получить максимальную отдачу от этого учебного пособия, вы должны быть знакомы с созданием, индексацией, изменением и циклическим просмотром массивов, которые вы можете просмотреть в учебном руководстве https://www.digitalocean.com/community/tutorials/understanding -rarays-in-javascript [Понимание массивов в JavaScript].

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

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

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

Функция * - это блок кода для повторного использования, который может быть выполнен. Традиционно функция может быть написана со следующим синтаксисом:

var example = function() {
 // code to execute
}

example();

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

var example = () => {
 // code to execute
}

example();

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

var example = parameter1 => {
 // code to execute
}

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

для каждого()

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

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

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

Мы можем использовать + forEach () + для вывода каждого элемента массива + fish + на консоль.

// Print out each item in the array
fish.forEach(individualFish => {
   console.log(individualFish);
})

Как только мы это сделаем, мы получим следующий вывод:

Outputpiranha
barracuda
cod
eel

Другой способ сделать это - использовать ключевое слово https://www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-javascript [+ for + loop] и проверить его по свойству 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;

Outputpiranha
barracuda
cod
eel

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

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
   return `${individualFish}s`;
});

pluralFish;

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

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

фильтр()

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

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

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;

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

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

+ filter () + - это метод итерации, который не изменяет исходный массив.

уменьшения ()

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

Обычно это видно по числам, например, по нахождению суммы всех чисел в массиве.

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;

Output108

+ lower () + также можно использовать с strings и другими https: //www.digitalocean. ru / community / tutorials / понимание-data-types-in-javascript [типы данных]. Значением, возвращаемым + redu () +, может быть число, строка, массив или другой тип данных. + redu () + - это метод итерации, который не изменяет исходный массив.

находить()

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

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

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

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

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
   return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Outputoctopus

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

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

findIndex ()

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

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

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);

Output1

+ octopus + - это первый элемент, который соответствует тесту и имеет индекс + 1 +, поэтому возвращается номер индекса.

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

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

seaCreatures.findIndex

Output-1

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

Заключение

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

Чтобы ознакомиться с основами массивов, прочитайте Understanding Arrays in JavaScript. Для получения дополнительной информации о синтаксисе в Javascript см. Наш учебник по адресу Understanding синтаксиса и структуры кода в JavaScript ».

TOC