Главная » JavaScript

Методы JS массивов: forEach, find, findIndex, filter, map, reduce

Методы JS массивов: forEach, find, findIndex, filter, map JavaScript
На чтение 5 мин Просмотров 11.5к. Опубликовано

В этом уроке разберем популярные методы для работы с JS массивами. Как они работают, для чего используются, какой когда применять и как делать это правильно. Данные методы пригодятся вам для обработки данных при разработке React JS приложений и не только. Поехали!)

Содержание
  1. Видео
  2. Файлы к уроку
  3. Метод forEach
  4. Метод find
  5. Метод findIndex
  6. Метод filter
  7. Метод map
  8. Метод reduce

Видео

Файлы к уроку

Скачать файлы к уроку

Для урока я буду использовать массив с товарами, на примере которого будут применены данные методы. Ниже привожу его код и структуру.

const products = [
	{
		id: 1,
		img: 'macbook.jpg',
		title: 'MacBook',
		price: 100,
	},
	{
		id: 2,
		img: 'apple-watch.jpg',
		title: 'Apple watch',
		price: 40,
	},
	{
		id: 3,
		img: 'mac-pro.jpg',
		title: 'Mac Pro',
		price: 190,
	},
	{
		id: 4,
		img: 'ipad.jpg',
		title: 'iPad',
		price: 60,
	},
	{
		id: 5,
		img: 'iphone.jpg',
		title: 'iPhone',
		price: 40,
	},
];

Метод forEach

Метод forEach делает обход по массиву. Используется чтобы пройтись по всем элементам массива и сделать с ними нужные действия.

Синтаксис метода:

arr.forEach(function(item, index, array) {
  // ... код для действий с item
});

Например мы можем пройтись по массиву с товарами и вывести каждый товар в консоль:

products.forEach(function(item) {
	console.log(products);
});

А можем увеличить стоимость каждого товара в массиве на 100 и вывести в консоль название и уже обновленную стоимость товара:

products.forEach(function(product) {
	item.price += 100;
	console.log(product.title);
  	console.log(product.price);
});

Как видно из примера выше, имя параметра можно изменять на свое исходя из контекста. Если обходим массив с товарами то вместо item, первый параметр можно назвать products, если это будет список пользователей users, то первый параметр можно назвать user.

Метод find

Находит и возвращает первый подходящий элемент массива. В процессе работает с текущим массивом.

Синтаксис:

let result = arr.find(function(item, index, array) {
  // если ф-я возвращает true - возвращается текущий элемент и перебор прерывается
  // если все итерации оказались ложными, возвращается undefined
});

Решим практическую задачу. Найдем в массиве с товарами товар который имеет название «Mac Pro»

const macPro = products.find((item) => {
    if (item.title === "Mac Pro") {
        return true;
    }
})
console.log(macPro); // Будет выведен объект с товаром
console.log(`Товар с названием 'Mac Pro' стоит ${macPro.price} руб. `);

Метод findIndex

Находит и возвращает индекс первый подходящего элемент массива. Синтаксис такой же как и у метода find.

Используем метод findIndex чтобы найти индекс товара с ценой равной 40. В нашем массиве таких товаров два. Будет найден первый подходящий, в нашем случае это будет товар ‘Apple watch’.

const cost40 = products.findIndex((item) => {
	if (item.price === 40) {
		return true;
	}
});
console.log(cost40); // 'Apple watch'
console.log(`Индекс товара с ценой 40`, cost40);

Метод filter

Фильтрует текущий массив, через функцию callback. Возвращает новый отфильтрованный массив.

Синтаксис:

let results = arr.filter(function(item, index, array) {
  // если true - элемент добавляется к результату, и перебор продолжается
  // возвращается пустой массив в случае, если ничего не найдено
});

Найдем все товары с ценой больше 50:

const moreThen50 = products.filter(function (item) {
	if (item.price > 50 ) {
		return true;
	}
});
console.log(moreThen50); // массив из трех товаров 'MacBook', 'Mac Pro', 'iPad'

Метод map

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

Синтаксис:

let result = arr.map(function(item, index, array) {
  const newItem = {...item}
  return newItem;
  // возвращается новое значение вместо текущего элемента
});

Практический пример. Создадим новый массив с товарами, но у каждого товара цена будет больше на 50% от текущей.

const productsNewPrice = products.map(function (item) {
	const newItem = {
		id: item.id,
		img: item.img,
		title: item.title,
		price: item.price * 1.5,
	};
	return newItem;
});
console.log('Новый массив, товары с ценами +50%');
console.log(productsNewPrice);

Еще пример. Допустим мы хотим вывести все товары на страницу, используя определенную html разметку. Такой подход часто встречается в React JS когда необходимо вывести данные на страницу.

const productsHTML = products.map((item, index) => {
    let htmlProduct =
            `<section>
                <h3>${item.title}</h3>
                <p><strong>${item.price}</strong></p>
                <img width="200" src="./img/products/${item.img}" alt="${item.title}" />
            </section>`;

    if (index !== products.length - 1) htmlProduct += '<hr>'

    return htmlProduct
});

document.body.insertAdjacentHTML('beforeend', productsHTML.join(''))

Обходим все товары, для каждого возвращаем кусок HTML разметки с подстановкой данных. По итогу имеем массив с разметкой. Для вывода на страницу используем insertAdjacentHTML. Чтобы избавиться от запятых , в виде разделителей элементов массива, используем join('').

Метод reduce

Метод reduce используется для вычисления единого значения на основе всего массива. Например чтобы посчитать общую сумму на основе всех элементов массива.

Синтаксис:

let value = arr.reduce(function(previousValue, item, index, array) {
  // код который будет выполнять действия и возвращать текущий результат для каждой итерации
}, [initial]);

initial указано в квадратных скобках, так как это необязательный параметр.

Пример. Посчитаем общую стоимость всех товаров в массиве products.

const totalCost = products.reduce((prev, item) => {
    return prev + item.price
}, 0)

console.log(`Общая стоимость товаров: ${totalCost}`); // 430

Первым аргументом передаем callback функцию которая будет производить вычисления, вторым аргументом стартовое значение. Так как считаем сумму с ноля, то стартовым значением передаем 0.

В функции callback определяем аргументы.

prev — значение из предыдущей итерации. При первой итерации это будет initial значение, в нашем случае переданный нами 0.

item — значение текущего элемента массива, в текущей итерации.

Внутри функции callback выполняем вычисления, складывая предыдущее значение вычисления со стоимостью товара в текущей итерации.

Листинг вычислений можно описать следующим образом:

return 0 + 100 	// 100
return 100 + 40 // 140
return 140 + 190 	// 330
return 330 + 60 	// 390
return 390 + 40 	// 430
// Результат 430

Это был первый материал по методам массивов JS. Надеюсь он был интересен и полезен. Увидимся в следующих уроках!)

© 2024 ВебКадеми