Методы перебора массива

map()

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

const answers = ['ivaN','annA', 'Hello']; // допустим нам пришел массив с тем что вводили пользватели.
const result = answers.map(item =>{
return item.toLowerCase(); // берем каждый элемент и приводим его в нижний регистр.
}); 

// Мы получили два разных массива.
answers[0] = 'hi'
console.log(result); // [ 'ivan', 'anna', 'hello' ]
console.log(answers); // [ 'hi', 'annA', 'Hello' ]

filter()

С помощью filter мы можем профильтровать наш массив и получить например все имена в которых меньше 5 символов. Или например получить товары которые будут стоить меньше 1000 рублей. Метод filter будет возвращать нам новый отфильтрованный массив.

const names = ['Ivan','Dima','Shrek','pisapopa']; // Создадим массив.

const shortNames = names.filter(name => { // Передаем внутрь колбек где name Будет каждый наш элемент массива.
    return name.length < 5; // возврщаем все имена которые меньше 5 символов.  
});

// Мы получили новый отфильтрованный массив.
console.log(shortNames); // [ 'Ivan', 'Dima' ]

Мы передали колбек функцию, внутри нее написали проверку name.length < 5, все элементы которые прошли эту проверку мы получили в новом массиве.

every() / some()

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

some

some перебирает массив и если там есть, то что мы ищем, то выдает нам true:

const some = [4,'dsf', 'sss'];

if (some.some(item => typeof (item) === 'number')) { // внутри колбек с typeof и мы проверяем равен ли тип number.
    console.log('В этом массиве есть число!'); // если есть число!
} else {
    console.log('В этом массиве нет чисел!'); // если нет числа.
}

Пример с четными и нечетными числами:

const array = [1, 2, 3, 4, 5]; // есть массив разных чисел.
const array2 = [1, 11, 3, 5, 7]; // здесь числа только нечетные.
const even = (element) => element % 2 === 0; // создаем функцию для четных чисел.

console.log(array.some(even)); // true - потому что там есть хотя бы одно четное число.
console.log(array2.some(even)); // false - Так как в этом массиве нет четных чисел.

every

evey перебирает массив и если все наши элементы подходят под условие, то нам вернет true. Все примеры выше подходят, только в этом случае, нужно что бы все элементы подходили по условию.

const some = ['1','dsa','qwer'];

if (some.every(item => typeof (item) === 'number')) { // внутри колбек с typeof и мы проверяем равен ли тип number.
    console.log('Этот массив полностью из чисел'); // если есть числа!
} else {
    console.log('Этот массив полностью из строк'); // если нет чисел.
}

Пример с четными и нечетными числами:

const array = [4, 2, 6, 8, 112]; // только четные
const array2 = [4, 2, 4, 8, 7]; // здесь все четные кроме одной цифры
const even = (element) => element % 2 === 0; // функция для четных

console.log(array.every(even)); // true - потому что там все числа четные
console.log(array2.every(even)); // false - Так как в этом массиве есть хотя бы одно нечетное

reduce()

reduce используется для вычесления какого-нибудь значения на основе всего массива. reduce принимает в себя колбек функцию и initialValue. Колбек функция применяется по очереди ко всем элементам массива и «переносит» свой результат на следующий вызов.
Колбек в reduce принимает в себя три аргумента.
Первый(accumulator) - это вся сумма.
Второй(currentValue) - это каждый элемент.
Третий(index)- Это индекс текущего обрабатываемого элемента.

const numb = [5,1,3,2,6,9,8,4]; // допустим нам нужно получить сумму всех этих элементов.
const res = numb.reduce((sum,current)=>{ // так же вернет нам новый результат который мы помещаем в res.
return sum + current; // при первом запуске sum автоматически равна всегда 0, в current будет 5 - наш первый элемент массива
// далее мы прибавляем по сути 0 + 5 и так далее. Потом в current 1 в sum 5 это прибавляется и в sum уже будет 6 и тд тд
},1);  // так же после колбек функции в reduce, мы можем указать аргумент 'initialValue' который принимает в себя начальное значение sum.

console.log(res); // должно быть 38, но после колбека мы поствали 1 в initialValue и оно пошло в sum, так что 39.

Так же reduce можно использовать со строками:

const strArr = ['я','л','о',"х"];
const resArr = strArr.reduce((sum,current)=> `${sum},${current}`); // так же можем слепить строки, тут мы добавили между ними запятые
console.log(resArr); // я,л,о,х

Разница между forEach, map, filter

forEach это функция которая перебирает элементы, а в filter это функция которая перебирает элементы и возваращет те которые подходят нам под условие. коротко разница в том, что forEach просто пускает цикл и выполняет наш колбек. А filter пускает цикл, выполняет колбек и проверяет возращаемое значение. Если оно верное, то оно будет положено в новый массив.
map по сути тот же forEach только он возвращает новый массив измененный, а forEach нет. forEach меняет исходный массив.
forEach выбрасывает return и поэтому мы получаем undefiend. Из за этого мы не можем привязать forEach куда то, а filter или map можем. Так как они возвращают новый массив. Например:

const answer2 = ['IVan','DimAN','Dimaadk','shrEk'].map(item => item.toLowerCase()).filter(item => item.length < 5);
console.log(answer2); 
// получаем ivan в маленьком регистре. так как map возвращает, то мы на этом можем юзать filter у forEach Был бы undefiend поэтому применить что то дальше не получилось бы
// тот новый массив который нам дает map мы по сути сразу помещаем в answer2, то же самое делает и filter
// так что не обязательно всегда делать новый массив и туда помещать

Практика

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

const obj = {
    ivan: 'persone',
    anna: 'persone',
    dog: 'animal',
    cat: 'animal'
};

const newArr = Object.entries(obj) // с помощью этого метода получаем матрицу, массив в массиве, получаем ключ и значение[[ключ][значение]]
    // так  же есть object.keys() и object.values()  в первом случае мы получим ключи во втором значения в виже массива
    .filter(item => item[1] == 'persone') // так как мы знаем что значения у нас под индексом 1, мы проверяем значение на persone
    .map(item => item[0]); // далее возврщаем только 0 элементы( первыве) и так мы получаем наш массив с именами

const newObj = Object.assign({}, newArr);

console.log(newObj); // { '0': 'ivan', '1': 'anna' } 
// отделили людей от животных так сказать!

Обновлено 25.03.2023