Перебор массивов и объектов в JS
Перебирать массивы и объекты можно несколькими способами. Тут я приведу самые оптимальные из них.
Перебор массивов
Метод forEach
К достоинствам forEach
относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова ( колбек функцию ) в качестве аргументов.
Пример использования:
const myArray = ['a', 'b', 'c']; myArray.forEach(function(el) { console.log(el); });
При этом метод forEach
не изменяет перебираемый массив.
Но что делать если нам нужно создать новый массив перебрав уже имеющийся?
В этом нам поможет следующий похожий метод.
Метод map
Если рассмотренный выше метод forEach
ничего на возвращает (а точнее возвращает undefined
), то метод map
перебрав исходный массив вернет новый массив.
Например:
const myArray = [1, 2, 3]; console.log(myArray);//[1,2,3] const newArray = myArray.map(el => el * 3); console.log(myArray);//[1,2,3] console.log(newArray);//[3,6,9]
Как мы видим из примера был создан новый массив, а перебираемый массив не изменился.
Аналогичный пример на основе функционального выражения (а не стрелочной функции, как показано выше):
const myArray = [1, 2, 3]; console.log(myArray);//[1,2,3] const newArray = myArray.map(function(el){ return el * 3; }); console.log(myArray);//[1,2,3] console.log(newArray);//[3,6,9]
Перебор объектов
Использование Object.keys
и метода forEach
При переборе объекта сначала получим все ключи в виде массива ( Object.keys( Наш объект )
), а потом переберем их с помощью метода forEach
:
const myObject = { x: 10, y: true, z: 'abc' } Object.keys(myObject).forEach(key => { console.log( key, myObject[key] ); });
В результате мы получим ключи (key
) и значения (myObject[key]
) объекта.
Если нам не нужны ключи, то следующим способом можно получить сразу значения объекта.
Использование Object.values
и метода forEach
const myObject = { x: 10, y: true, z: 'abc' } Object.values(myObject).forEach(key => { console.log( key ); });
Здесь мы получим значения (key
) объекта.