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