99 lines
3.8 KiB
Markdown
99 lines
3.8 KiB
Markdown
---
|
||
title: for-of loop
|
||
localeTitle: for-of loop
|
||
---
|
||
## for-of Loop
|
||
|
||
for-of loop может использоваться для итерации по вещам, которые не являются массивами, но являются итерабельными, как коллекция DOM, строка, множество, аргументы или карта.
|
||
|
||
```javascript
|
||
const fruits = ['Orange','Apple','Grapes','Banana'];
|
||
for (const fruit of fruits)
|
||
{
|
||
console.log(fruit);
|
||
}
|
||
```
|
||
|
||
Вышеприведенный фрагмент вернет нам элементы в массиве выше.
|
||
|
||
## for-of loop в знании индекса
|
||
|
||
Что делать, если мы хотим знать индекс каждого элемента тоже. В этом случае мы можем перебирать fruit.entries (), который дает нам ArrayIterator.
|
||
|
||
```javascript
|
||
for (const fruit of fruits.entries())
|
||
{
|
||
console.log(fruit);
|
||
}
|
||
```
|
||
|
||
В приведенном выше фрагменте фрукты будут массивом с двумя предметами. 0-й элемент будет содержать индекс, а первый элемент будет содержать фактическое имя фрукта. Выход будет выглядеть так:
|
||
```
|
||
[0, "Orange"]
|
||
|
||
[1, "Apple"]
|
||
|
||
[2, "Grapes"]
|
||
|
||
[3, "Banana"]
|
||
```
|
||
|
||
Мы можем еще больше разрушить плоды, как показано ниже:
|
||
|
||
```javascript
|
||
for (const [index,fruit] of fruits.entries())
|
||
{
|
||
console.log(index,fruit);
|
||
}
|
||
```
|
||
|
||
## for-of loop в итерации по неизвестному числу аргументов
|
||
|
||
for-of loop очень полезен при итерации по неизвестному числу аргументов функции.
|
||
|
||
Предположим, мы хотим добавить числа, которые передаются функции, а количество аргументов не фиксировано.
|
||
|
||
«arguments» - это специальное ключевое слово в javascript, которое дает нам массив Array-ish (not array) и дает нам все аргументы.
|
||
|
||
```javascript
|
||
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 для итерации по строке, чтобы дать нам символ по характеру строки.
|
||
|
||
```javascript
|
||
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.
|
||
|
||
```javascript
|
||
const paragraphs = document.querySelectorAll('p');
|
||
```
|
||
|
||
Здесь абзацы - это NodeList, который может быть повторен с использованием цикла for-of.
|
||
|
||
```javascript
|
||
for (const para of paragraphs)
|
||
{
|
||
console.log(para);
|
||
// We can add event listeners to each para here
|
||
}
|
||
|
||
``` |