for...of¶

Распространенная ошибка, с которой сталкиваются начинающие JavaScript разработчики - это то, что for...in для массива не итерирует элементы массива. Вместо этого итерация происходит по ключам переданного объекта. Это показано на примере ниже. Здесь мы ожидаем 9,2,5, но получаем индексы 0,1,2:

1
2
3
4

var someArray = [9, 2, 5];
for (var item in someArray) {
    console.log(item); // 0,1,2
}

Это первая причина, по которой for...of существует в TypeScript (и ES6). Следующая итерация массива корректно выводит члены массива, как ожидалось:

1
2
3
4

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item); // 9,2,5
}

Точно также TypeScript не испытывает затруднений при итерировании строки посимвольно, используя for...of:

1
2
3
4

var hello = "is it me you're looking for?";
for (var char of hello) {
    console.log(char); // is it me you're looking for?
}

Генерация JS¶

Для версий JS до ES6 TypeScript генерирует стандартный тип цикла for (var i = 0; i < list.length; i++). Например, вот что генерируется для нашего предыдущего примера:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item);
}

// становится //

for (var _i = 0; _i < someArray.length; _i++) {
    var item = someArray[_i];
    console.log(item);
}

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

Ограничения¶

Для версий JS до ES6 сгенерированный код предполагает, что свойство length существует на объекте и этот объект может быть проиндексирован по номерам, например, obj[2]. Это поддерживается только для строк и массивов для устаревших движков JS.

Если вы используете for...of не на массиве или строке, TypeScript сообщит об этом ошибкой "is not an array type or a string type".

1
2
3
4
5
6
7

let articleParagraphs = document.querySelectorAll(
    'article > p'
);
// Ошибка: Nodelist is not an array type or a string type
for (let paragraph of articleParagraphs) {
    paragraph.classList.add('read');
}

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

Заключение¶

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

Комментарии