TL; DR
for-in安全対策を講じて使用するか、少なくとも噛み付く可能性がある理由を少なくとも認識していない限り、使用しないでください。あなたの最善の策は通常です
for-ofループ（ES2015 +のみ）Array#forEach（spec| MDN）（またはその親族someなど）（ES5 +のみ）、- シンプルな昔ながらの
forループ
- または
for-inセーフガード付き。
しかし、さらに多くのことを探索し、読み進めてください...
JavaScriptには、配列および配列のようなオブジェクトをループするための強力なセマンティクスがあります。私は答えを2つの部分に分けました：本物の配列のオプションと、オブジェクト、その他の反復可能オブジェクト（ES2015 +）、DOMコレクションなど、配列に似たもののオプションですarguments。
ES2015をES5にトランスパイルすることで、ES5エンジンでもES2015オプションをすぐに使用できることにすぐに気づきます。詳細については、「ES2015トランスパイル」/「ES6トランスパイル」を検索してください...
さて、私たちのオプションを見てみましょう：
実際の配列の場合
現在最も広くサポートされているバージョンであるECMAScript 5（ "ES5"）には3つのオプションがあり、ECMAScript 2015（ "ES2015"、 "ES6"）にはさらに2 つのオプションが追加されています。
- 使用
forEachおよび関連（ES5 +）
- 単純な
forループを使用する
- 正しく使う
for-in
- 使用する
for-of（暗黙的にイテレーターを使用する）（ES2015 +）
- イテレータを明示的に使用する（ES2015 +）
詳細：
1.使用forEachおよび関連
ArrayES5によって追加された機能に（直接またはポリフィルを使用して）アクセスできる、漠然としたモダンな環境（IE8ではない）では、forEach（spec| MDN）を使用できます。
var a = ["a", "b", "c"];
a.forEach(function(entry) {
console.log(entry);
});
forEach コールバック関数と、オプションで、使用する値を受け入れます thisそのコールバックを呼び出すときます（上記では使用されていません）。コールバックは、配列内の各エントリに対して順番に呼び出され、スパース配列に存在しないエントリをスキップします。上記の引数は1つしか使用していませんが、コールバックは次の3つで呼び出されます。各エントリの値、そのエントリのインデックス、反復する配列への参照（関数にまだ便利なものがない場合） ）。
IE8のような古いブラウザー（NetAppsが2016年9月の執筆時点で4％をわずかに超える市場シェアを示している）をサポートしていない限りforEach、シムなしで汎用のWebページで楽しく使用できます。廃止されたブラウザをサポートする必要がある場合は、シミング/ポリフィリングforEachを簡単に実行できます（いくつかのオプションについては、「es5 shim」を検索してください）。
forEach インデックス変数と値変数は、反復関数への引数として提供され、その反復のみにスコープが適切に設定されているため、包含スコープで宣言する必要がないという利点があります。
各配列エントリに対して関数呼び出しを行う際の実行時のコストが心配な場合は、心配しないでください。詳細。
さらに、forEach「それらすべてをループする」関数ですが、ES5は、以下を含む、他のいくつかの便利な「配列を操作して実行する」関数を定義しました。
every（コールバックが最初に戻るとき、falseまたは何かが間違っているときにループを停止します）some（コールバックが最初に戻ったとき、trueまたは真実の何かがループしたときに停止します）filter（filter関数が返す要素を含む新しい配列を作成し、trueそれが返す要素を省略しますfalse）map （コールバックによって返された値から新しい配列を作成します）reduce （コールバックを繰り返し呼び出して値を作成し、前の値を渡します。詳細については仕様を参照してください。配列の内容やその他多くの内容を合計するのに役立ちます）reduceRight（と同様reduceですが、昇順ではなく降順で機能します）
2.単純なforループを使用する
時々古い方法が最善です：
var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
console.log(a[index]);
}
配列の長さは、ループ中に変更されません、それがパフォーマンスに敏感なコード（そう）になら、フロントまでの長さをつかんで少し複雑なバージョンがあるかもしれない小さな少し速く：
var index, len;
var a = ["a", "b", "c"];
for (index = 0, len = a.length; index < len; ++index) {
console.log(a[index]);
}
および/または逆算：
var index;
var a = ["a", "b", "c"];
for (index = a.length - 1; index >= 0; --index) {
console.log(a[index]);
}
しかし、最新のJavaScriptエンジンを使用する場合、最後の部分を気にする必要はほとんどありません。
ES2015以降では、インデックス変数と値変数をforループに対してローカルにすることができます。
let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
let value = a[index];
console.log(index, value);
}
//console.log(index); // would cause "ReferenceError: index is not defined"
//console.log(value); // would cause "ReferenceError: value is not defined"
let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
let value = a[index];
console.log(index, value);
}
try {
console.log(index);
} catch (e) {
console.error(e); // "ReferenceError: index is not defined"
}
try {
console.log(value);
} catch (e) {
console.error(e); // "ReferenceError: value is not defined"
}
そして、それを行うと、ループの反復ごとにだけでvalueなく、index再作成されます。つまり、ループ本体で作成されたクロージャーは、その特定の反復用に作成されたindex（およびvalue）への参照を保持します。
let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
divs[index].addEventListener('click', e => {
console.log("Index is: " + index);
});
}
let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
divs[index].addEventListener('click', e => {
console.log("Index is: " + index);
});
}
<div>zero</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
5つのdivがある場合、最初をクリックした場合は「インデックスは：0」となり、最後をクリックした場合は「インデックスは：4」となります。の代わりにを使用すると、これは機能しません。varlet
3. 正しく使用するfor-in
使用するようfor-inに言われるでしょうが、それが目的ではありませんfor-in。配列のインデックスではなく、オブジェクトの列挙可能なプロパティをfor-inループします。ES2015（ES6）であっても、順序は保証されません。ES2015 +は、オブジェクトのプロパティへの順序を定義し（経て、、およびそれらを使用する事が好きです）、それはそれは定義されていませんでしたその順序をたどります。しかし、ES2020はそうしました。（この他の回答の詳細[[OwnPropertyKeys]][[Enumerate]]Object.getOwnPropertyKeysfor-in。）
for-in配列での実際の使用例は次のとおりです。
- それはだまばらな配列を持つ大規模なそれでギャップ、または
- 非要素プロパティを使用していて、それらをループに含めたい
最初の例のみを見るfor-in：適切な保護手段を使用すれば、を使用してこれらの疎配列要素にアクセスできます。
// `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
if (a.hasOwnProperty(key) && // These checks are
/^0$|^[1-9]\d*$/.test(key) && // explained
key <= 4294967294 // below
) {
console.log(a[key]);
}
}
3つのチェックに注意してください。
オブジェクトがその名前で独自のプロパティを持っている（プロトタイプから継承したものではない）。
キーがすべて10進数であること（例：科学表記ではなく通常の文字列形式）、および
数値に強制変換されたときのキーの値が<= 2 ^ 32-2（4,294,967,294）であること。その数はどこから来たのですか？これは、仕様の配列インデックスの定義の一部です。その他の数値（非整数、負の数値、2 ^ 32-2より大きい数値）は配列インデックスではありません。それは2 ^ 32だ理由- 2 -それは2 ^ 32よりも低い方の最大インデックス値せることである1、配列の最大値でlength持つことができます。（たとえば、配列の長さは32ビットの符号なし整数に適合します。）（私のブログ投稿のコメントで、以前のテストが正しくなかったことを指摘したRobGへの賛成です。）
もちろん、インラインコードではそれを行いません。ユーティリティ関数を作成します。おそらく：
// Utility function for antiquated environments without `forEach`
var hasOwn = Object.prototype.hasOwnProperty;
var rexNum = /^0$|^[1-9]\d*$/;
function sparseEach(array, callback, thisArg) {
var index;
for (var key in array) {
index = +key;
if (hasOwn.call(a, key) &&
rexNum.test(key) &&
index <= 4294967294
) {
callback.call(thisArg, array[key], index, array);
}
}
}
var a = [];
a[5] = "five";
a[10] = "ten";
a[100000] = "one hundred thousand";
a.b = "bee";
sparseEach(a, function(value, index) {
console.log("Value at " + index + " is " + value);
});
4.使用for-of（暗黙的にイテレータを使用）（ES2015 +）
ES2015はJavaScriptにイテレータを追加しました。イテレータを使用する最も簡単な方法は、新しいfor-ofステートメントです。次のようになります。
const a = ["a", "b", "c"];
for (const val of a) {
console.log(val);
}
カバーの下で、配列からイテレータを取得してループし、値を取得します。for-inオブジェクト（配列）で定義されたイテレータを使用し、配列はそのイテレータが（プロパティではなく）エントリを反復することを定義しているため、これにはの問題はありません。for-inES5 とは異なり、エントリにアクセスする順序は、インデックスの番号順です。
5.イテレータを明示的に使用する（ES2015 +）
イテレータを 明示的に使用したい場合があります。あなたもそれを行うことができますが、それよりもはるかに不格好ですfor-of。次のようになります。
const a = ["a", "b", "c"];
const it = a.values();
let entry;
while (!(entry = it.next()).done) {
console.log(entry.value);
}
イテレータは、仕様のイテレータ定義に一致するオブジェクトです。このnextメソッドは、呼び出すたびに新しい結果オブジェクトを返します。結果オブジェクトには、doneそれが完了したかどうかを示すプロパティvalueと、その反復の値を持つプロパティがあります。（doneそれは次のようになります場合は、オプションでfalse、valueそれが可能ならば省略可能ですundefined。）
の意味はvalueイテレータによって異なります。配列は、反復子を返す（少なくとも）3つの関数をサポートします。
values()：これは私が上で使用したものです。それは、各イテレータ返すvalue（その反復の配列エントリであるが"a"、"b"、および"c"前述の例で）。keys()：それぞれvalueがその反復のキーであるイテレーターを返します（a上記の例では"0"、それが、then "1"、thenになります"2"）。entries()：それぞれvalueが[key, value]その反復の形式の配列であるイテレーターを返します。
配列のようなオブジェクトの場合
真の配列の他に、インスタンスやオブジェクトなど、数値の名前を持つプロパティとプロパティを持つ配列のようなオブジェクトもあります。それらのコンテンツをループするにはどうすればよいですか？lengthNodeListarguments
上記のオプションのいずれかを配列に使用する
上記の配列のアプローチの少なくともいくつか、そしておそらくほとんどまたはすべてが、配列のようなオブジェクトに頻繁に等しく適用されます。
使用forEachおよび関連（ES5 +）
のさまざまな関数Array.prototypeは「意図的に一般的」であり、通常はFunction#callまたはを介して配列のようなオブジェクトで使用できますFunction#apply。（この回答の最後にあるホスト提供オブジェクトの警告を参照してください。ただし、これはまれな問題です。）
のプロパティで使用forEachしたいとします。あなたはこれをするでしょう：NodechildNodes
Array.prototype.forEach.call(node.childNodes, function(child) {
// Do something with `child`
});
これを頻繁に行う場合は、関数参照のコピーを変数に取り込み、再利用することができます。例：
// (This is all presumably in some scoping function)
var forEach = Array.prototype.forEach;
// Then later...
forEach.call(node.childNodes, function(child) {
// Do something with `child`
});
単純なforループを使用する
明らかに、単純なforループは配列のようなオブジェクトに適用されます。
正しく使うfor-in
for-in配列と同じセーフガードを使用すると、配列のようなオブジェクトでも機能するはずです。上記の＃1でホストが提供するオブジェクトに関する警告が適用される場合があります。
使用するfor-of（暗黙的にイテレーターを使用する）（ES2015 +）
for-ofオブジェクトが提供するイテレータ（存在する場合）を使用します。これには、ホスト提供のオブジェクトが含まれます。たとえば、NodeListfrom の仕様はquerySelectorAll反復をサポートするように更新されました。HTMLCollectionfrom の仕様getElementsByTagNameはそうではありませんでした。
イテレータを明示的に使用する（ES2015 +）
＃4を参照してください。
真の配列を作成する
また、配列のようなオブジェクトを真の配列に変換したい場合もあります。それを行うのは驚くほど簡単です：
slice配列の方法を使用する
slice配列のメソッドを使用できます。これは、上記の他のメソッドと同様に「意図的にジェネリック」であるため、次のように配列のようなオブジェクトで使用できます。
var trueArray = Array.prototype.slice.call(arrayLikeObject);
たとえば、NodeListaを真の配列に変換する場合は、次のようにします。
var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
以下のホスト提供オブジェクトの警告を参照してください。特に、これはIE8以前では失敗し、ホストが提供するオブジェクトをthisそのように使用できないことに注意してください。
スプレッド構文を使用（...）
この機能をサポートするJavaScriptエンジンでES2015のスプレッド構文を使用することもできます。のようにfor-of、これはオブジェクトによって提供されるイテレータを使用します（前のセクションの＃4を参照）：
var trueArray = [...iterableObject];
したがって、たとえば、NodeListaを真の配列に変換する場合、spread構文を使用すると、これは非常に簡潔になります。
var divs = [...document.querySelectorAll("div")];
使用する Array.from
Array.from （スペック） | （MDN）（ES2015 +、ただし簡単にポリフィルされます）は、配列のようなオブジェクトから配列を作成し、オプションで最初にマッピング関数を介してエントリを渡します。そう：
var divs = Array.from(document.querySelectorAll("div"));
または、特定のクラスの要素のタグ名の配列を取得する場合は、マッピング関数を使用します。
// Arrow function (ES2015):
var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
// Standard function (since `Array.from` can be shimmed):
var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
return element.tagName;
});
ホスト提供のオブジェクトに関する警告
ホストが提供する配列のようなオブジェクト（JavaScriptエンジンではなく、ブラウザーが提供するDOMリストなど）でArray.prototype関数を使用する場合は、ターゲット環境でテストして、ホストが提供するオブジェクトが正しく動作することを確認する必要があります。 。ほとんどは正しく動作しますが（現在）、テストすることが重要です。その理由は、使用する可能性が高いメソッドのほとんどが、ホストが提供するオブジェクトに依存して、抽象操作に正直な答えを返すからです。これを書いている時点では、ブラウザーはこれを非常にうまく行っていますが、5.1仕様では、ホスト提供のオブジェクトが正直ではない可能性を考慮しています。それは§8.6.2にあり、そのセクションの冒頭近くの大きなテーブルの下のいくつかの段落にあります）Array.prototype[[HasProperty]]
ホストオブジェクトは、特に指定のない限り、これらの内部メソッドを任意の方法で実装できます。例えば、一つの可能性は、という点である[[Get]]と[[Put]]特定のホスト・オブジェクトが実際にフェッチとストアのプロパティ値のためではなく、[[HasProperty]]常に生成偽。
（私はES2015仕様で同等の言い回しを見つけることができませんでしたが、まだケースのようにバインドされています。）ここでも、共通のホストが提供する[最近のブラウザでオブジェクト配列-ように書いて、こののようNodeListたとえば、インスタンス] やるハンドルを[[HasProperty]]正しく、しかしそれはテストすることが重要です。）
forEachいましたfor。