Если вы веб-разработчик, одним из наиболее часто используемых языков программирования для вас, безусловно, будет 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 стали для вас понятными. 😊