Как стать автором
Обновить

CoffeeScript: Подробное руководство по циклам

Время на прочтение11 мин
Количество просмотров31K
CoffeeScript: Подробное руководство по циклам

Как известно, CoffeeScriptпредлагает несколько иной набор управляющих конструкций, нежели JavaScript.



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









В этой статье я попытаюсь максимально подробно рассказать о принципах работы с циклами в CoffeeScript и тесно связанными с ними управляющими конструкциями.


Весь код сопровождается сравнительными примерами на JavaScript.




Инструкция for-in


Начнем с самого простого цикла for:



for (var i = 0; i < 10; i++) {
//...
}

В CoffeeScript он будет записан так:



for i in [0...10]

Для определения количества итераций используются диапазоны.
В нашем случае, диапазон от 0...10 означает: выполнить 10 итераций цикла.


Но как быть если требуется задать условие типа i <= 10?



for i in [0..10]

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



В итоге, мы получим следующую запись:



for (var i = 0; i <= 10; i++) {
	//...
}

Если начальное значение диапазона больше конечного [10..0], то мы получим обратный цикл с инвертированным результатом:



for (var i = 10; i >= 0; i--) {
	//..
}

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



for i in [-10..0]

А так, можно заполнить массив отрицательными значениями:

[0..-3]
#[0, -1, -2, -3]

Теперь рассмотрим реальную ситуацию, на примере функции которая, вычисляет факториал числа n:



JavaScript:

var factorial = function(n) {
	var result = 1;

	for (i = 1; i <= n; i++) {
		result *= i;
	}
	return result;
};

factorial(5) //120


CoffeeScript:

factorial = (n) ->
	result = 1
	for i in [1..n]
		result *= i
	result

factorial 5 #120

Как видно из примера выше, код на CoffeeScript более компактный и читабельный по сравнению с JavaScript.



Однако и этот код можно немного упростить:



factorial = (n) ->
	result = 1
	result *= i for i in [1..n]
	result

В этой статье, это не последний пример вычисления факториала, более эффективные способы будет рассмотрены чуть позже.



[...]

Позволю себе немного отступится от темы и упомянуть еще один интересный момент связанный с применением конструкции [...] (slice).



Иногда к чужом коде можно встретить примерно такую конструкцию:



'a,b,c'[''...][0]

Что в конечно счете будет означать следующее:



'a,b,c'.slice('')[0]; //a

На первый взгляд, отличить диапазоны от слайсов довольно сложно. Основных отличий два:



Во-первых, в слайсах можно пропустить одно крайнее значение



[1...]

Здесь мне бы хотелось обратить особое внимание на то, что мы получим после трансляции этого выражения:



var __slice = Array.prototype.slice;
__slice.call(1);

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

fn = -> [arguments...]
fn [1..3] #0,1,2,3


Хочу заметить, что в CoffeeScript для получения списка аргументов функции есть более безопасный и изящный вариант (splats):

fn = (args...) -> args
fn [1..3] #0,1,2,3

Также допустимо использование арифметических и логических операций:

[1 + 1...]


Во-вторых, перед слайсами допустимо наличие объекта



[1..10][...2] #1,2


В-третьих, в слайсах допустимо использование перечислений



[1,2,3...]

В этом примере выполняется простая операция конкатенации:

[1, 2].concat(Array.prototype.slice.call(3));

//[1,2,3]

Более полезный пример:



list1 = [1,2,3]
list2 = [4,5,6]

[list1, list2 ...] #[1,2,3,4,5,6]


List comprehension


Наиболее яркой синтаксической конструкцией для работы с объектами в CoffeeScript, являются списочные выражения (List comprehension).



Пример того, как можно получить список всех вычислений факториала от 1 до n:



factorial = (n) ->
	result = 1
	result *= i for i in [1..n]

factorial 5 #1,2,6,24,120

Теперь давайте рассмотрим более интересный пример и выведем список первых пяти членов объекта location:



(i for i of location)[0...5]
# hash, host, hostname, href, pathname

На JavaScript этот код выглядел бы так:



var list = function() {
	var result = [];

	for (var i in location) {
		result.push(i);
	}

	return result;
}().slice(0, 5);

Для того чтобы вывести список элементов (не индексов) массива нужно задать еще один параметр:



foo = (value for i, value of ['a', 'b', 'c'][0...2]) # [ a, b ]

C одной стороны, списочные выражения представляет собой очень эффективный и компактный способ для работы с объектами. С другой стороны, нужно четко представлять какой код будет получен после трансляции в JavaScript.



К примеру, код выше, который выводит список элементов от 0 до 2, более эффективно можно переписать так:



foo = (value for value in ['a', 'b', 'c'][0...2])

Или так:

['a', 'b', 'c'].filter (value, i) -> i < 2

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

