Реакция на встроенные методы итераторов

При работе с массивами в Javascript и React бывают случаи, когда необходимо выполнить итерацию по массивам. Для этого можно написать цикл, и это совершенно нормально. Однако существуют методы итератора, уже встроенные в объект массива, которые могут достичь того же результата. Использование этих встроенных итераторов сделает ваш код более читабельным и чистым. Мы рассмотрим некоторые из наиболее часто используемых методов и приведем пример кода для каждого из них.

Итераторы массивов forEach, map, filter, some, find и findIndex принимают в качестве параметра функцию обратного вызова, а функция обратного вызова принимает три параметра. Первый параметр — это значение элемента, второй — индекс элемента, а третий — сам массив.

За время обучения на втором этапе Flatiron School я обнаружил, что эти методы очень полезны при работе с базами данных бэкенд API. Чтобы вывести эту информацию на нашу страницу и манипулировать ею в DOM, нам нужно довольно часто использовать эти различные методы. Мы рассмотрим некоторые методы итератора, которые улучшат ваши возможности по манипулированию данными в React. С учетом сказанного, давайте погрузимся в код.

Для краткости мы будем использовать массив имен под названием «names» в некоторых примерах кода.

let names = [«Barrett»,
«Джейкоб»,
«Мэтью»,
«Гилберт»,
«Саймон»,
«Ник»,
«Эрик»,
«Джон»
];

Метод .forEach()

Этот итератор выполняет функцию обратного вызова для каждого элемента массива. Он не возвращает никакого значения. Используйте его, когда вы хотите выполнить задачу, не ожидая возврата значения. Например, если у вас есть массив имен и вы хотите вывести приветствие для каждого имени, вы можете использовать метод forEach. Код будет выглядеть следующим образом.

names.forEach((value) => {
    console.log("Hello " + value);
});
-------OUTPUT-------
Hello Barrett
Hello Jacob
Hello Matthew
Hello Gilbert
Hello Simon
Hello Nick
Hello Erick
Hello John
Вход в полноэкранный режим Выйти из полноэкранного режима

Метод .map()

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

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

//mapping names
let mappedArray = names.map((value) => ({
      <NamesCard value={value}/> 
})
Вход в полноэкранный режим Выход из полноэкранного режима

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

Метод .filter()

Этот итератор массива также возвращает новый массив элементов, прошедших условную проверку. Например, если мы хотим найти все имена, содержащие «ae», мы можем использовать метод filter. Новый массив должен содержать два элемента, Barrett и Matthew. Код будет выглядеть следующим образом.

//filtering names
let aeMatchingElements = names.filter((value) => {
    return value.includes("ae");
});
//printing names
aeMatchingElements.forEach((value) => {
    console.log(value);
});
-------OUTPUT-------
Barrett
Matthew
Вход в полноэкранный режим Выйти из полноэкранного режима

Метод .some()

Этот итератор массива проверяет, удовлетворяют ли некоторые элементы массива заданному условию. Он возвращает false, если ни один из элементов не прошел проверку, и true, если хотя бы один прошел проверку. Теперь мы хотим проверить, являются ли некоторые из людей, живущих в этом сообществе, взрослыми. Мы можем использовать метод «some». Ваш код будет выглядеть примерно так.

let ages = [16, 17, 20, 24, 29];
let someAdults = ages.some((value) => {
    return value >= 18;
});
console.log(someAdults);
-------OUTPUT-------
true
Вход в полноэкранный режим Выход из полноэкранного режима

Метод .find()

Этот итератор массива возвращает первый элемент, удовлетворяющий условию. В противном случае возвращается значение undefined. Например, используя массив «ages», который мы использовали для метода «some», мы можем найти первого не взрослого человека с помощью метода find. Код будет выглядеть следующим образом.

let ages = [16, 17, 20, 24, 29];
let nonAdult = ages.find((value) => {
    return value < 18;
});
console.log(nonAdult);
-------OUTPUT-------
16
17
Вход в полноэкранный режим Выход из полноэкранного режима

Метод .findIndex()

Этот итератор массива возвращает индекс первого элемента, удовлетворяющего условию. В противном случае возвращается -1, чтобы показать, что элемент не найден. Например, используя массив «ages», мы можем найти позицию первого вхождения значения 17. Код будет выглядеть следующим образом.

let ages = [16, 17, 20, 24, 29];
let firstOccurrence = ages.findIndex((value) => {
    return value == 17;
});
console.log(firstOccurrence);
-------OUTPUT-------
1
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Метод .indexOf()

Этот итератор массива делает то же самое, что и метод findIndex. Единственное отличие заключается в том, что он не принимает в качестве параметра функцию обратного вызова. Он принимает два параметра. Например, используя массив «ages», если вы хотите начать искать значение 17, начиная с третьей позиции, вы используете метод indexOf. Код будет выглядеть следующим образом.

let ages = [16, 17, 20, 24, 29];
occurrence = ages.indexOf(17, 3);
console.log(occurrence);
-------OUTPUT-------
-1
Вход в полноэкранный режим Выход из полноэкранного режима

Возвращается значение -1, поскольку мы указали начальную позицию поиска. Начиная с третьей позиции, он читает слева направо, и из третьей позиции мы видим, что значение 89 не прочитано. Поэтому на выходе будет -1. Если бы мы начали с нулевой позиции, то было бы возвращено значение 1.

Метод .reduce()

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

Например, используя массив «ages», если вы хотите просуммировать все элементы, вы можете использовать метод reduce. Код будет выглядеть следующим образом.

let ages = [16, 17, 20, 24, 29];
let sum = ages.reduce((sum, value) => {
    return sum += value;
});
console.log(sum);
-------OUTPUT-------
106
Вход в полноэкранный режим Выход из полноэкранного режима

Заключение

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

Оцените статью
devanswers.ru
Добавить комментарий