Перебор строк и массивов в JavaScript

Перебор - это последовательный проход по элементам коллекции. В JavaScript чаще всего перебирают строки (символы) и массивы (элементы). Этот шаг нужен, чтобы уверенно работать с массивами и дальше перейти к методам массивов.

Индексы и length

И строки, и массивы имеют:

• индексы (нумерация начинается с 0)
• length (количество элементов/символов)

const word = "code";
console.log(word.length); // 4
console.log(word[0]);     // "c"
console.log(word[3]);     // "e"

Для массива все аналогично:

const nums = [10, 20, 30];
console.log(nums.length); // 3
console.log(nums[0]);     // 10
console.log(nums[2]);     // 30

Главное правило границы: последний индекс равен length - 1.

Перебор строки через for

Строка - это последовательность символов, по которым можно пройтись индексами.

const text = "Java";

for (let i = 0; i < text.length; i += 1) {
  console.log(i, text[i]);
}
// 0 "J"
// 1 "a"
// 2 "v"
// 3 "a"

Частый прием - посчитать что-то внутри строки, например количество нужных символов:

const text = "banana";
let count = 0;

for (let i = 0; i < text.length; i += 1) {
  if (text[i] === "a") count += 1;
}

console.log(count); // 3

Перебор массива через for

Когда нужен индекс (например, чтобы знать позицию элемента или обратиться к соседнему), используется классический for.

const items = ["a", "b", "c"];

for (let i = 0; i < items.length; i += 1) {
  console.log(i, items[i]);
}
// 0 "a"
// 1 "b"
// 2 "c"

Типичная ошибка - использовать <= вместо <:

const items = ["a", "b", "c"];

for (let i = 0; i <= items.length; i += 1) {
  console.log(items[i]);
}
// "a", "b", "c", undefined

for…of: когда индекс не нужен

for...of проходит по значениям. Он хорошо подходит, когда важен элемент, а не его индекс.

for…of для строки

const text = "Hi";

for (const ch of text) {
  console.log(ch);
}
// "H"
// "i"

for…of для массива

const nums = [10, 20, 30];

for (const n of nums) {
  console.log(n);
}
// 10
// 20
// 30

Если нужен и индекс, и значение, чаще используют for или entries():

const nums = [10, 20, 30];

for (const [index, value] of nums.entries()) {
  console.log(index, value);
}
// 0 10
// 1 20
// 2 30

Изменение массива во время перебора

При переборе по индексам можно менять элементы массива по месту:

const nums = [1, 2, 3];

for (let i = 0; i < nums.length; i += 1) {
  nums[i] = nums[i] * 2;
}

console.log(nums); // [2, 4, 6]

При for...of так делать не получится напрямую, потому что переменная цикла содержит значение, а не ссылку на ячейку массива:

const nums = [1, 2, 3];

for (let n of nums) {
  n = n * 2;
}

console.log(nums); // [1, 2, 3]

Если нужно менять массив, лучше идти по индексам.

Что стоит запомнить

• Строки и массивы перебираются по индексам от 0 до length - 1.
• for удобен, когда нужен индекс.
• for...of удобен, когда нужен только элемент.
• Для изменения массива по месту обычно используют перебор по индексам.