Если пропустить пробел, то мы получим следующее:

['a', 'b', 'c'].filter(value, i)(function() {
  return i < 2;
});

//ReferenceError: value is not defined!

Теперь, вам наверное интересно узнать почему вариант с методом .filter() оказался наиболее предпочтителен?


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



Результат трансляции:


var i, value;

[
	(function() {
		var _ref, _results;
		_ref = ['a', 'b', 'c'].slice(0, 2);
		_results = [];
		for (i in _ref) {
			value = _ref[i];
			_results.push(value);
		}
		return _results;
	})()
];

Скажем прямо, итоговый код ужасен.


Теперь давайте посмотрим на код полученный при использовании метода filter:



['a', 'b', 'c'].filter(function(value, i) {
	return i < 2;
});

Как видите, мы получили идеальный и эффективный код!



Если вы используете CoffeeScript на сервере, то вам не о чем беспокоится, ели нет, то стоит помнить, что IE9- не поддерживает метод filter. Поэтому вы сами должны позаботиться о его наличии!



Оператор then


Как известно, для интерпретации выражений, парсер CoffeeScript анализирует отступы, переводы строк, символы возврата каретки и пр.



Ниже представлен типичный цикл для возведения чисел от 1 до n в степень двойки:



for i in [1...10]
	i * i

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


Однако в реальной ситуации, большинство разработчиков предпочтут записать это выражение в одну строчку:



for i in [1...10] then i * i

В инструкциях while, if/else, и switch/when оператор then указывает анализатору на разделение выражений.



Оператор by


До этого момента мы рассматривали только "простые" циклы, сейчас пора поговорить о циклах с пропусками значений в определенный шаг.



Выведем только четные числа от 2 до 10:



alert i for i in [0..10] by 2 #0,2,4,6,8,10

На JavaScript этот код выглядел бы так:



for (var i = 2; i <= 10; i += 2) {
	alert(i);
}

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



Также мы можем работать не только с числами или элементами массива, но и со строками:



[i for i in 'Hello World' by 3] #H,l,W,l

Операторы by и then могут примеятся совместно:



[for i in 'hello world' by 1 then i.toUpperCase()] # H,E,L,L,O, ,W,O,R,L,D

Хотя этот пример немного надуман и в реальной ситуации шаг "в один" слудует упостить, тем не менее совместная работа операторов by-then позволяет писать очень компактный и эффективный код.



Оператор own


В JavaScript довольно часто используется метод .hasOwnProperty(), который в отличии от оператора in не проверяет свойства в цепочке прототипов объекта:

var object = {
    foo: 1
};

object.constructor.prototype.bar = 1;

console.log('bar' in object); // true
console.log(object.hasOwnProperty('bar')); // false

Рассмотрим пример использования метод .hasOwnProperty() в теле цикла for-in:

var object = {
    foo: 1
};

object.constructor.prototype.toString = function() {
      return this.foo;
};
 
for (i in object) {
      if (object.hasOwnProperty(i)) {
            console.log(i); //foo
      }
}

Несмотря на то, что мы добавили метод .toString() в прототип объекта object, в теле цикла он перечислен не будет. Хотя к нему можно обратиться напрямую:

object.toString() //1

В CoffeeScript для этих целей предусмотрен специальный оператор own:

object = foo: 1
object.constructor::toString = -> @foo

for own i of object
  console.log i #foo

Если нужно использовать второй ключ инструкции for-of , то достаточно его указать через запятую, при этом добавлять еще раз оператор own не нужно:

for own key, value of object
  console.log '#{key}, #{value}' #foo, 1


Условные операторы if/else


Сейчас мне бы хотелось обратить внимаение на один очень важный момент, который связан с совместным использованием циклов с операторами if/else.



Иногда в JavaScript приложениях мы можем встретить подобный код:



for (var i = 0; i < 10; i++) if (i === 1) break;

Не будем обсуждать и тем более осуждать разработчиков, которые так пишут.


Для нас представляет интерес только как корректно записать выражение в CoffeeScript.



Первое что приходит в голову, сделать так:



for i in [0..10] if i is 1 break # Parse error on line 1: Unexpected 'TERMINATOR'

Прекрасно..., однако согласно правилам лексического анализа CoffeeScriptперед инструкцией if будет обнаружено неожидаемое значение терминала, что приведет к ошибке парсинга!



Из предыдущего материала мы помним, что записать выражение в одну строчку мы можем реализовать с помощью оператора then:



for i in [0..10] then if i is 1 break #Parse error on line 1: Unexpected 'POST_IF'

Однако и это не помогло, мы снова видим ошибку парсинга.



Давайте попробуем разобраться...


Дело в том, что инструкция if подчиняется тем же правилам, что и другие инструкции, для которых возможно применение оператора then. А именно, для того чтобы наше выражение правильно распарсилось нужно после выражения с if добавить еще раз оператор then:



