Получение счетчика цикла/индекса с помощью синтаксиса for…of в JavaScript

Question

Я понимаю, что базовый синтаксис for...of в JavaScript выглядит так:

for (let obj of myArray) {
  // ...
}

Но как мне получить индекс счетчика в цикле при использовании этого синтаксиса?

Тот же вопрос касается и нотации for...in для итерации по именам свойств объектов.

Я знаю, что могу использовать явный счетчик цикла:

for (let i = 0; i < myArray.length; i++) {
  const obj = myArray[i];
  console.log(i);
}

Или вручную отслеживать индекс вне цикла:

let i = 0;
for (let obj of myArray) {
  console.log(i);
  i++;
}

Но мне бы хотелось использовать более простой цикл for...of, который, на мой взгляд, выглядит лучше и более логично.

В качестве примера языка, который позволяет сделать это проще, в Python это так просто, как:

for i, obj in enumerate(my_array):
    print(i)

Как мне получить индекс при использовании for...of в JavaScript?

Answer 1

Вы можете использовать метод forEach массива в JavaScript, чтобы пройтись по элементам и вывести их вместе с индексом. Вот пример кода:

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => console.log(`${index}: ${number}`));

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

Answer 2

Для работы с небольшими массивами вы можете использовать следующий код:

for (var obj in arr) {
    var i = Object.keys(arr).indexOf(obj);
}

Здесь arr — это массив, obj — ключ текущего элемента, а i — индекс этого элемента.

Важно: Метод keys() недоступен в Internet Explorer версии ниже 9. В таком случае вам следует использовать полифилл. Подробнее об этом можно узнать по ссылке: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys.

Если у вас возникли вопросы или нужна дополнительная помощь, не стесняйтесь обращаться!

Answer 3

Циклы for-in перебирают свойства объекта. Не стоит использовать их для массивов, даже если иногда это может работать.

Свойства объекта не имеют индекса, они все равны и не обязаны обрабатываться в определенном порядке. Если вы хотите подсчитать свойства, вам нужно будет установить дополнительный счетчик (как вы сделали в своем первом примере).

Чтобы перебирать массив, используйте:

var a = [];
for (var i = 0; i < a.length; i++) {
    i // индекс
    a[i] // элемент
}

Чтобы перебирать объект, используйте:

var o = {};
for (var prop in o) {
    prop // имя свойства
    o[prop] // значение свойства - элемент
}

Answer 4

Как уже говорили другие, не стоит использовать конструкцию for..in для итерации по массиву.

Лучше использовать классический цикл for:

for (var i = 0, len = myArray.length; i < len; i++) { ... }

Если вы хотите более чистый синтаксис, вы можете воспользоваться методом forEach:

myArray.forEach(function(val, i) { ... });

Если вы решите использовать этот метод, убедитесь, что у вас установлен полифилл для ES5, чтобы обеспечить поддержку в старых браузерах.

Answer 5

Ответ, данный rushUp, верен, но это будет более удобно:

for (let [index, val] of array.entries() || []) {
   // здесь ваш код    
}

Такой подход позволяет вам итерироваться по массиву с индексами и значениями, что делает код более читаемым и понятным. Не забудьте, что вы можете использовать array.entries() для получения пар "индекс-значение". Если массив пустой, то оператор || [] обеспечит, что цикл не вызовет ошибок.

Получение счетчика цикла/индекса с помощью синтаксиса for…of в JavaScript

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных