Методы перебора js - IZIART

Разработка сайтов
индивидуальный дизайн

Главная » JS » Методы перебора js

Методы перебора js

Обновлено: 05.10.2023
js

Возьмем объект с операторами, с которыми будем работать.

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);