for i in [0..10] then if i is 1 then break

Таким образом мы получим следующий код:



for (i = 0; i <= 10; i++) {
	if (i === 1) {
		break;
	}
}

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



if (foo === true) {
	for (i = 0; i <= 10; i++) {
		if (i === 1) {
			break;
		}
	}
}

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



(if i is 1 then break) for i in [0..10] if foo is on

Обратитие внимание, что то в этом случае мы не стали использовать опрератор then, при этом никаких ошибок парсинга не произошло!



Условный оператор when


Мы уже рассмотрели операторы by и then, настало время поговорить о следующем операторе в нашем списке, а именно об условном операторе when.



И начнем мы пожалуй с коррекции предыдущего примера:



if foo is on then for i in [0..10] when i is 1 then break

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



Давайте рассмотрим еще один пример, как можно вывести порядок чисел от 1 до 10 по модулю натурального числа n:



alert i for i in [1..10] when i % 2 is 0

После трансляции в JavaScript код:



for (i = 1; i <= 10; i++) {
	if (i % 2 === 0) {
		alert(i);
	}
}

Как видите использование оператора when дает нам еще больше возможностей для работы с массивами.



Инструкция for-of


Вы уже видели примеры использования инструкции for-of, когда рассматривали списочные выражения. Теперь давайте более подробно познакомимся с инструкцией for-of, которая наряду с for-in позволяет перебирать свойства объекта.



Давайте сразу проведем сравнительную аналогию с инструкцией for-in в JavaScript:



var object = {
	foo: 0,
	bar: 1
};

for (var i in object) {
	alert(key + " : " + object[i]); //0 : foo, 1 : bar
}

Как видите для получения значения свойств объекта мы использовали следующий синтаксис: object[i].


В CoffeeScript же, все проще, во-первых мы можем получить значение объекта используя списочные выражения:



value for key, value of {foo: 1, bar: 2}

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



for key, value of {foo: 1, bar: 2}
	if key is 'foo' and value is 1 then break

В JavaScript тот же результат можно получить так:



var object = {
	foo: 1,
	bar: 2
};

for (key in object) {
	if (key === 'foo' && object[i] === 1) {
		break;
	}
}

Еще один пример эффективного использования for-in:



(if value is 1 then alert "#{key} : #{value}") for key, value of document

#ELEMENT_NODE : 1,
#DOCUMENT_POSITION_DISCONNECTED : 1

Напомню, что самым эффективным способом получения списка свойств объекта, явлется метод keys():



Object.keys obj {foo: 1, bar: 2} # foo, bar

Для того чтобы получить значения свойств, метод keys() нужно использовать совместно с методом map():



object =
	foo: 1
	bar: 2

Object.keys(object).map (key) -> object[key]; # 1, 2


Инструкция while


По мимо инструкций for-of/in в CoffeeScript также реализована инструкция while.



Когда мы рассматривали инструкцию for-in, я обещал показать еще более эффективный способ вычисления фактриала числа n, время как раз подходящее:



factorial = (n) ->
	result = 1
	while n then result *= n--
	result

На вскидку хочу добавить, что самое элегантное решение вычисления факториала следующее:



factorial = (n) -> !n and 1 or n * factorial n - 1


Инструкция loop


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



loop then break if foo is bar


Рельтат трансляции:



while (true) {
	if (foo === bar) {
		break;
	}
}


Инструкция until


Инструкция until аналогична инструкуции while, за одиним исключением, что в выражение добавляется отрицание.


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



expr = /foo/g;
alert "#{array[0]} : #{expr.lastIndex}" until (array = expr.exec('foofoo')) is null

Рельтат трансляции:



var array, expr;
expr = /foo*/g;

while ((array = expr.exec('foofoo')) !== null) {
	alert("" + array[0] + " : " + expr.lastIndex);
}

//foo : 3, foo : 6

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



Инструкция do-while


Скажу сразу, что в CoffeeScript отсутствует реализация инструкции do-while. Однко с помощью нехитрых манипуляций эмитировать ее частичное поведение можно с помощью инструкции loop:



loop
	#...
	break if foo()


Методы массивов (filter, forEach, map и пр.)


Как известно в CoffeeScript доступны абсолютно все те же методы, что и в JavaSctipt.


Разбирать всю эту группу методов нет смысла, рассмотрим лишь общий принцип работы на примере метода map().



Создадим массив из трех элементов и возведем каждый из них в квадрат:



[1..3].map (i) -> i * i

Рельтат трансляции:



[1, 2, 3].map(function(i) {
	return i * i;
});

Рассмотрим еще один пример:



['foo', 'bar'].map (value, i) -> "#{value} : #{i}"
#foo : 0, bar : 1

