Здесь я собрал все методы цикла от JavaScript ES1 до ES6.
- Цикл
for
:
for (let index=0; index < someArray.length; index++) {
const elem = someArray[index];
// ···
}
- Цикл
for-in
:
for (const key in someArray) {
console.log(key);
}
- Метод Array
.forEach()
:
someArray.forEach((elem, index) => {
console.log(elem, index);
});
- Цикл
for-of
:
for (const elem of someArray) {
console.log(elem);
}
The for
петля [ES1]
Все знают о простом цикле for
в JS, он довольно старый, еще со времен ES1. Особенно используется, когда вы хотите регистрировать индекс и значения массива.
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
for (let index=0; index < arr.length; index++) {
const elem = arr[index];
console.log(index, elem);
}
// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'
Касса и преимущества цикла for
:
- Он значительно варьируется, но горе - слово действия, когда все, что мы хотим сделать, - это пересечь массив.
- По-прежнему полезно, если мы не хотим начинать скручивать с Array первым делом. Других способов удаления, позволяющих это сделать, нет.
Цикл for-in
[ES1]
for-in
цикл такой же старый, как и цикл for
. То же самое сfor-in
ES1.
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
for (const key in arr) {
console.log(key);
}
// Output:
// '0'
// '1'
// '2'
// 'prop'
for-in
- не лучший вариант для пропуска массивов:
- Посещает ключи свойств, а не значения.
- Как и ключи свойств, ссылки на объекты массива представляют собой строки, а не числа (подробнее о том, как работают объекты массива).
- Посещает все бесчисленные ключи активов (их и их), а не только объекты массива.
for-in
посещение унаследованных свойств - это вопрос использования: Открытость превыше всех свойств объекта. Но даже здесь я предпочитаю повторять серию примеров вручную, потому что у вас так много контроля.
Не используйте for-in
Его не следует использовать для объектов, подобных массиву, потому что:
- Порядок итерации не гарантируется; индексы массива нельзя посещать в числовом порядке
- Перечисляются также унаследованные свойства.
Во-вторых, это может создать множество проблем, например, если вы хотите расширить объект Array.prototype
, тогда дополнительный метод будет перечислен.
Например:
Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c'];
for (var i in array) { console.log(array[i]); }
Метод Array .forEach()
[ES5]
ни for
, ни for-in
не подходят для перебора массивов, поскольку в ES 5 был представлен новый метод: Array.prototype.forEach()
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
arr.forEach((elem, index) => {
console.log(elem, index);
});
// Output:
// 'a', 0
// 'b', 1
// 'c', 2
Этот метод действительно прост, вы можете легко получить массив и его элементы. Стрелочные функции (представленные в ES6) делают этот метод еще лучше.
Основные недостатки .forEach()
:
- Вы не можете использовать его асинхронно, т.е. вы не можете использовать
async, await
с этим циклом - Вы не можете разорвать
.forEach()
цикл, когда захотите. Вfor
циклах вы можете использоватьbreak
Выход из .forEach()
- обходной путь
Есть хороший прием, если вы хотите использовать a.forEach()
и прервать в какой-то момент. Метод .some()
также перебирает массив и, когда он возвращает true
, он останавливает выполнение цикла.
const arr = ['red', 'green', 'blue'];
arr.some((elem, index) => {
if (index >= 2) {
return true; // break from loop
}
console.log(elem);
// This callback implicitly returns `undefined`, which
// is a falsy value. Therefore, looping continues.
});
// Output:
// 'red'
// 'green'
Но это всего лишь обходной путь, которого, по возможности, настоятельно рекомендуется избегать.
Цикл for-of
[ES6]
Он был представлен в ES6
const arr = ['a', 'b', 'c'];
arr.prop = 'property value';
for (const elem of arr) {
console.log(elem);
}
// Output:
// 'a'
// 'b'
// 'c'
for-of
отлично работает для перебора массивов:
- Легко использовать
await
И легко перейти наfor-await-of
- Также мы можем использовать
break
иcontinue
- даже для внешних областей видимости. - Если вы ориентируетесь на все браузеры, то в более старых версиях конечный результат может вас удивить.
Другой пример:
const arr = ['chocolate', 'vanilla', 'strawberry'];
for (const [index, value] of arr.entries()) {
console.log(index, value);
}
// Output:
// 0, 'chocolate'
// 1, 'vanilla'
// 2, 'strawberry'
Вывод
Как мы видели, цикл for-of встречается с, for-in и .forEach () w.r.t. удобство использования.
Любые различия в производительности между четырьмя процессами блокировки не должны иметь значения. Если да, то вы, вероятно, делаете что-то очень мощное, и переход на WebAssembly может иметь смысл.