web-dev-qa-db-ja.com

概念配列オブジェクトの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/

javascriptarraysforeach
157
Szymon Toda

.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などで使用できることに注意してください。この関数は、オブジェクトの「独自の」キーを返します。配列：

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

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

289
Pointy

これはとても簡単な方法です。利点はあなたもキーを取得できることです。

for (var key in array) {
    var value = array[key];
    console.log(key, value);
}

ES6の場合：

array.forEach(value => {
  console.log(value)
})

ES6の場合：（値、インデックス、および配列自体が必要な場合）

array.forEach((value, index, self) => {
  console.log(value, index, self)
})
67
tika

いくつかの簡単な例が既にありますが、私はあなたがおそらくあなたが質問をしたことからあなたがおそらくPHP背景から来ていることに気づいています、そしてあなたはJavaScriptが同じように動くと期待しています - それは違います。 PHP arrayは、JavaScriptのArrayとは大きく異なります。

PHPでは、連想配列が、数値インデックス配列ができることのほとんどを実行できます（array_*関数が動作し、count() it関数などが動作します）。単に配列を作成し、数値ではなく文字列インデックスへの割り当てを開始します。

JavaScriptでは、すべてがオブジェクト（プリミティブを除く：string、numeric、boolean）であり、配列は数値インデックスを持つことを可能にする特定の実装です。配列にプッシュされたものはすべてlengthに影響し、Arrayメソッド（map、forEach、reduce、filter、findなど）を使用して反復できます。ただし、すべてがオブジェクトであるため、常にプロパティを割り当てるのは自由です。それはあなたがどんなオブジェクトに対してもすることだからです。角括弧表記は、単にプロパティにアクセスするための別の方法です。

array['Main'] = 'Main Page';

これは実際には以下と同等です。

array.Main = 'Main Page';

あなたの説明から、私はあなたが '連想配列'を望んでいると思いますが、JavaScriptの場合、これはハッシュマップとしてオブジェクトを使用する単純なケースです。また、私はそれが例であることを知っていますが、変数の型（例えばarray）を記述する意味のない意味のない名前、およびそれが含むべきものに基づく名前（例えばpages）を避けてください。単純なオブジェクトには、反復するための直接的な方法があまり多くないため、最初にObjectメソッドを使用して配列に変換することがよくあります（この場合はObject.keys - 現在はentriesとvaluesも追加されます）。 。

// assigning values to corresponding keys
const pages = {
  Main: 'Main page',
  Guide: 'Guide page',
  Articles: 'Articles page',
  Forum: 'Forum board',
};

Object.keys(pages).forEach((page) => console.log(page));
4
Josh from Qaribou

arr_jq_TabContents[key]は、この配列をインデックス0の形式と見なします。

4
MSO

これが一般的なオブジェクト型として連想配列を使う簡単な方法です：

Object.prototype.forEach = function(cb){
   if(this instanceof Array) return this.forEach(cb);
   let self = this;
   Object.getOwnPropertyNames(this).forEach(
      (k)=>{ cb.call(self, self[k], k); }
   );
};

Object({a:1,b:2,c:3}).forEach((value, key)=>{ 
    console.log(`key/value pair: ${key}/${value}`);
});
3
Chouettou

Node.jsまたはブラウザが Object.entries() をサポートしている場合は、Object.keys()（ httpsの代わりに使用できます。 //stackoverflow.com/a/18804596/225291 ）。

const h = {
  a: 1
  b: 2
};

Object.entries(h).forEach(([key, value]) => console.log(value));
// => 1
// => 2

この例では、forEachは 配列の分割代入 を使用します。

2
banyan
var obj = {
    no : ["no",32],
    nt : ["no",32],
    nf : ["no",32,90]
};
count = -1; // which must be static value
for(i in obj){ 
   count++;
   if(obj.hasOwnProperty(i){
        console.log(obj[i][count])
      };
};

このコードでは、配列に含まれる呼び出し値にブラケットメソッドを使用しました。ただし、簡単に言うと、変数iがプロパティのキーを持ち、ループが関連配列の両方の値を呼び出すという考えです。

完璧な方法、あなたが興味を持っている場合は、のように押す

0
Dev-Wb Ahmed