for...of
JavaScript初心者がよく経験するエラーは、
for...inが配列の要素を反復しないということです。代わりに渡されたオブジェクトのkeysを反復します。これを以下の例で示します。ここでは9,2,5の表示が期待されていますが、インデックス0,1,2が表示されます。1
var someArray = [9, 2, 5];
2
for (var item in someArray) {
3
console.log(item); // 0,1,2
4
}
Copied!
これは、for...ofがTypeScript(およびES6)に存在する理由の1つです。次のように、配列を繰り返し処理して、期待どおりに要素をログに出力します。
1
var someArray = [9, 2, 5];
2
for (var item of someArray) {
3
console.log(item); // 9,2,5
4
}
Copied!
TypeScriptでは、同様に文字列に対して
for...ofを使っても問題ありません：1
var hello = "is it me you're looking for?";
2
for (var char of hello) {
3
console.log(char); // 次のものが出力されます: is it me you're looking for?
4
}
Copied!
生成されるJavaScript
ES6未満をターゲットにコンパイルした場合、TypeScriptは標準的な
for(var i = 0; i < list.length; i++)のループを生成します。たとえば、前の例で生成されるものを次に示します。1
var someArray = [9, 2, 5];
2
for (var item of someArray) {
3
console.log(item);
4
}
5
6
// このようになります //
7
8
for (var _i = 0; _i < someArray.length; _i++) {
9
var item = someArray[_i];
10
console.log(item);
11
}
Copied!
for...ofを使うと、開発者の意図がより明確になりますし、コードの量が減ります(そして、頭からひねり出さないといけない変数名も減ります)。制限事項
ES6未満をターゲットにしている場合、コンパイルによって生成されるコードは、オブジェクトに
lengthというプロパティが存在していること、数値のインデックス(obj[2]など)が使えることを前提にしています。なので、これらの古いJavaScriptエンジンでは、stringとarrayのみがサポートされています。もし
stringやarray以外でfor...ofを使用している場合は、TypeScriptはわかりやすいエラーを出力します: "array型またはstring型ではありません"。1
let articleParagraphs = document.querySelectorAll("article > p");
2
// Error: これはarray型まはたstring型ではありません
3
for (let paragraph of articleParagraphs) {
4
paragraph.classList.add("read");
5
}
Copied!
stringやarrayであることが確実である場合だけ for ... ofを使ってください。この制限は、TypeScriptの将来のバージョンでは削除される可能性がありますので、注意してください。まとめ
配列の反復処理をどれだけ多く書くことになるかを知ったら、あなたは驚くでしょう。その時には、
for...ofを使ってください。あなたのコードのレビュアーが喜ぶかもしれません。最終更新 1yr ago
リンクのコピー