Если вы веб-разработчик, одним из наиболее часто используемых языков программирования для вас, безусловно, будет JavaScript.

И еще одна вещь, которую вы, безусловно, будете использовать довольно часто, - это методы массива.

Позвольте мне объяснить самые популярные из них и как их использовать.

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

clients:[
{firstname:"John", lastname:"Smith", age:"43"}, 
{firstname:"Mary", lastname:"Anderson", age:"17"},
]

👉 для каждого ()

Метод forEach используется для перебора массива и получения каждого его элемента по одному (всего, что находится между каждой запятой). В нашем примере мы будем получать каждый объект отдельно.

Где мы можем его использовать?

Например, если мы хотим отобразить список клиентов с их данными или список товаров в нашем магазине.

Как это использовать?

clients.forEach((client) => {
console.log(client);
});

Он создает список клиентов.

👉 карта ()

Метод map по сравнению с forEach не будет трогать существующий массив, а создаст новый.

Где мы можем его использовать?

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

Как это использовать?

const clientFullName = clients.map((client) => {
return { fullname: `${client.name} ${client.lastname}` };
});

Он создает новый массив, в котором объект будет {fullname: «John Smith}» и так далее.

👉 фильтр()

Эти методы используются для поиска определенных данных в массиве для создания нового массива с этими данными.

Где мы можем его использовать?

Например, если мы хотим отображать только клиентов с фамилией Смит или если это интернет-магазин — отображать только товары с ценой не выше 10$.

Другой полезный способ его использования — использовать его для ввода в поиск.

Как это использовать?

const filteredClients = clients.filter((item) => item.lastname === "Smith");
console.log(filteredClients);

В результате мы получим только клиента с фамилией Smith. В этом случае строка может быть заменена переменной для ввода поиска.

👉 найти()

Этот метод возвращает первый найденный в массиве элемент.

Где мы можем его использовать?

Например, если мы хотим узнать, не младше ли нашего клиента 18 лет.

Как это использовать?

function findAge(age){
return clients.find(client => client.age < 18);
}

В этом случае у нас будет вывод только первого клиента младше 18 лет, даже если они старше.

👉 уменьшить ()

Этот метод используется для вывода суммы чисел.

Где мы можем его использовать?

В нашем примере мы можем использовать для отображения среднего возраста наших клиентов или это может быть общая цена в нашем интернет-магазине.

Как мы можем это использовать?

const clientArrLength = clients.length;
let total = clients.reduce(function(acc, curr) {
return acc + parseInt(curr.age) / clientArrLength;
}, 0);

В этом случае мы должны умножить возраст и разделить его на длину массива, который может представлять количество клиентов.

🟩 Если вы не знаете, parseInt() используется для преобразования строки в число.
Без него результатом суммы возрастов было бы «4317».

Я надеюсь, вам понравилось читать эту статью и что эти методы JavaScript стали для вас понятными. 😊