freeCodeCamp

3.8 KiB

Raw Blame History

title	localeTitle
for-of loop	for-of loop

for-of Loop

for-of loop может использоваться для итерации по вещам, которые не являются массивами, но являются итерабельными, как коллекция DOM, строка, множество, аргументы или карта.

const fruits = ['Orange','Apple','Grapes','Banana']; 
 for (const fruit of fruits) 
 { 
    console.log(fruit); 
 }

Вышеприведенный фрагмент вернет нам элементы в массиве выше.

for-of loop в знании индекса

Что делать, если мы хотим знать индекс каждого элемента тоже. В этом случае мы можем перебирать fruit.entries (), который дает нам ArrayIterator.

for (const fruit of fruits.entries()) 
 { 
    console.log(fruit); 
 }

В приведенном выше фрагменте фрукты будут массивом с двумя предметами. 0-й элемент будет содержать индекс, а первый элемент будет содержать фактическое имя фрукта. Выход будет выглядеть так:

[0, "Orange"] 
 
 [1, "Apple"] 
 
 [2, "Grapes"] 
 
 [3, "Banana"]

Мы можем еще больше разрушить плоды, как показано ниже:

for (const [index,fruit] of fruits.entries()) 
 { 
    console.log(index,fruit); 
 }

for-of loop в итерации по неизвестному числу аргументов

for-of loop очень полезен при итерации по неизвестному числу аргументов функции.

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

«arguments» - это специальное ключевое слово в javascript, которое дает нам массив Array-ish (not array) и дает нам все аргументы.

function addNumbers() 
 { 
    let sum = 0; 
    for (const num of arguments) 
       sum+=num; 
    return sum; 
 } 
 addNumbers(1, 2, 3, 4, 5); // 15

Здесь аргументы не являются истинным массивом, но мы можем перебирать его с помощью цикла for-of.

for-of loop для итерации по строке

Мы можем использовать for-of loop для итерации по строке, чтобы дать нам символ по характеру строки.

const name = 'John Doe'; 
 for (const char of name) 
    console.log(char);

что приводит к следующему результату: символы 'J', 'o', 'h', 'n', '', 'D', 'o', 'e'

for-of loop для итерации по набору DOM

Коллекции DOM не являются истинным типом массива. Они обычно являются NodeList для большинства браузеров. Если мы создадим несколько абзацев и хотим перебрать их, чтобы назначить какое-либо событие на каждом из абзацев, мы можем использовать цикл for-of.

const paragraphs = document.querySelectorAll('p');

Здесь абзацы - это NodeList, который может быть повторен с использованием цикла for-of.

for (const para of paragraphs) 
 { 
    console.log(para); 
    // We can add event listeners to each para here 
 }

3.8 KiB Raw Blame History Unescape Escape