web-dev-qa-db-ja.com

JavaScriptのFor..Inループ - キーと値のペア

私はJavaScriptのPHP foreachループのような何かをする方法があるかどうか疑問に思いました。探している機能は次のようなものですPHP Snippet：

foreach($data as $key => $value) { }

JSのfor..inループを見ていましたが、asを指定する方法はないようです。これを 'normal'のforループ（for(var i = 0; i < data.length; i++）を使って行う場合、key => valueの組をつかむ方法はありますか？

javascriptforeach
344
cabaret
for (var k in target){
    if (target.hasOwnProperty(k)) {
         alert("Key is " + k + ", value is" + target[k]);
    }
}

hasOwnPropertyは、プロトタイプから継承したのではなく、あなたのtargetが本当にそのプロパティを持っているかどうかをチェックするために使用されます。もう少し簡単になります：

for (var k in target){
    if (typeof target[k] !== 'function') {
         alert("Key is " + k + ", value is" + target[k]);
    }
}

kがメソッドではないことをチェックするだけです（targetがarrayであるかのように、警告される多くのメソッド、例えばindexOf、Push、popなど）。

485
J0HN

誰もObject.keysを言及していないので、それを言及します。

Object.keys(obj).forEach(function (key) {
   // do something with obj[key]
});
287
goatslacker

ES6 をネイティブに、または Babel （js compiler）と一緒に使用できる場合は、次のようにします。

const test = {a: 1, b: 2, c: 3};

for (const [key, value] of Object.entries(test)) {
  console.log(key, value);
}

これはこの出力をプリントするでしょう：

a 1
b 2
c 3

Object.entries()メソッドは、指定されたオブジェクト自身の列挙可能なプロパティ[key, value]ペアの配列を、for...in loopによって提供される順序と同じ順序で返します（違いは、for-inループがプロトタイプチェーンのプロパティも列挙するということです） ）。

それが役に立てば幸い！ =）

108
Francesco Casula

for inはあなたのために働くでしょう。オブジェクトを地図と考えるならば：

for(key in obj){
    // The key is key
    // The value is obj[key]
}
92
Paulpro
var obj = {...};
for (var key in obj) {
    var value = obj[key];

}

Phpの構文は単なる砂糖です。

56
Zirak

私はあなたがiがキーであり、あなたがdata[i]を通して値を得ることができることをあなたが知っていると思います（そしてこのための近道が欲しいだけです）。

ECMAScript5が導入されました forEach[MDN] 配列の場合（配列があるようです）：

data.forEach(function(value, index) {

});

MDNドキュメントはそれをサポートしていないブラウザにシムを提供します。

もちろんこれはオブジェクトに対しては機能しませんが、それらに対して同様の関数を作成することができます。

function forEach(object, callback) {
    for(var prop in object) {
        if(object.hasOwnProperty(prop)) {
            callback(prop, object[prop]);
        }
    }
}

質問に jquery のタグを付けたので、jQueryは $.each を提供します。 [docs] これは、配列構造とオブジェクト構造の両方をループします。

21
Felix Kling

そのためにはfor..inを使うことができます。

for (var key in data)
{
    var value = data[key];
}
7
Christoph Winkler
for (var key in myMap) {
    if (myMap.hasOwnProperty(key)) {
        console.log("key =" + key);
        console.log("value =" + myMap[key]);
    }
}

JavaScriptでは、すべてのオブジェクトにメタ情報を持つ一連の組み込みのキーと値のペアがあります。オブジェクトのすべてのキーと値のペアをループ処理すると、それらもループ処理されます。 hasOwnProperty（）を使用すると、これらが除外されます。

7
Siddhu

ES6はMap.prototype.forEach（コールバック）を提供します。これはこのように使用することができます。

myMap.forEach(function(value, key, myMap) {
                        // Do something
                    });
2
Stephen Murby
let test = {a: 1, b: 2, c: 3};
Object.entries(test).forEach(([key, value]) => console.log(key, value))

// a 1
// b 2
// c 3
1
吴毅凡

これには 'for in'ループを使用できます。

for (var key in bar) {
     var value = bar[key];
}
1
Richard Dalton

以下は、あなたができる限り近づく例です。

for(var key in data){
  var value = data[key];    
  //your processing here
}

JQueryを使用している場合は、次のURLを参照してください。 http://api.jquery.com/jQuery.each/

1
Aidamina

Lodash を使用している場合は、_.forEachを使用できます。

_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key + ": " + value);
});
// => Logs 'a: 1' then 'b: 2' (iteration order is not guaranteed).
1
Gil Epshtain