Итерация массива JavaScript

Итерация по массивам — это фундаментальная концепция в JavaScript, которая позволяет разработчикам перебирать и изменять элементы внутри массива. JavaScript предоставляет множество методов для итерации по массивам, начиная от традиционных циклов (while, do...while, for, for...in, for...of) и заканчивая современными методами массивов (forEach, map, filter, reduce, reduceRight). Каждый метод подходит для различных задач, таких как фильтрация, преобразование или сокращение данных. Продвинутые методы, такие как flatMap, Array.from, keys, entries и оператор расширения (...), предлагают дополнительную гибкость и функциональность. Освоение этих техник позволяет разработчикам писать лаконичный, эффективный и выразительный код для работы с массивами, что крайне важно для создания мощных JavaScript-приложений. Понимание этих методов также обеспечивает совместимость с современными браузерами, делая их практичными для современной веб-разработки.

Ключевые выводы: JavaScript предлагает различные методы для итерации по массивам, включая традиционные циклы (while, do...while, for, for...in, for...of) и современные методы массивов (forEach, map, filter, reduce, reduceRight). Каждый метод имеет уникальные особенности, подходящие для различных случаев использования, от простых итераций до сложных преобразований. Освоение этих техник позволяет разработчикам писать эффективный и выразительный код для работы с массивами, что необходимо для создания мощных JavaScript-приложений. Большинство методов поддерживаются современными браузерами, что обеспечивает широкую совместимость.

Что такое циклы в JavaScript?

Циклы в JavaScript — это управляющие структуры, которые позволяют разработчикам повторно выполнять блок кода до тех пор, пока не будет выполнено определённое условие. Они предоставляют способ автоматизации повторяющихся задач и эффективной обработки массивов или коллекций данных. JavaScript предлагает несколько типов циклов, включая while, do...while, for, for...in, and for...of, каждый из которых имеет свой синтаксис и случаи использования.

Как перебирать массив с помощью цикла while в JavaScript

Цикл while выполняет блок кода до тех пор, пока указанное условие истинно. Это универсальный цикл, который можно использовать для итерации по массивам, вручную управляя переменной индекса. Вот пример использования цикла while для перебора массива:

const numbers = [1, 2, 3, 4, 5];

let i = 0;

while (i < numbers.length) {
  console.log(numbers[i]);
  i++;
}

‍

В этом примере цикл while продолжает выполняться до тех пор, пока индекс i меньше длины массива numbers. Цикл выводит каждый элемент в консоль и увеличивает переменную индекса.

Как перебирать массив с помощью цикла do...while в JavaScript

Цикл do...while похож на цикл while, но он гарантирует, что блок кода будет выполнен хотя бы один раз перед проверкой условия. Вот пример использования цикла do...while для перебора массива:

const fruits = ['apple', 'banana', 'orange'];

let i = 0;

do {
  console.log(fruits[i]);
  i++;
} while (i < fruits.length);

‍

В этом случае цикл выводит каждый фрукт в консоль и увеличивает переменную индекса. Цикл продолжается до тех пор, пока условие i < fruits.length не станет ложным.

Как перебирать массив с помощью цикла for в JavaScript

Цикл for — это компактная и часто используемая структура цикла в JavaScript. Он объединяет инициализацию, условие и выражения инкремента/декремента в одной строке. Вот пример использования цикла for для перебора массива:

const colors = ['red', 'green', 'blue'];

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

‍

Цикл for инициализирует переменную индекса i значением 0, проверяет условие i < colors.length и увеличивает i после каждой итерации. Цикл выводит каждый цвет в консоль.

Как перебирать массив с помощью цикла for...in в JavaScript

Цикл for...in используется для перебора свойств объекта. При использовании с массивами он перебирает индексы массива. Вот пример:

const persons = ['Alice', 'Bob', 'Charlie'];

for (let index in persons) {
  console.log(index + ': ' + persons[index]);
}

‍

В этом примере цикл for...in перебирает индексы массива persons. Он выводит каждый индекс и соответствующее значение в консоль.

Как перебирать массив с помощью цикла for...of в JavaScript

Цикл for...of, представленный в ECMAScript 2015 (ES6), предоставляет более лаконичный и читаемый способ перебора итерируемых объектов, включая массивы. Он напрямую обращается к значениям массива без необходимости использования переменной индекса. Вот пример:

const numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
  console.log(number);
}

‍

В этом случае цикл for...of перебирает каждый элемент массива numbers и присваивает его переменной number. Цикл выводит каждое число в консоль.

Как перебирать массив с помощью метода forEach в JavaScript

Метод forEach() — это встроенный метод массива, который выполняет предоставленную функцию один раз для каждого элемента массива. Он предлагает более выразительный и функциональный подход к итерации по массивам. Вот пример:

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit) => {
  console.log(fruit);
});

‍

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

Другие методы итерации по массивам

JavaScript предоставляет несколько других методов итерации по массивам, которые предлагают мощные возможности для манипуляции и преобразования массивов. Эти методы включают:

