Циклы JavaScript: for/forEach/for.. in/for.. из объяснения

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

• arr.forEach()
• for(let item of arr)
• for(указать элемент в arr)
• for(let item = 0; item < arr.length; ++item)

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

Поскольку существует так много способов, может возникнуть путаница, когда использовать 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 и Set, но несмотря будучи итерируемым, String этого не делает. Примечательно, что элементы DOM до недавнего времени не имели forEach. Таким образом, пока он надежно доступен во многих различных обстоятельствах. Кроме того, он намного медленнее обычного старого цикла for.

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

Несмотря на то, что forEach — это простой способ перебора массива, он не всегда лучший.

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

• for(let item of arr)
• for(указать элемент в 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 начинается с и увеличивается для каждого элемента в массиве x. Таким образом, i надежно представляет индекс для каждого элемента, и, таким образом, запись x[i] позволит нам что-то делать с каждым элементом в массиве.

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

в сравнении с циклами в Javascript

Лучший способ понять in и of в Javascript для циклов for, которые 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 я в х).
• Наконец, мы получили возможность доступа к значениям каждого элемента в итерируемом объекте, а не только к ключу, используя for.. of.

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

Также опубликовано здесь