Известно, что Javascript является одним из самых популярных языков программирования в мире и одной из основных технологий, лежащих в основе всего, что работает в Интернете. Для фронтенд-разработчика важно, чтобы вы ознакомились с некоторыми базовыми концепциями JavaScript, и желательно изучить основную часть, прежде чем переходить к любым фреймворкам или библиотекам, таким как React, Vue или Angular.
В этой статье я хочу сделать краткий обзор этих 4 полезных методов в Javascript: forEach, map, filter и reduce. Все они полезны, но у каждого из них есть свой лучший сценарий использования. После прочтения этой статьи вы сможете сделать вывод, какие, где и какие из них вы будете использовать.
У нас есть массив для взаимодействия с каждым из методов.
const array = [12, 10, 6, 8]
Для каждого
Что делает forEach, так это перебирает заданный массив и выполняет любое действие, которое вы запросили, индивидуально для каждого элемента массива.
const newArray = array.forEach(num => { num + 2 });
Что я сделал в приведенном выше фрагменте, так это сначала присвоил имя каждому из элементов массива, которое я использую num
. Затем я добавил два к каждому из пунктов. Следует также отметить, что метод forEach не создает новый массив, поэтому, если методу не назначено выполнение какой-либо операции, он вернет undefined
.
const array = [12, 10, 6, 8] const double = [] const newArray = array.forEach((num) => { double.push(num + 2) }); console.log(double)
карта
Метод map создает новый набор массивов при использовании и возвращает этот вновь созданный массив, не оказывая никакого влияния на основной массив. Он также может быть связан с другими методами массива, такими как сортировка, уменьшение и другие.
const array = [12, 10, 6, 8] const newArray = array.map((num) => { return num + 2 }); console.log(newArray) // can also be written this way const array = [12, 10, 6, 8] const newArray = array.map(num => num + 2); console.log(newArray)
Фильтр
Метод фильтрации работает как сито. Вы используете метод, чтобы отсеять части массива, которые вам не нужны, и вернуть только ту часть, которая необходима или полезна для операции. Это не влияет на основной массив, поскольку также возвращает новый массив.
const array = [12, 10, 6, 8] const newArray = array.filter((num) => { return num > 8 }); console.log(newArray) // can also be written this way const array = [12, 10, 6, 8] const newArray = array.filter(num => num > 8); console.log(newArray)
Уменьшать
Вы можете использовать как map()
, так и filter()
с методом сокращения. Он очень мощный и интересный в использовании. Он поставляется с accumulator
, в котором хранится вся информация о том, что происходит в теле функции. Это только одно единственное значение, и вы также можете определить, каким будет начальное значение аккумулятора, в приведенном ниже примере мы назначим 0
в качестве начального значения аккумулятора.
const array = [12, 10, 6, 8] const newArray = array.reduce((acc, num) => { return acc + num }, 0); console.log(newArray) //36
Подробнее о методе сокращения читайте здесь.
В этой статье не обсуждались различия между четырьмя методами, а только их применение.
Я надеюсь, что вы найдете объяснение полезным.
Первоначально опубликовано на https://leom.hashnode.dev.