• map(): Создаёт новый массив, вызывая предоставленную функцию для каждого элемента массива.
• filter(): Создаёт новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.
• reduce(): Выполняет функцию-редуктор для каждого элемента массива, возвращая одно результирующее значение.
• every(): Проверяет, все ли элементы массива проходят тест, реализованный предоставленной функцией.
• some(): Проверяет, проходит ли хотя бы один элемент массива тест, реализованный предоставленной функцией.

Мы рассмотрим эти методы более подробно в следующих разделах.

Метод forEach() в JavaScript

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

Пример 1

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number);
});

‍

В этом примере метод forEach() используется для вывода каждого числа из массива numbers в консоль.

Пример 2

const fruits = ['apple', 'banana', 'orange'];

const upperCaseFruits = [];

fruits.forEach((fruit) => {
  upperCaseFruits.push(fruit.toUpperCase());
});

console.log(upperCaseFruits);

‍

В этом примере метод forEach() используется для преобразования каждого фрукта из массива fruits в верхний регистр и добавления его в новый массив upperCaseFruits.

Метод map() в JavaScript

Метод map() создаёт новый массив, вызывая предоставленную функцию для каждого элемента массива. Он возвращает новый массив с результатами вызова функции для каждого элемента. Вот несколько примеров:

Пример 1

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map((number) => {
  return number ** 2;
});

console.log(squaredNumbers);

‍

В этом примере метод map() используется для создания нового массива squaredNumbers, в котором каждое число из массива numbers возводится в квадрат.

Пример 2

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const names = persons.map((person) => {
  return person.name;
});

console.log(names);

‍

В этом примере метод map() используется для извлечения свойства name из каждого объекта в массиве persons и создания нового массива names, содержащего только имена.

Метод filter() в JavaScript

Метод filter() создаёт новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией. Он возвращает новый массив, содержащий элементы, удовлетворяющие условию. Вот несколько примеров:

Пример 1

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers);

‍

В этом примере метод filter() используется для создания нового массива evenNumbers, в который включаются только чётные числа из массива numbers.

Пример 2

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const adultPersons = persons.filter((person) => {
  return person.age >= 18;
});

console.log(adultPersons);

‍

В этом примере метод filter() используется для создания нового массива adultPersons, в который включаются только те люди из массива persons, возраст которых 18 лет и старше.

Метод reduce() в JavaScript

Метод reduce() выполняет функцию-редуктор для каждого элемента массива, возвращая одно результирующее значение. Он принимает аккумулятор и текущий элемент в качестве аргументов и возвращает аккумулятор для следующей итерации. Вот несколько примеров:

Пример 1

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum);

‍

В этом примере метод reduce() используется для вычисления суммы всех чисел из массива numbers. Начальное значение аккумулятора установлено на 0.

Пример 2

const words = ['Hello', 'World', 'JavaScript'];

const sentence = words.reduce((accumulator, currentValue) => {
  return accumulator + ' ' + currentValue;
});

console.log(sentence);

‍

В этом примере метод reduce() используется для объединения всех слов из массива words в одно предложение. Аккумулятор инициализируется пустой строкой.

Пример 3

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const totalAge = persons.reduce((accumulator, person) => {
  return accumulator + person.age;
}, 0);

console.log(totalAge);

‍

В этом примере метод reduce() используется для вычисления общего возраста всех людей из массива persons. Аккумулятор инициализируется значением 0.

Метод reduceRight() в JavaScript

Метод reduceRight() похож на метод reduce(), но он выполняет функцию-редуктор справа налево (от последнего элемента к первому). Вот несколько примеров:

Пример 1

const numbers = [1, 2, 3, 4, 5];

