Возьмем объект с операторами, с которыми будем работать.
const operators = [
{name: "Дмитрий", age: 28, budget: 100000},
{name: "Александр", age: 25, budget: 150000},
{name: "Максим", age: 26, budget: 110000}
];
For…of
Служит: для перебора массива
const carArr = ["BMW", "Lada", "Porshe"]
for (let car of carArr) {
console.log(car);
}
For…in
Служит: для перебора свойств объекта.
for (let operator of operators) {
console.log(operator);
}
ForEach
Служит: для перебора массивов/элементов.
Примечание: принимает три параметра,
два последних параметра редко используются*.
Минус: не создает новый массив в своей работе.
/* Пример 1: Вывести инфо. о операторе */
operators.forEach( (operator, index, personArr) => {
console.log(operator) // вывод каждого оператора
console.log(index) // индекс, начинает с 0
console.log(personArr) // сам массив
})
/* Пример 2: Повесить всем кнопка с классом "btn" событие */
let btn = document.querySelectorAll(".btn");
btn.forEach( (item) => {
console.log(item) // получим каждую кнопку
item.addEventListener("click", () => {
console.log("Вы нажали на кнопку");
})
})
К содержанию ↑
Map
Служит: для получения любых данных, чтобы ими работать.
Примечание: преобразование текущего массива в новый.
/* Пример: В новый массив добавить, только имена операторов */
const personName = operators.map( operator => {
return operator.name; // получим все имена operator
});
Filter
Служит: для фильтрации по какому-либо условию массив.
Примечание: принимает три параметра, как и метод «forEach»,
преобразование текущего массива в новый.
/* Пример: В новый массив добавить операторов, кто старше 18 */
const adults = operators.filter( person => operator.age >= 18);
console.log(adults);
Reduce
Служит: для фильтрации по какому-либо условию массив.
Примечание: принимает три параметра, как и метод «forEach»
преобразование текущего массива в новый.
/* Пример: В новый массив добавить операторов, кто старше 18 */
const adults = operators.filter( person => operator.age >= 18);
console.log(adults);
Find
Служит: для поиска определенных элементов.
/* Пример: найти оператора Александра */
const alex = operators.find( operator => operator.name === "Александр")
console.log(alex);
FindIndex
Служит: аналогично работает, как «find», но дает его index.
/* Пример: найти index оператора Александра */
const alex = operators.findIndex( operator => operator.name === "Александр")
console.log(alex);
Every / Some
Every
Служит: для поиска в массиве цифры(number), дает true/false.
Some
Служит: для поиска в массиве хоть один элемент, который содержит цифру(number), дает true/false.
/* Пример: найти в массиве цифры */
const array = [10, "gold", "silver"];
console.log(array.every(item => typeof(item) === "number"));
console.log(array.some(item => typeof(item) === "number"));
Как можно одновременно использовать несколько методов
/* Пример: найдем оператора, у которого бюджет больше 110 000, после чего запишем имя(лет) и бюджет */
const newOperator = operators
.filter( operator => operator.budget > 110000)
.map( operator => {
return {
info: `${operator.name} (${operator.age})`,
budget: operator.budget
}
});
console.log(newOperator);