☰

連想配列オブジェクトに対する JavaScript foreach ループ 質問する

tag-icon • tag-icon javascript arrays foreach
連想配列オブジェクトに対する JavaScript foreach ループ 質問する

for for-each ループが JavaScript 連想配列オブジェクトを反復処理しないのはなぜですか?

// Defining an array
var array = [];

// Assigning values to corresponding keys
array["Main"] = "Main page";
array["Guide"] = "Guide page";
array["Articles"] = "Articles page";
array["Forum"] = "Forum board";

// Expected: loop over every item,
// yet it logs only "last" assigned value - "Forum"
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

jQuery がeach()役に立つかもしれません: https://api.jquery.com/jQuery.each/

ベストアンサー1

プロパティ.lengthは数値インデックス (キー) を持つプロパティのみを追跡します。キーには文字列を使用しています。

あなたはこれを行うことができます：

var arr_jq_TabContents = {}; // no need for an array

arr_jq_TabContents["Main"] = jq_TabContents_Main;
arr_jq_TabContents["Guide"] = jq_TabContents_Guide;
arr_jq_TabContents["Articles"] = jq_TabContents_Articles;
arr_jq_TabContents["Forum"] = jq_TabContents_Forum;

for (var key in arr_jq_TabContents) {
    console.log(arr_jq_TabContents[key]);
}

安全のために、このようなループでは、プロパティが継承の予期しない結果にならないようにすることをお勧めします。

for (var key in arr_jq_TabContents) {
  if (arr_jq_TabContents.hasOwnProperty(key))
    console.log(arr_jq_TabContents[key]);
}

編集— この関数は最新のブラウザや Node などで使用できることに注意しておくとよいでしょうObject.keys()。この関数は、オブジェクトの「独自の」キーを配列として返します。

Object.keys(arr_jq_TabContents).forEach(function(key, index) {
  console.log(this[key]);
}, arr_jq_TabContents);

に渡されるコールバック関数は、.forEach()各キーと、 によって返される配列内のキーのインデックスを使用して呼び出されますObject.keys()。また、関数が反復処理する配列も渡されますが、その配列は実際には役に立ちません。必要なのは元のオブジェクトです。名前で直接アクセスできますが、(私の意見では) 明示的に渡す方が少し便利です。これは、コールバック内で.forEach()としてバインドされる 2 番目の引数 (元のオブジェクト)を に渡すことによって行われますthis。(下のコメントでこれについて言及されているのを見ました。)

おすすめ記事