Вторым аргументом, метод map принимает контекст вызова:



var object = new function() {
	return [0].map(function() {
		return this
	});
};

// [Window map]

Как видите this внутри map указывает на Window, чтобы сменить контекст вызова, сделать это нужно явно:



var object = new function() {
	return [0].map(function() {
		return this;
	}, this);
};
// [Object {}]

В CoffeeScript для этой цели предназначен специальный оператор =>:



object = new -> [0].map (i) => @

Рельтат трансляции:



var object = new function() {
	var _this = this;

	return [0].map(function() {
		return _this;
		}, this);
};

Иными словами используйте эти методы массивов максимально, где это только возможно.



Кроссбраузерную реализация этих методов я разместил на github'e


Реальный пример использования методов map и filter в CoffeeScript, также можно посмотреть в одном из моих проектов на github'e



Инструкция do / Замыкания


Как известно, в JavaScript активно используются замыкания, при этом CoffeeScript тоже не лишает нас этого удовольствия.



Для создания анонимной самозавязывающейся функции в CoffeeScript используется инструкция do, котороая принимает произвольное число аргументов.



Рассмотрим пример:



array = [];
i = 2
while i-- then array[i] = do (i) -> -> i

array[0]() #0
array[1]() #1

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



На JavaScript код выглядел бы так:



var array = [],
i = 2;

while (i--) {
	array[i] = function(i) {
		return function() {
			return i;
		};
	}(i);
}

array[0]() //0
array[1]() //1


Вложенные инструкции


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

Для примера, заполним массив парными элементами от 1 до 3:

list = []

for i in [0..2] 
   for j in [1..2] 
     list.push i

list # [0,0,1,1,2,2]

Как видите нет ничего сложного!

Возможно у вас появится желание записать это в одну строчку. Что же, давайте теперь попробуем упростить запись:

list = []
for i in [0..2] then for j in [1..2] then list.push i

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

А что если нужно добавить перед вторым циклом какое-то выражение?

В качестве примера выведем три пары элементов от 0-3:

list = []

for i in [0..2]
  list.push i
  for j in [1..1]
     list.push i

list #[0,0,1,1,2,2]


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

list = []

for i in [0..2]
  list.push i
  list.push i for j in [1..1]
    
list #[0,1,2,3]


В третьей строке можно использовать как префиксную так и постфиксную форму записи.

ECMASctipt 6


Как вы знаете, в будущем стандарте ECMASctipt 6 планируется имплементировать генераторы, итераторы и возможно списочные выражения. А Firefox уже сейчас поддерживает большую часть драфтового стандарта. И дело в том, что будущий синтаксис ES6 практически более чем полностью не совместим с сегодняшним CoffeeScript.

К примеру инструкция for...of, сейчас носит более общий характер нежели это нужно:

[value for key, value of [1,2,3]]

На выходе мы получим следующее извращенство :

var key, value;

[
  (function() {
    var _ref, _results;
    _ref = [1, 2, 3];
    _results = [];
    for (key in _ref) {
      value = _ref[key];
      _results.push(value);
    }
    return _results;
  })()
];

//[1, 2, 3]

Будущий стандарт дает возможность использовать итерацию через объекты, куда проще:

[for i of [1,2,3]]

Здорово, не правда ли?

Также будет доступны генераторы выражений:

[i * 2 for each (i in [1, 2, 3])];
//2,4,6

Возможным станет и такая запись:

[i * 2 for each (i in [1, 2, 3]) if (i % 2 == 0)];
//2

Станут доступными итераторы:

var object = {
	a: 1,
	b: 2
};

var it = Iterator(lang);

var pair = it.next(); //[a, 1]
	pair = it.next(); //[b, 2]

Итераторы также можно применять совместно с генераторами выражений:

var it = Iterator([1,2,3]);
[i * 2 for (i in it)]; //1, 4, 6


С выходом нового стандарта и многие фишки из CoffeScript перестанут быть таковыми, а разработчикам ядра очевидно предстоит очень много работы, чтобы чтобы удержать «сахарные» позиции. Пожелаем им удачи.
Теги:
Хабы:
Всего голосов 41: ↑38 и ↓3+35
Комментарии72

Публикации

Истории

Работа

Ближайшие события

19 августа – 20 октября
RuCode.Финал. Чемпионат по алгоритмическому программированию и ИИ
МоскваНижний НовгородЕкатеринбургСтавропольНовосибрискКалининградПермьВладивостокЧитаКраснорскТомскИжевскПетрозаводскКазаньКурскТюменьВолгоградУфаМурманскБишкекСочиУльяновскСаратовИркутскДолгопрудныйОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
10 – 11 октября
HR IT & Team Lead конференция «Битва за IT-таланты»
МоскваОнлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн