В этом уроке разберем популярные методы для работы с JS массивами. Как они работают, для чего используются, какой когда применять и как делать это правильно. Данные методы пригодятся вам для обработки данных при разработке React JS приложений и не только. Поехали!)
Видео
Файлы к уроку
Для урока я буду использовать массив с товарами, на примере которого будут применены данные методы. Ниже привожу его код и структуру.
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. Надеюсь он был интересен и полезен. Увидимся в следующих уроках!)
