Перебор массивов и объектов в 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) объекта.