Поиск…


Синтаксис

  • для ( инициализация , условие ; окончательное_выражение ) {}
  • для ( ключ в объекте ) {}
  • for ( переменная iterable ) {}
  • while ( условие ) {}
  • do {} while ( условие )
  • для каждого ( переменная в объекте ) {} // ECMAScript для XML

замечания

Циклы в JavaScript обычно помогают решить проблемы, связанные с повторением определенного кода x раз. Скажем, вам нужно занести сообщение 5 раз. Вы можете сделать это:

console.log("a message");
console.log("a message");
console.log("a message");
console.log("a message");
console.log("a message");

Но это просто отнимает много времени и нелепо. Кроме того, что, если вам нужно было зарегистрировать более 300 сообщений? Вы должны заменить код на традиционный цикл for:

for(var i = 0; i < 5; i++){
    console.log("a message");
}

Стандартные «для» циклов

Стандартное использование

for (var i = 0; i < 100; i++) {
    console.log(i);
}

Ожидаемый результат:

0
1
...
99

Несколько объявлений

Обычно используется для кэширования длины массива.

var array = ['a', 'b', 'c'];
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Ожидаемый результат:

«А»
«Б»
«С»

Изменение приращения

for (var i = 0; i < 100; i += 2 /* Can also be: i = i + 2 */) {
    console.log(i);
}

Ожидаемый результат:

0
2
4
...
98

Сокращенный цикл

for (var i = 100; i >=0; i--) {
    console.log(i);
}

Ожидаемый результат:

100
99
98
...
0

"while" Циклы

Стандартное время цикла

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

var i = 0;
while (i < 100) {
    console.log(i);
    i++;
}

Ожидаемый результат:

0
1
...
99

Сокращенный цикл

var i = 100;
while (i > 0) {
    console.log(i);
    i--; /* equivalent to i=i-1 */
}

Ожидаемый результат:

100
99
98
...
1

Сделайте ... while Loop

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

var i = 101;
do {
    console.log(i);
} while (i < 100);

Ожидаемый результат:

101

«Перерыв» из цикла

Нарушение замкнутой петли

var i = 0;
while(true) {
    i++;
    if(i === 42) {
        break;
    }
}
console.log(i);

Ожидаемый результат:

42

Вырыв из цикла for

var i;
for(i = 0; i < 100; i++) {
    if(i === 42) {
        break;
    }
}
console.log(i);

Ожидаемый результат:

42

«продолжить» цикл

Продолжение цикла «для»

Когда вы помещаете ключевое слово continue в цикл for, выполнение переходит к выражению обновления ( i++ в примере):

for (var i = 0; i < 3; i++) {
    if (i === 1) {
        continue;
    }
    console.log(i);
}

Ожидаемый результат:

0
2

Продолжение цикла while

Когда вы continue цикл while, выполнение переходит к условию ( i < 3 в примере):

var i = 0;
while (i < 3) {
    if (i === 1) {
        i = 2;
        continue;
    }
    console.log(i);
    i++;
}

Ожидаемый результат:

0
2

"do ... while" loop

var availableName;
do {
    availableName = getRandomName();
} while (isNameUsed(name));

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

Разбить определенные вложенные циклы

Мы можем назвать наши петли и разбить конкретную, когда это необходимо.

outerloop:
for (var i = 0;i<3;i++){
    innerloup:
    for (var j = 0;j <3; j++){
        console.log(i);
        console.log(j);
        if (j == 1){
            break outerloop;    
        }
    }
}

Выход:

0
0
0
1

Перерыв и продолжение меток

Операторы break и continue могут сопровождаться дополнительной меткой, которая работает как какой-то оператор goto, возобновляет выполнение с позиции, обозначенной меткой

for(var i = 0; i < 5; i++){
  nextLoop2Iteration:
  for(var j = 0; j < 5; j++){
    if(i == j) break nextLoop2Iteration;
    console.log(i, j);
  }
}

i = 0 j = 0 пропускает остальные значения j
1 0
i = 1 j = 1 пропускает остальные значения j
2 0
2 1 i = 2 j = 2 пропускает остальные значения j
3 0
3 1
3 2
i = 3 j = 3 пропускает остальные значения j
4 0
4 1
4 2
4 3
i = 4 j = 4 не регистрируется, и петли выполняются

«для ... цикла»

6
const iterable = [0, 1, 2];
for (let i of iterable) {
    console.log(i);
}

Ожидаемый результат:

0
1
2

Преимуществами цикла for ... являются:

  • Это самый сжатый, прямой синтаксис, но для циклизации элементов массива
  • Он избегает всех ловушек для ... в
  • В отличие от forEach() , он работает с разрывом, продолжением и возвратом

Поддержка других ... в других коллекциях

Струны

for ... of будет обрабатывать строку как последовательность символов Unicode:

const string = "abc";
for (let chr of string) {
  console.log(chr);
}

Ожидаемый результат:

a b c

наборы

для ... работ над объектами Set .

Примечание .

const names = ['bob', 'alejandro', 'zandra', 'anna', 'bob'];

const uniqueNames = new Set(names);

for (let name of uniqueNames) {
  console.log(name);
}

Ожидаемый результат:

боб
Alejandro
Zandra
Анна

Карты

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

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const iteration of map) {
  console.log(iteration) //will log ['abc', 1] and then ['def', 2]
}

Вы можете использовать назначение деструкции для захвата ключа и значения отдельно:

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const [key, value] of map) {
  console.log(key + ' is mapped to ' + value)
}
/*Logs:
  abc is mapped to 1
  def is mapped to 2
*/

Объекты

для ... циклов не работают непосредственно на простых объектах; но можно перебирать свойства объекта, переключаясь в цикл for for ... in или используя Object.keys() :

const someObject = { name: 'Mike' };

for (let key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

Ожидаемый результат:

имя: Майк

"for ... in" loop

Предупреждение
for ... in предназначен для итерации по объектным ключам, а не индексов массива. Использование его для циклического прохождения массива обычно не рекомендуется . Он также включает свойства прототипа, поэтому может потребоваться проверить, находится ли ключ в объекте с использованием hasOwnProperty . Если какие-либо атрибуты в объекте определяются методом defineProperty/defineProperties и устанавливают параметр enumerable: false , эти атрибуты будут недоступны.

var object = {"a":"foo", "b":"bar", "c":"baz"};
// `a` is inaccessible
Object.defineProperty(object , 'a', {
        enumerable: false,
});
for (var key in object) {
    if (object.hasOwnProperty(key)) {
      console.log('object.' + key + ', ' + object[key]);
    }
}

Ожидаемый результат:

object.b, bar
object.c, baz



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow