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?}
ES6未満をターゲットにコンパイルした場合、TypeScriptは標準的なfor(var i = 0; i < list.length; i++)
のループを生成します。たとえば、前の例で生成されるものを次に示します。
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
を使うと、開発者の意図がより明確になりますし、コードの量が減ります(そして、頭からひねり出さないといけない変数名も減ります)。
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
を使ってください。あなたのコードのレビュアーが喜ぶかもしれません。