Методы итерации массивов

В JavaScript есть множество способов для итерации по массиву. Вот основные из них:

1. for

Обычный цикл for, даёт полный контроль над индексами.

const array = [1, 2, 3];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

2. for...of

Позволяет итерироваться непосредственно по элементам массива.

const array = [1, 2, 3];
for (const value of array) {
  console.log(value);
}

3. forEach

Метод для выполнения функции для каждого элемента массива.

const array = [1, 2, 3];
array.forEach((value, index) => {
  console.log(value, index);
});

4. map

Создаёт новый массив, применяя функцию к каждому элементу.

const array = [1, 2, 3];
const doubled = array.map((value) => value * 2);
console.log(doubled); // [2, 4, 6]

5. filter

Создаёт новый массив только с элементами, удовлетворяющими условию.

const array = [1, 2, 3];
const filtered = array.filter((value) => value > 1);
console.log(filtered); // [2, 3]

6. reduce

Итерируется по массиву, накапливая результат.

const array = [1, 2, 3];
const sum = array.reduce((acc, value) => acc + value, 0);
console.log(sum); // 6

7. every

Проверяет, удовлетворяют ли все элементы массива условию.

const array = [1, 2, 3];
const allPositive = array.every((value) => value > 0);
console.log(allPositive); // true

8. some

Проверяет, удовлетворяет ли хотя бы один элемент массива условию.

const array = [1, 2, 3];
const hasNegative = array.some((value) => value < 0);
console.log(hasNegative); // false

9. find

Возвращает первый элемент, удовлетворяющий условию.

const array = [1, 2, 3];
const found = array.find((value) => value > 1);
console.log(found); // 2

The find() method of Array instances returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

• If you need the index of the found element in the array, use findIndex().
• If you need to find the index of a value, use indexOf(). (It’s similar to findIndex(), but checks each element for equality with the value instead of using a testing function.)
• If you need to find if a value exists in an array, use includes(). Again, it checks each element for equality with the value instead of using a testing function.
• If you need to find if any element satisfies the provided testing function, use some().
• If you need to find all elements that satisfy the provided testing function, use filter().

10. findIndex

Возвращает индекс первого элемента, удовлетворяющего условию.

const array = [1, 2, 3];
const index = array.findIndex((value) => value > 1);
console.log(index); // 1

11. keys, values, entries

Итерирование ключей, значений или пар [ключ, значение].

const array = [1, 2, 3];

// Ключи
for (const key of array.keys()) {
  console.log(key);
}

// Значения
for (const value of array.values()) {
  console.log(value);
}

// Пары [ключ, значение]
for (const [key, value] of array.entries()) {
  console.log(key, value);
}

12. while

Цикл while также может быть использован для итерации массива.

const array = [1, 2, 3];
let i = 0;
while (i < array.length) {
  console.log(array[i]);
  i++;
}

13. do...while

Выполняет итерацию хотя бы один раз, даже если условие ложно с самого начала.

const array = [1, 2, 3];
let i = 0;
do {
  console.log(array[i]);
  i++;
} while (i < array.length);

Итог

Если вы выбираете подходящий метод итерации:

• for/while — если нужен полный контроль.
• map/filter — для создания новых массивов.
• forEach — для вызова функций без создания нового массива.
• reduce — для сложной обработки и аккумуляции данных.

Если итерация предполагает простой доступ к элементам, используйте for...of.

for…in

Технически for...in можно использовать для массивов, но не рекомендуется. Этот цикл предназначен для перебора свойств объекта, а не элементов массива. Использование его для массивов может привести к неожиданным результатам.

Почему не стоит использовать for...in для массивов:

1. Перебирает свойства, а не элементы: Если в массиве есть дополнительные свойства (например, добавленные вручную), они тоже будут перечислены.

    const array = [1, 2, 3];
    array.customProperty = "Hello";
       
    for (const key in array) {
      console.log(key); // Выводит: "0", "1", "2", "customProperty"
    }
   

2. Порядок элементов не гарантируется: Порядок перечисления свойств в for...in может быть не таким, как в массиве.
3. Скорость работы: Цикл for...in обычно медленнее, чем другие способы итерации (например, for или forEach), так как он проходит через все перечисляемые свойства.

Что использовать вместо for...in для массивов:

Для итерации по элементам массива лучше использовать:

• for
• for...of
• Методы массивов, такие как forEach, map, filter и т.д.

Пример неправильного использования for...in:

const array = [10, 20, 30];
for (const index in array) {
  console.log(index); // Выводит индексы: "0", "1", "2", а не значения.
  console.log(array[index]); // Это работает, но так лучше не делать.
}

Пример правильного использования:

const array = [10, 20, 30];

// for
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// for...of
for (const value of array) {
  console.log(value);
}

// forEach
array.forEach((value) => {
  console.log(value);
});

Итог:

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