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?
}
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を使ってください。あなたのコードのレビュアーが喜ぶかもしれません。