Операторы циклов в javascript for of. Javascript циклы while, do-while и for

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

На языке JavaScript существует 4 вида циклов:

Цикл for . Этот цикл используется, когда известно точное количество повторений одних и тех же инструкций.
Цикл while . Он предназначен для выполнения одних и тех же инструкций до тех пор, пока заданное условие истинно.
Цикл do...while . Данный цикл аналогичен циклу while , но условие проверяется не перед выполнением повторяющихся инструкций, а после них. Таким образом, в отличие от цикла while , даже если условие изначально ложное, инструкции выполнятся хотя бы один раз.
Цикл for...in . Он применяется, когда необходимо перебрать все свойства в объекте или каждый элемент в массиве.

Цикл for

Синтаксис цикла for:

For (инициализация; условие; финальное выражение) { /* тело цикла */ }

инициализация - это выражение, которое выполняется один раз перед выполнением цикла; обычно используется для инициализации счётчика;
условие - это выражение, истинность которого проверяется перед каждой итерацией; если выражение вычисляется как истина, то выполняется итерация, в противном случае цикл for завершает работу;
финальное выражение - это выражение, которое выполняется в конце каждой итерации; обычно используется для изменения счетчика;
тело цикла - инструкции, выполнение которых нужно повторять.

Рассмотрим пример цикла, который выведет в консоль числа от 1 до 9:

Var i; // Цикл for от 1 до 9, с шагом 1 for (i = 1; i <= 9; i++) { console.log(i); }

В этом примере:

инициализация: i = 1 (присвоение переменной i значения 1);
условие прекращение цикла: i <= 9 (значение переменной i не меньше 9);
выражение, которое нужно выполнять в конце каждой итерации: i++ (увеличение значение переменной i на 1);
инструкция, которую нужно выполнять: console.log(i) (выведение значения счётчика в консоль).

Необязательные части цикла for

В for блок инициализации является не обязательным.

Var i = 1; // Цикл for for (; i <= 9; i++) { console.log(i); }

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

Var i; // Цикл for for (i = 1; ; i++) { if (i > 9) { // условие прерывание цикла break; } console.log(i); }

Финальное выражение в for также является не обязательным. Счётчик цикла в этом случае можно, например, изменять в теле.

Var i; // Цикл for for (i = 1; i <= 9 ;) { console.log(i); i++; }

Можно вообще опустить 3 выражения:

Var i = 1; // Цикл for for (; ;) { if (i > 9) { break; } console.log(i); i++; }

В качестве тела цикла for можно использовать пустое выражение (;).

Например:

Var arrA = , arrB = ; for (i = 0; i < arrA.length; arrB[i] = arrA / 2) ; console.log(arrB); //

Примеры использования for

Использование цикла for для перебора элементов массива:

Var arr = , // массив i = 0, // счетчик lenArr = arr.length; // длина массива for (i; i < lenArr; i++) { console.log(arr[i]); }

Инструкции break и continue

Кроме этого, внутри тела циклов могут использоваться специальные инструкции break и continue .

Оператор break предназначен для прекращения выполнения цикла. Т.е. он осуществляет выход из текущего цикла и передачи управления инструкции, идущей после него.

Оператор continue прерывает выполнение текущей итерации цикла и осуществляет переход к следующей.

Пример, в котором выведим в консоль нечётные числа от 1 до 11:

