В Javascript есть довольно много способов перебрать массив элементов или любой другой итерируемый элемент в Javascript. Вы могли их видеть:

  • arr.forEach()
  • for(let item of arr)
  • for(let item in arr)
  • for(let item = 0; item < arr.length; ++item)

Может показаться, что существует множество способов добиться одной и той же цели, но все они имеют свои нюансы. Чтобы любой из них работал, рассматриваемый элемент также должен быть повторяемый. Поэтому, пока они будут работать с такими вещами, как карта, Установлени массивы, они не будут работать с объектами. Строки также являются итерируемыми.

Поскольку существует так много способов, может возникнуть путаница, когда использовать forEach, in или же of в Javascript. Сегодня давайте подробно разберемся, что делает каждый из них и когда их использовать.


Метод forEach

forEach это инструмент, к которому многие обращаются, потому что с лингвистической точки зрения он имеет смысл. arr.forEach звучит правильно, и он предоставляет простую функцию обратного вызова, чтобы делать все, что мы хотим сделать с каждый элемент в итерируемом массиве:

let x = [ 1, 2, 3, 4, 5 ];
x.forEach((item, index) => {
    x[index] += 1;
});
console.log(x); // [ 2, 3, 4, 5, 6 ];
Войти в полноэкранный режим

Выйти из полноэкранного режима

Однако, forEach является методом, что означает, что он появляется только для определенных типов данных в Javascript. Например, все Arrayу нас есть forEach метод и так далее Mapпесок Sets — но, несмотря на то, что он повторяемый, Stringс нет. Примечательно, Элементы DOM не имели forEach до недавнего времени.. Таким образом, пока он надежно доступен во многих различных обстоятельствах. Это также много медленнее обычного старого for петля.

Сверх того, forEach на самом деле не работает с асинхронными методами, такими как await или обещает либо. В обстоятельствах, когда вам нужно использовать обещания или awaitлучше избегать этого и использовать for вместо петель.

Пока forEach определенно простой способ перебора массива, он не всегда лучший.


Использование циклов for на итерируемых объектах

Есть три типа for циклы для запуска итерируемых объектов в Javascript:

  • for(let item of arr)
  • for(let item in arr)
  • for(let item = 0; item < arr.length; ++item)

Для новичков в языке синтаксис может показаться довольно запутанным. Когда Javascript только появился, первоначальный for Цикл, который все использовали, был последним из перечисленных выше:

let x = [ 1, 2, 3, 4, 5 ];
for(let i = 0; i < x.length; ++i) {
    console.log(x[i]); // 1.. 2.. 3.. 4.. 5
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это простой и прямой способ доступа к индексу массива. Здесь, i начинается в 0и увеличивается для каждого элемента в массиве x. Следовательно, i надежно представляет индекс для каждого элемента и, таким образом, запись x[i] позволит нам что-то делать с каждым элементом в массиве.

С тех пор появились два новых типа for была введена петля — in а также of.


in vs of в Javascript для циклов

Лучший способ понять in а также of в Javascript для циклов это то, что in представляет собой упрощение for цикл, который мы только что рассмотрели. Это более простой способ получить доступ к индекс в массиве.

Тем временем, of это простой способ представить сам элемент массива. Давайте посмотрим на быстрый пример. Здесь мы получаем индекс каждого элемента в нашем массиве, используя in:

let x = [ 5, 10, 15, 20, 25, 30 ];
for(let i in x) {
    console.log(i); // 0.. 1.. 2.. 3.. 4.. 5
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Между тем, если мы используем of он получает фактическое значение элемента массива:

let x = [ 5, 10, 15, 20, 25, 30 ];
for(let i of x) {
    console.log(i); // 5.. 10.. 15.. 20.. 25.. 30
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Так что пока in в основном упрощает for(let i = 0; i < x.length; ++i), of на самом деле дает нам новую функциональность для доступа к самому содержимому массива. Это может быть особенно полезно, если у нас есть объекты в наших массивах:

let x = [ { name: "John" }, { name: "Jacob" }, { name: "Jingleheimer" }, { name: "Schmidt" }]
for(let item of x) {
    console.log(item.name); // John.. Jacob.. Jingleheimer.. Schmidt
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Следует также отметить, что для других итераций, таких как Mapпесок Setс, for.. of вернет массив ключа и значения, а in не будет работать. Например:

let myMap = new Map();
myMap.set('x', 5);

for(let x of myMap) {
    console.log(x); // [ 'x', 5 ]
}

for(let x in myMap) {
    console.log(x); // does not console log anything
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Чтобы узнать больше о картах и ​​наборах, вы можете прочитать мой подробный Руководство по карте Javascript а также Руководство по набору Javascript здесь.


Итерация по объектам

Хотя сами объекты не являются итерируемыми в Javascript, их можно преобразовать в итерируемые с помощью Object.keys() или же Object.values(). Это преобразует объект в массив либо его ключей, либо значений, которые затем можно повторить:

let obj = { name: "John", secondName: "Jacob", age: 154 };
let iterableKeys = Object.keys(obj);
for(let item of iterableKeys) {
    console.log(item); // name.. secondName.. age
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Вывод

Это касается всего, что вам нужно знать. В итоге:

  • forEach — это метод, прикрепленный к большинству итерируемых элементов в Javascript, за некоторыми исключениями. Он основан на обратном вызове, обычно не работает с промисами и работает медленнее, чем традиционный цикл for.
  • for циклы доступны для каждого итерируемого объекта, и раньше это было for(let i = 0; i < x.length; ++i) был единственным форматом, который кто-либо использовал.
  • for.. in был введен для упрощения for(let i = 0; i < x.length; ++i) к for(let i in x).
  • Наконец, мы получили возможность доступа к значениям каждого элемента в итерируемом объекте, а не только к ключу, используя for.. of.

Надеюсь, вам понравилось это руководство, и вы лучше понимаете, когда использовать in, forEachа также of в Javascript.