Здесь я собрал все методы цикла от 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-inES1.

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 может иметь смысл.