[解決済み】JavaScriptのforeachループで連想配列オブジェクトを処理する。

質問

JavaScript の連想配列オブジェクトに対して、for-each ループが反復処理されないのはなぜですか？

// 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/

解決方法は？

その .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]);
}

編集 - ということに注意するのが今となっては良いのかもしれません。 Object.keys() 関数は、モダンブラウザや Node などで利用できます。この関数は、オブジェクトの "own" キーを配列として返します。

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

に渡されるコールバック関数は .forEach() が返す配列の中で、それぞれのキーとキーのインデックスを指定してコールされます。 Object.keys() . また、この関数が繰り返し実行される配列も渡されますが、この配列はあまり役に立ちません。 オブジェクト . これは名前で直接アクセスすることもできますが、（私見ですが）明示的に渡したほうが少しはすっきりすると思いますので、第2引数を .forEach() - としてバインドされ、元のオブジェクトは this をコールバック内で使用します。(ただ、これは下のコメントで指摘されているのを見ました)。