Две реализации цикла for в JavaScript о которых вы могли не знать

Всем привет! С вами JSexpert и сегодня в уроке мы рассмотрим реализации цикла for, о которых вы могли не знать.
Многим известен самый классический и самый популярный способ реализации цикла for. Его вы можете увидеть далее:

console.log(" - For - ");
for (let i=0; i < 5; i++) {
    console.log(i);
}

Как это работает? Всё предельно просто! Указывается переменная итератор (counter), в данном случае это і=0, затем условие, в нашем случае это і < 5, и последним параметром является инкремент і++, который означает, что мы будем увеличивать значение і на каждом шаге. В консоли мы сможем увидеть:

- For - 
0
1
2
3
4

Почему мы получили такие значения в консоли? Потому что отсчёт начинается с 0, дальше идут 1,2,3 и 4. Число 5 не выводится, потому что наше условие і < 5. Если условие было і <= 5, тогда в консоли мы бы увидели 5.
Такая реализация цикла for является классической, и до сих пор часто используется. Внутри цикла for можно использовать операторы continue и break, которые позволяют прерывать текущую итерацию или же полностью прерывать весь цикл. Как пример использования оператора continue, допишем к коду условие if, где i будет равно 3.

console.log(" - For - ");
for (let i=0; i <= 7; i++) {
    if (i==3){
        continue;
    }
    console.log(i);
}

В консоли мы увидим следующее:

- For - 
0
1
2
4
5
6
7

Как видно, число 3 пропало. Это случилось потому, что исходя из заданного условия, мы пропустили одну итерацию.
Так же можно использовать и оператор break.

console.log(" - For - ");
for (let i=0; i <= 7; i++) {
    if (i==3){
        break;
    }
    console.log(i);
}

Данный оператор выйдет из цикла, как только дойдёт до условия, где i == 3.

- For - 
0
1
2

 

Следующий способ использования for – это конструкция for in. Данная конструкция позволяет перебирать индексы массивов и объектов. В этом примере for записывается в формате let i in data, где i – имя переменной, а data, в нашем случае, это простейший массив из трёх string значений.

const data = ['first','second','third']

console.log (" - For in - ");
for (let i in data) {
    console.log(i);
    console.log(data[i]);
}

В переменную i при каждой итерации будет попадать индекс (index) массива, с которым мы сейчас работаем. Если же нам нужно получить не индекс, а значение, тогда в console.log выводится имя массива и в квадратных скобках подставляется значение i. Цикл for in перебирает все элементы, и нет необходимости задавать цифровые значения. При выполнении данного кода, в консоли мы увидим следующее:

- For in -
0
first
1
second
2
third

 

Существует ещё одна реализация for — это цикл for of. В этой реализации происходит перебор значений итерируемых конструкций (Array, Map, Set и DOM) и в переменную і попадает значение, по которому происходит итерирование. Цикл for of не может использоваться для перебора объектов.

console.log (" - For of - ");
for (let i of data) {
     console.log(i);
}

В консоли мы увидим следующие значения:

- For of -

first
second
third

Если подытожить, то цикл for in в переменную i получает индекс (index), а в цикл for of – значение.
Давайте рассмотрим работу данных циклов с более сложным массивом объектов – users, где есть три ключа объекта, это id, name и isAdmin. Чтоб увидеть, как работают цикли for in и for of, в console.log подставим новый массив.

const users = [
    {id: 1, name: "John", isAdmin: true},
    {id: 2, name: "Smith", isAdmin: true},
    {id: 3, name: "David", isAdmin: false}
];

console.log (" - For in - ");
for (let i in users) {
    console.log(users[i]);
}

console.log (" - For of - ");
for (let i of users) {
     console.log(i);
}

Теперь в консоли мы увидим следующее:

- For in -

{ id: 1, name: "John", isAdmin: true }
{ id: 2, name: "Smith", isAdmin: true }
{ id: 3, name: "David", isAdmin: false }


- For of -

{ id: 1, name: "John", isAdmin: true }
{ id: 2, name: "Smith", isAdmin: true }
{ id: 3, name: "David", isAdmin: false }

При данной реализации циклы for in и for of показывают нам все значения массива.
Если же в цикл for in вместо users подставить конкретно объект users[0], то цикл про итерируется по объекту и переберёт все его ключи:

console.log (" - For in - ");
for (let i in users[0]) {
    console.log(i);
}

- For in -
id
name
isAdmin

При попытке сделать то же самое в цикле for of мы получим сообщение об ошибке, поскольку такое действие в этом цикле сделать невозможно.
На этом сегодня всё, ждём вас на следующих уроках!