Известно, что 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.