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

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

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

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

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

var hello="is it me you're looking for?";for (var charof hello) {console.log(char);// 次のものが出力されます: is it me you're looking for?}

生成されるJavaScript

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

var someArray= [9,2,5];for (var itemof someArray) {console.log(item);}// このようになります //for (var _i=0; _i<someArray.length; _i++) {var item= someArray[_i];console.log(item);}

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

制限事項

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

もしstringやarray以外でfor...ofを使用している場合は、TypeScriptはわかりやすいエラーを出力します: "array型またはstring型ではありません"。

let articleParagraphs = document.querySelectorAll("article > p");// Error: これはarray型まはたstring型ではありませんfor (let paragraph of articleParagraphs) {    paragraph.classList.add("read");}

stringやarrayであることが確実である場合だけfor ... ofを使ってください。この制限は、TypeScriptの将来のバージョンでは削除される可能性がありますので、注意してください。

まとめ

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

最終更新2 年前