const reversedSum = numbers.reduceRight((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(reversedSum);

‍

В этом примере метод reduceRight() используется для вычисления суммы всех чисел из массива numbers, начиная с последнего элемента и двигаясь к первому.

Пример 2

В этом примере метод reduceRight() используется для объединения всех слов из массива words в одно предложение, начиная с последнего слова и двигаясь к первому.

Метод every() в JavaScript

Метод every() проверяет, все ли элементы массива проходят тест, реализованный предоставленной функцией. Он возвращает true, если функция возвращает true для всех элементов, и false в противном случае. Вот несколько примеров:

Пример 1

const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every((number) => {
  return number % 2 === 0;
});

console.log(allEven);

‍

В этом примере метод every() используется для проверки, все ли числа из массива numbers являются чётными. Он возвращает true, так как все числа удовлетворяют условию.

Пример 2

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const allAdults = persons.every((person) => {
  return person.age >= 18;
});

console.log(allAdults);

‍

В этом примере метод every() используется для проверки, все ли люди из массива persons являются взрослыми (возраст 18 лет и старше). Он возвращает true, так как все люди удовлетворяют условию.

Метод some() в JavaScript

Метод some() проверяет, проходит ли хотя бы один элемент массива тест, реализованный предоставленной функцией. Он возвращает true, если функция возвращает true хотя бы для одного элемента, и false в противном случае. Вот пример:

Пример

const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some((number) => {
  return number % 2 === 0;
});

console.log(hasEvenNumber);

‍

В этом примере метод some() используется для проверки, есть ли в массиве numbers хотя бы одно чётное число. Он возвращает true, так как массив содержит чётные числа.

Продвинутые методы итерации по массивам

JavaScript предоставляет дополнительные методы итерации по массивам, которые предлагают более продвинутую функциональность. Эти методы включают:

• flatMap(): Создаёт новый массив, применяя функцию к каждому элементу, а затем сглаживая результат.
• from(): Создаёт новый массив из массивоподобного или итерируемого объекта.
• keys(): Возвращает новый итератор массива, содержащий ключи для каждого индекса в массиве.
• entries(): Возвращает новый итератор массива, содержащий пары ключ-значение для каждого индекса в массиве.
• with(): Возвращает новый массив с заменённым элементом. (Представлен в ES2023)

Давайте рассмотрим эти методы более подробно.

Метод flatMap() в JavaScript

Метод flatMap() сначала применяет функцию к каждому элементу массива, а затем сглаживает результат в новый массив. Он объединяет функциональность методов map() и flat() в одном методе. Вот пример:

Пример

const numbers = [1, 2, 3, 4, 5];

const mappedAndFlattened = numbers.flatMap((number) => {
  return [number, number * 2];
});

console.log(mappedAndFlattened);

‍

В этом примере метод flatMap() используется для отображения каждого числа из массива numbers в массив, содержащий число и его удвоенное значение, а затем сглаживания результирующих массивов в один массив.

Поддержка браузерами

Метод flatMap() поддерживается современными браузерами, включая Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ и Opera 56+.

Метод from() в JavaScript

Метод Array.from() создаёт новый массив из массивоподобного или итерируемого объекта. Он позволяет преобразовать объекты, имеющие свойство length и индексированные элементы, в массив. Вот пример:

Пример

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

const array = Array.from(arrayLike);

console.log(array);

‍

В этом примере метод Array.from() используется для преобразования массивоподобного объекта в настоящий массив.

Поддержка браузерами

Метод Array.from() поддерживается современными браузерами, включая Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ и Opera 38+. Он не поддерживается в Internet Explorer.

Метод keys() в JavaScript

Метод keys() возвращает новый итератор массива, содержащий ключи для каждого индекса в массиве. Он позволяет перебирать индексы массива. Вот пример:

Пример

const fruits = ['apple', 'banana', 'orange'];

const iterator = fruits.keys();

for (const key of iterator) {
  console.log(key);
}

‍

В этом примере метод keys() используется для получения итератора, содержащего ключи (индексы) массива fruits. Затем цикл for...of используется для перебора ключей и их вывода в консоль.

Поддержка браузерами

Метод keys() поддерживается современными браузерами, включая Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ и Opera 38+. Он не поддерживается в Internet Explorer.

Метод entries() в JavaScript

Метод entries() возвращает новый итератор массива, содержащий пары ключ-значение для каждого индекса в массиве. Каждая запись представляет собой массив вида [индекс, элемент]. Вот пример:

Пример

const fruits = ['apple', 'banana', 'orange'];

const iterator = fruits.entries();

for (const [index, element] of iterator) {
  console.log(`${index}: ${element}`);
}

‍

В этом примере метод entries() используется для получения итератора, содержащего пары ключ-значение для каждого индекса в массиве fruits. Затем цикл for...of используется для деструктуризации каждой записи на переменные index и element и их вывода в консоль.

Метод with() в JavaScript

Метод with() — это новое дополнение, представленное в ECMAScript 2023 (ES2023). Он позволяет создать новый массив с заменённым элементом. Он предоставляет способ обновления элемента в массиве без изменения исходного массива. Вот пример:

Пример

const numbers = [1, 2, 3, 4, 5];

const updatedNumbers = numbers.with(2, 10);

console.log(numbers);
console.log(updatedNumbers);

‍

В этом примере метод with() используется для создания нового массива updatedNumbers, в котором элемент с индексом 2 заменён на значение 10. Исходный массив numbers остаётся неизменным.

Оператор расширения (...) в JavaScript

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

Пример

const fruits = ['apple', 'banana'];

const moreFruits = ['orange', 'grape'];

const allFruits = [...fruits, ...moreFruits];

console.log(allFruits);

‍

В этом примере оператор расширения используется для объединения массивов fruits и moreFruits в новый массив allFruits.

Поддержка браузерами

Оператор расширения поддерживается современными браузерами, включая Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ и Opera 38+. Он не поддерживается в Internet Explorer.

Заключение

JavaScript предоставляет широкий спектр методов итерации по массивам, которые позволяют разработчикам перебирать массивы, изменять элементы и создавать новые массивы на основе определённых условий. В этой статье мы рассмотрели различные методы, включая традиционные циклы, такие как while, do...while, for, for...in и for...of, а также современные методы массивов, такие как forEach(), map(), filter(), reduce(), every(), some() и другие.

Понимание и использование этих техник итерации по массивам позволяет разработчикам писать лаконичный, эффективный и выразительный код при работе с массивами. Освоив эти методы, вы сможете легко выполнять сложные операции с массивами и создавать мощные JavaScript-приложения.