for...of.md

for...of

JavaScriptの初心者がよく経験するエラーは、for...inが配列要素を反復しないということです。代わりに渡されたオブジェクトのkeysを反復します。これを以下の例で示します。ここでは9,2,5の表示が期待されていますが、インデックス0,1,2が表示されます。

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

これは、for...ofがTypeScript(およびES6)に存在する理由の1つです。次のように、配列を繰り返し処理して、期待どおりに要素をログに出力します。

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

TypeScriptでは、同様に文字列に対してfor...ofを使っても問題ありません：

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

ES6未満をターゲットにした場合、TypeScriptは標準的なfor(var i = 0; i < list.length; i++)のループを生成します。たとえば、前の例で生成されるものを次に示します。

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

// becomes //

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

for...ofを使うと、意図がより明確になりますし、書くべきコードの量が減ります(そして、ひねり出さないといけない変数名も)。

制限事項

ES6以上をターゲットにしていない場合、生成されたコードはオブジェクトにlengthというプロパティが存在していることと、数値によってインデックスされていること(obj[2]など)を前提としています。したがって、これらのレガシーなJSエンジンでは、stringとarrayのみサポートされています。

もしTypeScriptが配列や文字列を使用していないことを知った場合は、明確なエラーを出力します:"is not an array type or a string type"。

let articleParagraphs = document.querySelectorAll("article > p");
// Error: Nodelist is not an array type or a string type
for (let paragraph of articleParagraphs) {
    paragraph.classList.add("read");
}

配列や文字列であると知っているものにだけ for ... ofを使ってください。この制限は、TypeScriptの将来のバージョンでは削除される可能性があることに注意してください。

要約

配列の反復処理を何回書くことになるかを知ったらあなたは驚くでしょう。次にそれをする時に、for...ofを使ってください。あなたのコードを次にレビューする人が喜ぶかもしれません。