Var i; for (i = 1; i <= 11; i++) { // если число в переменной i чётное, то переходим к следующей итерации if (i %2 === 0) { continue; } // выведим значение переменной i в консоль console.log(i); } // 1, 3, 5, 7, 9, 11

Цикл c предусловием while

Цикл while выполняет одни и те же инструкции (тело цикла) до тех пор, пока истинно некоторое условие. Истинность условия проверяется перед каждым выполнением тела цикла. Если перед первой итерацией условие ложно, то цикл не выполняется ни разу.

// объявление переменной а и присвоение ей значения 0 var a=0; //цикл while с условием a

Цикл с постусловием do...while

Цикл do...while , так же как и цикл while , выполняет одни и те же инструкции (тело цикла) до тех пор, пока некоторое условие истинно. Но в отличие от цикла while , в цикле do...while условие проверяется после каждого выполнения тела цикла. Если даже условие изначально ложно, то тело цикла всё равно выполнится один раз (т.к. условие проверяется после выполнения тела цикла).

// объявление переменной а и присвоение ей значения 0 var a=0; //цикл do...while с условием a

Как было отмечено выше, цикл for...in находит применение для перебора элементов массива и свойств объекта. На этом уроке мы рассмотрим только общий синтаксис цикла for...in , а более подробно познакомимся с ним в следующих уроках.

Принцип работы цикла for...in заключается в том, что переменная x принимает все имена свойств объекта y или индексы массива y . Таким образом, в каждой итерации вам доступно свойство объекта или элемент массива.

Одним из важнейших инструментов в программировании являются циклы. Они полезны в случаях, когда нужно сделать что-то определённое кол-во раз.

Если будет такая задача, например, вывести на экран строку "всем привет" 1000 раз. То, без использования цикла, во первых это займёт много времени и во вторых, это будет смотреться не очень красиво. Поэтому циклы нужно знать на отлично , потому что они используются очень и очень часто.

В программировании существуют четыре цикла, это while, do-while, for и foreach . Каждый из них имеет свой синтаксис и каждый используется в определённых случаях.

Чаще всего используются циклы for и foreach, затем while, а цикл do-while встречается очень редко.

И начнём мы с цикла while.

Синтаксис цикла while следующий:

Сначала объявляем переменную i, которая является счётчиком и внутри цикла мы этот счётчик инкрементируем. Внутри круглых скобок пишем условие входа/выхода из цикла.

Замечание! Пишите условие выхода правильно, иначе может получиться бесконечный цикл и тогда скрипт зависнет . Такой цикл может получиться, если например, в условие выхода, напишем просто true.

Для примера выведем строку "Всем привет!" 10 раз.

Var i = 0; while(i "); i++; }

Переменная i, может начаться как с 0 так и с 1 или с другого любого числа.

Условие выхода является в тоже время и условием входа. Цикл работает следующим образом: Сначала проверяется если переменная i, меньше 10, и если условие истина, то мы входим в цикл, иначе, нет. В данном случае если переменная i будет равна 30, например, то цикл не выполнится, потому что 30 не меньше 10.

Зашли цикл, вывели строчку "Всем привет", инкрементировали счётчик и опять переходим к условию, где опять проверяем если значение переменной i, меньше 10, то мы входим в цикл, иначе выходим из него. И так происходит до того момента когда условие входа станет лож, то есть значение переменной i будет 10. 10 не меньше 10, поэтому мы уже не входим в цикл, а идём дальше.

Замечание! Не забудьте инкрементировать счётчик (i++), иначе опять же получится бесконечный цикл.

С циклом while разобрались, теперь перейдём к циклу do-while.

Синтаксис цикла do-while следующий:

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

Замечание! Как и у цикла while, не забудьте инкрементировать счётчик i.

Перейдём к практике. Для примера посчитаем произведение чисел от 1 до 10.

Var i = 1; var production = 1; do{ production *= i; i++; }while(i

Результатом будет число 3628800. На первом шаге мы сразу вошли в цикл, несмотря на его условие, где выполнилось операция production *= i (это тоже самое что и production = production * 1). Потом инкрементируем счётчик. После инкрементации он имеет значение 2. И в конце проверяем условие, если значение счётчика меньше либо равно 10, то мы идём к следующей итерации цикла, иначе мы выходим из цикла и идём дальше.

Цикл for

Как я уже написал выше цикл for, встречается достаточно часто, поэтому его нужно знать очень хорошо.

Синтаксис цикла for следующий:

Для лучшего понимания решим простую задачу. Допустим нам нужно посчитать сумму чисел от 1 до 1000 с помощью цикла for.

Var summa = 0; for(var i = 1; i

Сохраняем документ, открываем его в браузере и видим, что результат равен 500500.

Замечание! Если в цикле находится только одни оператор, то фигурные скобки использовать необязательно.

Для демонстрации выведем на экран 5 раз, какую то строку, например " Здравствуйте! ".

For(var i = 1; i

Замечание! После выполнения цикла в переменной i, остаётся последнее значение.

Теперь решим задачу чуть по сложнее, например нам нужно вывести строку "Привет" 100 раз. И для того чтобы это все не вывелось в один ряд, то после каждой 10-ой итерации, перейдём на новую строку. И в конце выведем значение переменной i.

For(var i = 1; i <= 100; i++){ document.write("привет!"); if(i % 10 == 0) document.write("
"); } document.write("

Переменная i = " + i + "

"); // i = 101

Цикл foreach обычно используется для перебора объектов и массивов. Поэтому о нем я расскажу в статье описывающая работу с массивами.

Оператор break предназначен для того чтобы принудительно выйти из цикла.

Оператор continue позволяет прервать текущую итерацию цикла, и перейти к следующей.

Для лучшего понимания, тоже решим простую задачу. Допустим, мы хотим посчитать сумму нечётных чисел с 1 до 20. И когда дойдём до 15-ой итерации, то выйдем из цикла.

Var summa = 0; for(var i = 1; i <= 20; i++){ //Пропускаем текущею итерацию цикла if(i % 2 == 0) continue; summa += i; //Выходим совсем из цикла. if(i == 15) break; document.write(i + ". Итерация
"); } document.write("

summa = " + summa + "

"); //summa = 64

Сохраняем документ, открываем его в браузере и смотрим на результат.

Для тренировки попробуйте изменить написанный скрипт, таким образом, чтобы он посчитал сумму чётных чисел.

На этом заканчивается эта статья. Теперь Вы знаете синтаксис циклов while, do-while, for и как с ними работать . Также познакомились с операторами break и continue .

Циклы

Чтобы понять действие условных операторов, мы предлагали представить их в виде разветвлений на дороге, по которой двигается интерпретатор JavaScript. Циклы можно представить как разворот на дороге, возвращающий обратно, который заставляет интерпретатор многократно проходить через один и тот же участок программного кода.

В языке JavaScript имеется четыре цикла: while, do/while, for и for/in. Каждому из них посвящен один из следующих подразделов. Одно из обычных применений циклов - обход элементов массива.

Цикл while

Оператор if является базовым условным оператором в языке JavaScript, а базовым циклом для JavaScript можно считать цикл while. Он имеет следующий синтаксис:

while (выражение) { инструкция }

Цикл while начинает работу с вычисления выражения. Если это выражение имеет ложное значение, интерпретатор пропускает инструкцию, составляющую тело цикла, и переходит к следующей инструкции в программе. Если выражение имеет истинное значение, то выполняется инструкция, образующая тело цикла, затем управление передается в начало цикла и выражение вычисляется снова. Иными словами, интерпретатор снова и снова выполняет инструкцию тела цикла, пока значение выражения остается истинным. Обратите внимание, что имеется возможность организовать бесконечный цикл с помощью синтаксиса while(true).

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

Кроме того, если изменяемая переменная (или переменные) присутствует в выражении, значение выражения может меняться при каждом проходе цикла. Это важно, т.к. в противном случае выражение, значение которого было истинным, никогда не изменится и цикл никогда не завершится! Ниже приводится пример цикла while, который выводит числа от 0 до 9:

Var count = 0; while (count

Как видите, в начале переменной count присваивается значение 0, а затем ее значение увеличивается каждый раз, когда выполняется тело цикла. После того как цикл будет выполнен 10 раз, выражение вернет false (т.е. переменная count уже не меньше 10), инструкция while завершится и интерпретатор перейдет к следующей инструкции в программе. Большинство циклов имеют переменные-счетчики, аналогичные count. Чаще всего в качестве счетчиков цикла выступают переменные с именами i, j и k, хотя для того чтобы сделать программный код более понятным, следует давать счетчикам более наглядные имена.

Цикл do/while

Цикл do/while во многом похож на цикл while, за исключением того, что выражение цикла проверяется в конце, а не в начале. Это значит, что тело цикла всегда выполняется как минимум один раз. Эта инструкция имеет следующий синтаксис:

do { инструкция } while (выражение);

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

Function printArray(a) { var len = a.length, i = 0; if (len == 0) console.log("Пустой массив"); else { do { console.log(a[i]); } while (++i

Между циклом do/while и обычным циклом while имеется два отличия. Во-первых, цикл do требует как ключевого слова do (для отметки начала цикла), так и ключевого слова while (для отметки конца цикла и указания условия). Во-вторых, в отличие от цикла while, цикл do завершается точкой с запятой. Цикл while необязательно завершать точкой с запятой, если тело цикла заключено в фигурные скобки.

Цикл for

Цикл for представляет собой конструкцию цикла, которая часто оказывается более удобной, чем цикл while. Цикл for упрощает конструирование циклов, следующих шаблону, общему для большинства циклов. Большинство циклов имеют некоторую переменную-счетчик. Эта переменная инициализируется перед началом цикла и проверяется перед каждой итерацией. Наконец, переменная-счетчик инкрементируется или изменяется каким-либо другим образом в конце тела цикла, непосредственно перед повторной проверкой переменной. Инициализация, проверка и обновление - это три ключевых операции, выполняемых с переменной цикла. Инструкция for делает эти три шага явной частью синтаксиса цикла:

for(инициализация; проверка; инкремент) { инструкция }

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

Проще всего объяснить работу цикла for, показав эквивалентный ему цикл while:

инициализация; while(проверка) { инструкция; инкремент; }

Другими словами, выражение инициализации вычисляется один раз перед началом цикла. Это выражение, как правило, является выражением с побочными эффектами (обычно присваиванием). В JavaScript также допускается, чтобы выражение инициализации было инструкцией объявления переменной var, поэтому можно одновременно объявить и инициализировать счетчик цикла.

Выражение проверки вычисляется перед каждой итерацией и определяет, будет ли выполняться тело цикла. Если результатом проверки является истинное значение, выполняется инструкция, являющаяся телом цикла. В конце цикла вычисляется выражение инкремент. Чтобы использование этого выражения имело смысл, оно должно быть выражением с побочными эффектами. Обычно это либо выражение присваивания, либо выражение, использующее оператор ++ или --.

Вывести числа от 0 до 9 можно также с помощью цикла for, как показано ниже, в противовес эквивалентному циклу while, показанному в примере ранее:

For (var count = 0; count

Конечно, циклы могут быть значительно более сложными, чем в этих простых примерах, и иногда в каждой итерации цикла изменяется несколько переменных. Эта ситуация - единственный случай в JavaScript, когда часто применяется оператор «запятая» - он позволяет объединить несколько выражений инициализации и инкрементирования в одно выражение, подходящее для использования в цикле for:

Var i,j; for (i = 0, j = 0; i

Цикл for/in

Цикл for/in использует ключевое слово for, но он в корне отличается от обычного цикла for. Цикл for/in имеет следующий синтаксис:

for (переменная in объект) { инструкция }

В качестве переменной здесь обычно используется имя переменной, но точно так же можно использовать инструкцию var, объявляющую единственную переменную. Параметр объект - это выражение, возвращающее объект. И как обычно, инструкция - это инструкция или блок инструкций, образующих тело цикла.

Для обхода элементов массива естественно использовать обычный цикл for:

Var arr = ; for (var i = 0; i

Инструкция for/in так же естественно позволяет выполнить обход свойств объекта:

// Создадим новый объект var obj = {name:"Alex", password:"12345" }; for (var i in obj) { // Вывести значение каждого свойства объекта console.log(obj[i]); }

Чтобы выполнить инструкцию for/in, интерпретатор JavaScript сначала вычисляет выражение объект. Если оно возвращает значение null или undefined, интерпретатор пропускает цикл и переходит к следующей инструкции. Если выражение возвращает простое значение, оно преобразуется в эквивалентный объект-обертку. В противном случае выражение возвращает объект. Затем интерпретатор выполняет по одной итерации цикла для каждого перечислимого свойства объекта. Перед каждой итерацией интерпретатор вычисляет значение выражения, сохраняет его в переменной и присваивает ему имя свойства (строковое значение).

Что отступы можно считать показателем сложности кода (хотя и довольно грубым). Сами по себе отступы нейтральны, так как они – лишь средство форматирования текста, но всё дело в том, что они используются для выделения особых блоков программ, например – управляющих конструкций. Читая код и натыкаясь на отступ, программист вынужден принимать во внимание то, на что указывает отступ, держать в памяти контекст, в котором существует выделенный блок. Это, естественно, повторяется, если в выделенном отступами участке кода появляется ещё один особый фрагмент.

Если не обращать внимание на содержание текстов, то вот как обычно выглядит сложный код, участки которого похожи на лежащие на боку буквы «V», и простой код, блок которого, если не учитывать разную длину строк, похож на прямоугольник.

Чем больше отступов – тем сложнее обычно и код

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

Возьмём, например, массивы. Традиционно для их обработки используют различные виды циклов. Понятия «массив» и «цикл» неразрывно связаны в сознании многих программистов. Однако цикл – конструкция весьма неоднозначная. Вот что пишет о циклах Луис Атенцио в книге «Функциональное программирование в JavaScript »: «Цикл – это жёсткая управляющая конструкция, которую нелегко использовать повторно и сложно состыковать с другими операциями. Кроме того, использование циклов означает появление кода, который меняется с каждой итерацией.»

Можно ли избавиться от циклов?

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

Циклы

Мы уже говорили о том, что управляющие конструкции, вроде циклов, усложняют код. Но почему это так? Взглянем на то, как работают циклы в JavaScript.

В JS существует несколько способов организации циклов. В частности, один из базовых видов циклов – это while . Прежде чем вникать в подробности, немного подготовимся. А именно – создадим функцию и массив, с которым будем работать.

// oodlify:: String -> String function oodlify(s) { return s.replace(//g, "oodle"); } const input = [ "John", "Paul", "George", "Ringo", ];
Итак, имеется массив, каждый элемент которого мы собираемся обработать с помощью функции oodlify . Если использовать для решения этой задачи цикл while , получится следующее:

Let i = 0; const len = input.length; let output = ; while (i < len) { let item = input[i]; let newItem = oodlify(item); output.push(newItem); i = i + 1; }
Обратите внимание на то, что мы, для того, чтобы отслеживать текущий обрабатываемый элемент массива, используем счётчик i . Необходимо инициализировать его нулём и увеличивать на единицу в каждой итерации цикла. Кроме того, нужно сравнивать его с длиной массива, с len , для того, чтобы знать, когда надо прекратить работу.

Этот шаблон настолько распространён, что в JavaScript имеется более простой способ организовать подобную конструкцию – цикл for . Такой цикл позволит решить ту же задачу следующим образом:

Const len = input.length; let output = ; for (let i = 0; i < len; i = i + 1) { let item = input[i]; let newItem = oodlify(item); output.push(newItem); }
Цикл for – полезная конструкция, так как благодаря ей все стандартные вспомогательные операции со счётчиком выносятся в верхнюю часть блока. Используя while , легко забыть о необходимости инкрементировать счётчик i , что приведёт к запуску бесконечного цикла. Определённо, цикл for гораздо удобнее цикла while . Но давайте притормозим и взглянем на то, чего пытается достичь наш код. Мы хотим обработать, с помощью функции oodlify() , каждый элемент массива и поместить то, что получилось, в новый массив. Сам по себе счётчик, используемый для доступа к элементам массива, нас не интересует.

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

Let output = ; for (let item of input) { let newItem = oodlify(item); output.push(newItem); }
Код выглядит гораздо чище. Обратите внимание на то, что тут нет ни счётчика, ни операции сравнения. При таком подходе даже не нужно обращаться к конкретному элементу массива по индексу. Цикл for…of берёт на себя все вспомогательные операции.

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

Трансформация массивов

Цикл for…of выглядит гораздо чище, чем цикл for , но и с ним в коде имеется немало вспомогательных элементов. Так, надо инициализировать массив output и в каждой итерации цикла вызывать метод push() . Код можно сделать ещё более компактным и выразительным, но прежде чем этим заняться, давайте немного расширим демонстрационную задачу. Как быть, если с помощью функции oodlify() надо обработать два массива?

Const fellowship = [ "frodo", "sam", "gandalf", "aragorn", "boromir", "legolas", "gimli", ]; const band = [ "John", "Paul", "George", "Ringo", ];
Вполне очевидное решение – использовать два цикла и обработать массивы в них:

Let bandoodle = ; for (let item of band) { let newItem = oodlify(item); bandoodle.push(newItem); } let floodleship = ; for (let item of fellowship) { let newItem = oodlify(item); floodleship.push(newItem); }
Вполне рабочий вариант. А код, который работает – это гораздо лучше, чем код, который не решает поставленную перед ним задачу. Но два очень похожих фрагмента кода не особенно хорошо согласуются с принципом разработки ПО DRY . Код можно подвергнуть рефакторингу для того, чтобы снизить число повторений.

Следуя этой идее, создаём такую функцию:

Function oodlifyArray(input) { let output = ; for (let item of input) { let newItem = oodlify(item); output.push(newItem); } return output; } let bandoodle = oodlifyArray(band); let floodleship = oodlifyArray(fellowship);
Выглядит это гораздо лучше, но что, если имеется ещё одна функция, с помощью которой мы тоже хотим обрабатывать элементы массивов?

Function izzlify(s) { return s.replace(/+/g, "izzle"); }
Теперь функция oodlifyArray() не поможет. Однако, если создать ещё одну подобную функцию, на этот раз – izzlufyArray() , мы опять повторимся. Всё же, создадим такую функцию и сравним её с oodlifyArray() :

Function oodlifyArray(input) { let output = ; for (let item of input) { let newItem = oodlify(item); output.push(newItem); } return output; } function izzlifyArray(input) { let output = ; for (let item of input) { let newItem = izzlify(item); output.push(newItem); } return output; }
Эти две функции невероятно похожи. Может быть, обобщим шаблон, которому они следуют? Наша цель заключается следующем: «Имеются массив и функция. Нужно получить новый массив, в который будут записаны результаты обработки каждого из элементов исходного массива с помощью функции». Подобный способ обработки массивов называют «отображением» или «трансформацией» (mapping в англоязычной терминологии). Функции, которые выполняют подобные операции, обычно называют «map». Вот как выглядит наш вариант такой функции:

Function map(f, a) { let output = ; for (let item of a) { output.push(f(item)); } return output; }
Хотя цикл теперь и вынесен в отдельную функцию, совсем избавиться от него не получилось. Если пойти до конца и попытаться обойтись совсем без циклических конструкций, можно написать рекурсивный вариант того же самого:

Function map(f, a) { if (a.length === 0) { return ; } return .concat(map(f, a.slice(1))); }
Рекурсивное решение выглядит весьма элегантно. Всего пара строчек кода и минимум отступов. Но рекурсивные реализации алгоритмов обычно используют с большой осторожностью, кроме того, они отличаются плохой производительностью в старых браузерах. И, на самом деле, нам совершено не нужно самим писать функцию реализации операции отображения, если только на то нет веской причины. То, что делает наша функция map – задача настолько распространённая, что в JavaScript имеется встроенный метод map() . Если воспользоваться этим методом, код окажется вот таким:

Let bandoodle = band.map(oodlify); let floodleship = fellowship.map(oodlify); let bandizzle = band.map(izzlify); let fellowshizzle = fellowship.map(izzlify);
Обратите внимание на то, что здесь вообще нет ни отступов, ни циклов. Конечно, при обработке данных, где-то в недрах JavaScript, могут использоваться циклы, но это уже – не наша забота. Теперь код получился и сжатым, и выразительным. Кроме того, он проще.

Почему этот код проще? Может показаться, что вопрос это глупый, но подумайте об этом. Он проще потому что он короче? Нет. Компактность кода – это не признак простоты. Он проще потому что при таком подходе мы разбили задачу на части. А именно, есть две функции, которые работают со строками: oodlify и izzlify . Эти функции не должны ничего знать о массивах или о циклах. Имеется ещё одна функция – map , которая работает с массивами. При этом ей совершенно безразлично, какого типа данные в массиве, или то, что именно мы хотим с этими данными делать. Она просто исполняет любую переданную ей функцию, передавая ей элементы массива. Вместо того, чтобы всё смешивать, мы разделили обработку строк и обработку массивов. Именно поэтому итоговый код оказался проще.

Свёртка массивов

Итак, функция map весьма полезна, но она не перекрывает все варианты обработки массивов, в которых используются циклы. Она хороша в случаях, когда на основе некоего массива нужно создать новый, имеющий ту же длину. Но что, если нам нужно, например, сложить все элементы числового массива? Или, если надо найти самую короткую строку в списке? Иногда требуется обработать массив и, фактически, сформировать на его основе одно значение.

Рассмотрим пример. Предположим, имеется список объектов, каждый из которых представляет супергероя:

Const heroes = [ {name: "Hulk", strength: 90000}, {name: "Spider-Man", strength: 25000}, {name: "Hawk Eye", strength: 136}, {name: "Thor", strength: 100000}, {name: "Black Widow", strength: 136}, {name: "Vision", strength: 5000}, {name: "Scarlet Witch", strength: 60}, {name: "Mystique", strength: 120}, {name: "Namora", strength: 75000}, ];
Надо найти самого сильного героя. Для того, чтобы это сделать, можно воспользоваться циклом for…of:

Let strongest = {strength: 0}; for (let hero of heroes) { if (hero.strength > strongest.strength) { strongest = hero; } }
Учитывая все обстоятельства, этот код не так уж и плох. Мы обходим в цикле массив, храня объект самого сильного из просмотренных героев в переменной strongest . Для того, чтобы яснее увидеть шаблон работы с массивом, представим, что ещё надо выяснить общую силу всех героев.

Let combinedStrength = 0; for (let hero of heroes) { combinedStrength += hero.strength; }
В каждом из этих двух примеров имеется рабочая переменная, которую инициализируют перед запуском цикла. Затем, в каждой итерации, обрабатывают один элемент массива и обновляют переменную. Для того, чтобы выделить схему работы ещё лучше, вынесем операции, выполняемые внутри циклов, в функции, и переименуем переменные для того, чтобы подчеркнуть схожесть производимых действий.

Function greaterStrength(champion, contender) { return (contender.strength > champion.strength) ? contender: champion; } function addStrength(tally, hero) { return tally + hero.strength; } const initialStrongest = {strength: 0}; let working = initialStrongest; for (hero of heroes) { working = greaterStrength(working, hero); } const strongest = working; const initialCombinedStrength = 0; working = initialCombinedStrength; for (hero of heroes) { working = addStrength(working, hero); } const combinedStrength = working;
Если всё переписано так, как показано выше, два цикла оказываются очень похожими. Единственное, что их отличает – это вызываемые в них функции и начальные значения переменных. В обоих циклах массив сворачивается до одного значения. В англоязычной терминологии такая операция называется «reducing». Поэтому создадим функцию reduce , реализующую обнаруженный шаблон.

Function reduce(f, initialVal, a) { let working = initialVal; for (let item of a) { working = f(working, item); } return working; }
Надо отметить, что, как и в случае с шаблоном функции map , шаблон функции reduce распространён так широко, что JavaScript предоставляет его в качестве встроенного метода массивов. Поэтому свой метод, если на это нет особой причины, писать не нужно. С использованием стандартного метода код будет выглядеть так:

Const strongestHero = heroes.reduce(greaterStrength, {strength: 0}); const combinedStrength = heroes.reduce(addStrength, 0);
Если присмотреться к итоговому результату, можно обнаружить, что получившийся код ненамного короче того, что был раньше, экономия совсем невелика. Если бы мы использовали функцию reduce , написанную самостоятельно, то, в целом, код получился бы больше. Однако, наша цель заключается не в том, чтобы писать короткий код, а в том, чтобы уменьшать его сложность. Итак, уменьшили ли мы сложность программы? Могу утверждать, что уменьшили. Мы отделили код циклов от кода, который обрабатывает элементы массива. В результате отдельные участки программы стали более независимыми. Код получился проще.

На первый взгляд функция reduce может показаться довольно примитивной. В большинстве примеров использования этой функции демонстрируются простые вещи, вроде сложения всех элементов числовых массивов. Однако, нигде не сказано, что значение, которое возвращает reduce , должно быть примитивным типом. Это может быть объект или даже другой массив. Когда я впервые это понял, это меня поразило. Можно, например, написать реализацию операции отображения или фильтрации массива с использованием reduce . Предлагаю вам самим это попробовать.

Фильтрация массивов

Итак, имеется функция map для выполнения операций над каждым элементом массива. Есть функция reduce , которая позволяет сжать массив до единственного значения. Но что, если нужно извлечь из массива лишь некоторые его элементы? Для того, чтобы эту идею исследовать, расширим список супергероев, добавим туда некоторые дополнительные данные:

Const heroes = [ {name: "Hulk", strength: 90000, sex: "m"}, {name: "Spider-Man", strength: 25000, sex: "m"}, {name: "Hawk Eye", strength: 136, sex: "m"}, {name: "Thor", strength: 100000, sex: "m"}, {name: "Black Widow", strength: 136, sex: "f"}, {name: "Vision", strength: 5000, sex: "m"}, {name: "Scarlet Witch", strength: 60, sex: "f"}, {name: "Mystique", strength: 120, sex: "f"}, {name: "Namora", strength: 75000, sex: "f"}, ];
Теперь предположим, что имеется две задачи:

Найти всех героев-женщин.
Найти всех героев, сила которых превышает 500.

К решению этих задач вполне можно подойти, используя старый добрый цикл for…of:

Let femaleHeroes = ; for (let hero of heroes) { if (hero.sex === "f") { femaleHeroes.push(hero); } } let superhumans = ; for (let hero of heroes) { if (hero.strength >= 500) { superhumans.push(hero); } }
В общем-то, выглядит это вполне пристойно. Но тут невооруженным глазом виден повторяющийся шаблон. На самом деле, циклы совершенно одинаковые, различаются они только блоками if . Что если вынести эти блоки в функции?

Function isFemaleHero(hero) { return (hero.sex === "f"); } function isSuperhuman(hero) { return (hero.strength >= 500); } let femaleHeroes = ; for (let hero of heroes) { if (isFemaleHero(hero)) { femaleHeroes.push(hero); } } let superhumans = ; for (let hero of heroes) { if (isSuperhuman(hero)) { superhumans.push(hero); } }
Функции, которые возвращают только true или false иногда называют предикатами. Мы используем предикат для принятия решения о том, надо ли сохранить в новом массиве очередное значение из массива heroes .

То, как мы переписали код, сделало его длиннее. Но, после выделения функций-предикатов, стало лучше видно повторяющиеся участки программы. Создадим функцию, которая позволит от этих повторений избавиться:

Function filter(predicate, arr) { let working = ; for (let item of arr) { if (predicate(item)) { working = working.concat(item); } } return working; } const femaleHeroes = filter(isFemaleHero, heroes); const superhumans = filter(isSuperhuman, heroes);
Здесь, как и в случае со встроенными функциями map и reduce , в JavaScript имеется то же самое, что мы тут написали, в виде стандартного метода filter объекта Array . Поэтому писать собственную функцию, без явной необходимости, не нужно. С использованием стандартных средств код будет выглядеть так:

Const femaleHeroes = heroes.filter(isFemaleHero); const superhumans = heroes.filter(isSuperhuman);
Почему такой подход гораздо лучше, чем использование цикла for…of ? Подумайте о том, как этим можно воспользоваться на практике. У нас имеется задача вида: «Найти всех героев, которые…». Как только выяснилось, что можно решить задачу с использованием стандартной функции filter , работа упрощается. Всё, что нужно – сообщить этой функции, какие именно элементы нас интересуют. Делается это через написание одной компактной функции. Не нужно заботиться ни об обработке массивов, ни о дополнительных переменных. Вместо этого мы пишем крошечную функцию-предикат и задача решена.

И, как и в случае с другими функциями, которые работают с массивами, использование filter позволяет выразить больше информации в меньшем объёме кода. Не нужно читать весь стандартный код цикла для того, чтобы разобраться в том, что именно мы фильтруем. Вместо этого всё, что нужно понять, описано прямо при вызове метода.

Поиск в массивах

Фильтрация – весьма полезная операция. Но что, если надо найти лишь одного супергероя из списка? Скажем, нас интересует Black Widow. Функцию filter вполне можно использовать для решения этой задачи:

Function isBlackWidow(hero) { return (hero.name === "Black Widow"); } const blackWidow = heroes.filter(isBlackWidow);
Главная проблема тут заключается в том, что подобное решение не отличается эффективностью. Метод filter просматривает каждый элемент массива. Однако, известно, что в массиве лишь одного героя зовут Black Widow, а это значит, что можно остановиться после того, как этот герой найден. В то же время, функциями-предикатами удобно пользоваться. Поэтому напишем функцию find , которая найдёт и вернёт первый подходящий элемент:

Function find(predicate, arr) { for (let item of arr) { if (predicate(item)) { return item; } } } const blackWidow = find(isBlackWidow, heroes);
Тут, опять же, надо сказать, что в JavaScript есть встроенная функция, которая делает в точности то, что нужно:

Const blackWidow = heroes.find(isBlackWidow);
В итоге, как и прежде, удалось выразить нашу идею более сжато. С использованием встроенной функции find , задача поиска определённого элемента сводится к одному вопросу: «По какому признаку можно определить, что искомый элемент обнаружен?» При этом не надо беспокоиться о деталях.

О функциях reduce и filter

Читатели заметили, что неэффективно дважды проходиться по списку героев в вышеприведённых примерах к функциям reduce и filter . Использование оператора расширения (spread operator) из ES2015 позволяет удобно скомбинировать две функции, занятых свёрткой массива, в одну. Вот изменённый фрагмент кода, который позволяет проходиться по массиву лишь один раз:

Function processStrength({strongestHero, combinedStrength}, hero) { return { strongestHero: greaterStrength(strongestHero, hero), combinedStrength: addStrength(combinedStrength, hero), }; } const {strongestHero, combinedStrength} = heroes.reduce(processStrength, {strongestHero: {strength: 0}, combinedStrength: 0});
Не могу не заметить, что эта версия будет немного сложнее, чем та, в которой по массиву проходились дважды, но, если массив огромен, сокращение числа проходов по нему может оказаться весьма кстати. В любом случае, порядок сложности алгоритма остаётся O(n).

Итоги

Полагаю, представленные здесь функции – это отличный пример того, почему продуманно выбранные абстракции и пользу приносят, и в коде выглядят хорошо. Допустим, что мы используем встроенные функции везде, где это возможно. В каждом случае получается следующее:

Мы избавляемся от циклов, что делает код более сжатым и, скорее всего, более лёгким для чтения.
Используемый шаблон описывается с использованием подходящего имени стандартного метода. То есть – map , reduce , filter , или find .
Масштаб задачи уменьшается. Вместо самостоятельного написания кода для обработки массива, нужно лишь указать стандартной функции на то, что надо с массивом сделать.

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

На самом деле, если обо всём этом задуматься, можно прийти к выводу, который, в первый момент, кажется удивительным. Оказывается, если использовать лишь четыре вышеописанных шаблона обработки массивов, можно убрать из JS-кода практически все циклы. Ведь что делается в практически каждом цикле, написанном на JavaScript? В нём либо обрабатывается, либо конструируется некий массив, либо делается и то и другое. Кроме того, в JS есть и другие стандартные функции для работы с массивами, вы вполне можете изучить их самостоятельно. Избавление от циклов практически всегда позволяет уменьшить сложность программ и писать код, который легче читать и поддерживать.

Уважаемые JavaScript-разработчики, а у вас на примете есть стандартные функции, которые позволяют улучшить код, избавившись от каких-нибудь распространённых «самописных» конструкций?

Теги: Добавить метки

Циклы используются для того, чтобы некоторый участок кода выполнился несколько раз подряд.

Зачем это нужно - представьте, что вам нужно возвести в квадрат 100 элементов массива. Если обращаться к каждому элементу отдельно по его ключу - это займет 100 строчек кода, и для того, чтобы написать этого код, нужно будет потратить довольно много времени.

Но это не нужно - у нас есть возможность сделать так, чтобы JavaScript за нас выполнил некоторую операцию нужное количество раз . Например, возвел все элементы массива в квадрат.

Делается это с помощью циклов .

Цикл while

Цикл while будет выполняться до тех пор, пока верно (истинно) выражение, переданное ему параметром. Смотрите синтаксис:

While (пока выражение истинно) { выполняем этот код циклически; в начале каждого цикла проверяем выражение в круглых скобках } /* Цикл закончится, когда выражение перестанет быть истинным. Если оно было ложным изначально - то он не выполнится ни разу! */

В принципе, цикл while может выполняться бесконечно (но это приведет к зависанию скрипта!), достаточно передать ему выражение, которое никогда не станет ложным . Например, так:

Давайте последовательно выведем с помощью цикла while числа от одного до пяти:

Var i = 0; //счетчик цикла while (i < 5) { /* С помощью оператора ++ увеличиваем i на единицу при каждом проходе цикла. */ i++; alert(i); }

Обратите внимание на переменную i – она является так называемым счетчиком цикла . Счетчики используются для того, чтобы подсчитывать, сколько раз выполнился цикл. Кроме того, они выполняют вспомогательную роль - в нашей задаче мы использовали счетчик, чтобы вывести цифры от 1 до 5.

Для счетчиков принято использовать буквы i , j и k .

Цикл for

Цикл for является альтернативой while . Он более сложен для понимания, но чаще всего его любят больше, чем while за то, что он занимает меньше строчек.

For (начальные команды; условие окончания цикла; команды после прохода цикла) { тело цикла }

Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, пример: i = 0 .

Условие окончания цикла - пока оно истинное , цикл будет работать, пример: i .

Команды после прохода цикла - это команды, которые будут выполнятся каждый раз при окончании прохода цикла. Обычно там увеличивают счетчики, например: i++ .

Давайте с помощью цикла for выведем последовательно числа от 0 до 9:

/* В начале цикла i будет равно нулю, цикл будет выполнятся пока i < 10, после каждого прохода к i прибавляется единица: */ for (var i = 0; i < 10; i++) { alert(i); //выведет 0, 1, 2... 9 }

Цикл без тела

Фигурные скобки в циклах можно не указывать - в этом случае цикл выполнит только одну строку под ним (не рекомендую так делать, часто приводит к ошибкам):

For (var i = 0; i < 10; i++) //<--- точки с запятой нет alert(i); //выведет 0, 1, 2... 9

А вот если после ) поставить точку с запятой - цикл закроется и следующая строка в него не попадет, получится так называемый цикл без тела, который в нашем случае просто прокрутится и в результате изменит значение переменной i :

For (var i = 0; i < 10; i++); //<--- точка с запятой есть alert(i); //выведет 9

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

Несколько команд в цикле for

Если нам необходимо выполнить несколько команд в круглых скобках - указываем их через запятую:

For (var i = 0, j = 2; i

Давайте разберем приведенный цикл: до прохода цикла выполнятся две команды: var i = 0, j = 2 (обратите внимание на то, что var тут пишется один раз), а после каждой итерации - целых три: i++, j++, i = i + j .

Этот пример с точки зрения программирования никакой особой пользы не несет, просто схематически показывает, что так можно делать. Запомните его, в дальнейшем это вам пригодится.

Цикл for для массивов

С помощью цикла for можно последовательно перебрать элементы массива. Делается это следующим образом:

<= arr.length-1; i++) { alert(arr[i]); //выведет 1, 2, 3, 4, 5 }

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

Можно не отнимать единицу, а место <= сделать < :

Var arr = ; for (var i = 0; i < arr.length; i++) { alert(arr[i]); //выведет 1, 2, 3, 4, 5 }

Цикл for-in

Для перебора объекта используется так называемый цикл for-in . Давайте посмотрим, как он работает.

Пусть у нас дан такой объект:

Var obj = {Коля: 200, Вася: 300, Петя: 400};

Давайте выведем его ключи. Для этого используем такую конструкцию: for (key in obj) , где obj - это объект, который мы перебираем, а key - это переменная, в которую последовательно будут ложится ключи объекта (ее название может быть любым, какое придумаете - такое и будет).

То есть в данном цикле не надо указывать условие окончания - он будет перебирать ключи объекта, пока они не закончатся.

Итак, вот так мы выведем все ключи объекта (по очереди):

Var obj = {Коля: 200, Вася: 300, Петя: 400}; for (key in obj) { alert(key); //выведет "Коля", "Вася", "Петя" }

Если нам нужны не ключи, а значения, нужно обратиться к нашему объекту по ключу, вот так: obj .

Как это работает: в переменной key сначала будет "Коля", то есть obj в данном случае все равно, что obj["Коля"] , при следующем проходе цикла в переменной key будет "Вася" и так далее.

Итак, выведем все элементы объекта:

Var obj = {Коля: 200, Вася: 300, Петя: 400}; for (key in obj) { alert(obj); //выведет 200, 300, 400 }

Инструкция break

Иногда нам необходимо прервать выполнение цикла досрочно, в случае с циклом for это значит до того, как цикл переберет все элементы массива.

Зачем такое может понадобится? Например, перед нами стоит задача выводить элементы массива до тех пор, пока не встретится число 3. Как только встретится - цикл должен завершить свою работу.

Такое можно сделать с помощью инструкции break - если выполнение цикла дойдет до нее, цикл закончит свою работу.

Давайте решим приведенную выше задачу - оборвем цикл, как только нам встретится число 3:

Var arr = ; for (var i = 0; i < arr.length; i++) { if (arr[i] === 3) { break; //выходим из цикла } else { alert(arr[i]); } }

Инструкция continue

Существует также инструкция continue , при достижении которой цикл начинает новую итерацию. Иногда может быть полезна для упрощения кода, хотя практически всегда задачу можно решить и без нее.