3 ключа JS для младших разработчиков

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

TLDR: .forEach() работает с данными, .map() манипулирует данными, .filter() сохраняет значение true

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

Если вы младший разработчик, я бы предположил, что вы изучили циклы с синтаксисом, похожим на:

Если это правда. Все, что делает .forEach(), — это упрощает этот синтаксис. Он не изменяет текущий массив, не возвращает новый массив и вообще ничего особенного. он просто позволяет вам что-то делать с этим массивом. Очень простой пример, когда мы хотим подсчитать значения в массиве, превышающие число 2, записанное в этом формате, может выглядеть так:

Точно такую ​​же задачу можно написать с помощью цикла .forEach(), например:

ОБА этих примера заканчиваются нашей «переменной over2, равной 3.

.карта()

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

Если вы хотите взять массив чисел и удвоить каждое значение в нем, вы можете сделать это с помощью цикла .forEach(), аналогичного приведенному выше примеру, с чем-то вроде:

В приведенном выше примере наша 'удвоенная' переменная будет массивом со значениями [2,4,6,8,10] в строке 7. При этом это следует сделать с помощью файла . функция карта(). Поскольку .map() ВОЗВРАЩАЕТ значения для каждой итерации, синтаксис упрощается, и нам не нужно заранее инициализировать «удвоенную» переменную. Мы можем просто написать:

Оба приведенных выше примера заканчиваются одним и тем же «удвоенным» значением. Это особенно полезно при работе с внешним интерфейсом с такими библиотеками, как React, где мы можем брать массивы данных и использовать .map() для возврата блоков HTML в ваши компоненты.

.фильтр()

Функцию .filter() можно использовать аналогично функции .map(). Это связано с тем, что функция .filter() также возвращает новый массив после завершения цикла.

.filter() работает на основе условия, которое возвращается в его функции обратного вызова. Это означает, что функция внутри .filter() должна возвращать логическое значение. Это можно сделать несколькими способами, но я продемонстрирую идею, аналогичную циклу .forEach() выше: есть массив чисел, и мы хотим отфильтровать все числа, которые больше 2. Используя фильтр, это может выглядеть так:

Функция обратного вызова, передаваемая в .filter(), возвращает сравнение: «num › 2». Это всегда будет возвращать логическое значение. Что делает фильтр, так это сохраняет исходное значение, в данном случае наше «число», если условие истинно. Если условие ложно, исходное значение будет удалено из исходного массива.

В приведенном выше примере наша константа «over2» будет равна [3, 4, 5].

Если вы только начинаете изучать JavaScript, я надеюсь, что это было полезно для понимания некоторых общих методов, которые увидят все разработчики JS.