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

итерация означает повторное выполнение набора операторов или блоков кода, что позволяет нам выполнять одну и ту же операцию несколько раз.

Проще говоря, обратный вызов — это определение функции, передаваемое в качестве аргумента другой функции.

Для простоты мы сосредоточимся на этих трех пунктах.

1. Когда следует использовать определенный метод массива.
2. Что возвращает метод массива.
3. пример кода метода массива. **

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

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

Каждый из этих методов массива представляет собой функцию, которая получает обратный вызов в качестве аргумента. Именно в этом обратном вызове мы указываем условия, которые мы хотим выполнить для каждого элемента нашего массива.

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

`const data = [
{
"userId": 1,
"username": "Фрэнсис",
"message": "Привет, как дела?",
"timestamp": "2024-02-18T12:30:00Z",
"статус": "в сети",
"messageSent": 28,
"роль": "пользователь",
"passCode": "293087O7764"

},
{
"идентификатор пользователя": 2,
"username": "Моисей",
"message": "Неплохо, просто работаю над проектом.",
"timestamp": "2024-02-18T12:35:00Z",
"статус": "отошел",
"messageSent": 74,
"роль": "пользователь",
"passCode": "675147O2234"
},
{
"userId": 3,
"имя пользователя": "Вики",
"message": "Привет, ребята! Какие последние сплетни?",
"timestamp": "2024-02-18T12:40:00Z",
"статус": "в сети",
"messageSent": 271,
"роль": "модератор",
"passCode": "76352O8069"

},
{
"userId": 4,
"username": "Младший",
"message": "Ничего особенного, просто пугаю. А ты?",
"timestamp": "2024-02-18T12:45:00Z",
"статус": "оффлайн",
"messageSent": 125,
"роль": "администратор",
"passCode": "21876O3483"
}
]`

forEach: forEach используется, когда мы хотим выполнить условие для всех элементов нашего массива. forEach возвращает неопределенное значение.

функция getMessageSent(users){
пусть sumMessageSent = 0;
пользователи.forEach(функция(пользователь){
sumMessageSent = user.messageSent;
})
вернуть sumMessageSent;
}
getMessageSent(data) // вывод: 498

reduce: сокращение используется для уменьшения массива до одного значения, например, этот массив [8, 7, 3] можно уменьшить до числа 18. редуктор возвращает одно значение.

Функция редуктора принимает два параметра: сначала редуктор (который состоит из суммы и текущего значения), а затем начальное значение

Общая сумма: в народе ее называют аккумулятором. сумма, как я ее называю, является последним вычисленным значением функции редуктора.

Текущий относится к одному элементу массива. в нашем случае у нас есть четыре элемента (текущие).

InitialValue — это значение, которое мы присваиваем итогу при первом вызове. просто скажем, что initalValue — это значение по умолчанию для суммы

const getMessageSent = (пользователи) => {
returnusers.reduce((total, current) => total = current.messageSent, 0)
}

getMessageSent(data) // вывод: 498

filter: Array.filter используется, когда мы хотим собрать в массиве только те элементы, которые соответствуют определенному условию. array.filter возвращает массив.

const onlineUsers = (пользователи) => {
returnusers.filter(user => user.status === "онлайн")
}

onlineUsers(data) // вывод: [объект объекта]

find Array.find используется, когда мы хотим получить только первый элемент массива, который соответствует условию, определенному внутри обратного вызова. array.find возвращает первый элемент НЕ в массиве, а в формате элемента, в нашем случае это будет объект или неопределенное значение, если совпадение не найдено.

const getUserRole = (пользователи) => {
returnusers.find(user => user.role === "пользователь")
}

getUserRole(data) // вывод: {userId: 1, имя пользователя: «Фрэнсис», сообщение: «Привет, как дела?», метка времени: «2024-02-18T12:30:00Z», статус: ' В сети', …}

Обратите внимание, что был возвращен только первый пользователь, соответствующий условию.

map Array.map используется, когда мы хотим преобразовать элементы массива. array.map возвращает массив преобразованных элементов, которые удовлетворяют условию нашего обратного вызова.

const getUserNameAndPass = (пользователи) => {
returnusers.map((user) => {
const userPassCode = user.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
user.passCode.length,
"★"
)};
});
};

getUserNameAndPass(data)// вывод:['Фрэнсис ★★★★★★★7764', 'Моисей ★★★★★★★2234', 'Вики ★★★★★★8069', 'Джуниор ★ ★★★★★3483']

every array.every используется, когда мы хотим проверить, соответствуют ли все элементы массива нашему определенному условию. array.every возвращает логическое значение. true, если все элементы соответствуют условию, и false, если какой-либо из элементов не соответствует условию.

const isOnline = data.every(user => dataItem.status === 'онлайн')

console.log(isOnline) // вывод: false

Some array.some используется, когда мы хотим проверить, что некоторые элементы массива соответствуют заданному условию. array.some возвращает логическое значение. true, если некоторые элементы прошли условие, и false, если все элементы прошли или не прошли.

const isOnline = data.every(user => dataItem.status === 'онлайн')

console.log(isOnline) // вывод: true

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