JavaScript'te döngülerde - anahtar / değer çiftleri


414

foreachJavaScript bir PHP döngü gibi bir şey yapmak için bir yol olup olmadığını merak ediyordum . Aradığım işlevsellik bu PHP Snippet gibi bir şeydir:

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

Ben JS for..indöngü bakıyordu , ama belirtmek için bir yolu yok gibi görünüyor as. Bunu loop ( for(var i = 0; i < data.length; i++) için 'normal' ile yaparsam , key => değer çiftlerini yakalamanın bir yolu var mı?

Yanıtlar:


215

ES6'yı yerel olarak veya Babel (js derleyici) ile kullanabiliyorsanız aşağıdakileri yapabilirsiniz:

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

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

Bu çıktı yazdırılacak:

a 1
b 2
c 3

Object.entries()Yöntem, belirli bir nesnenin kendi numaralandırılabilir özelliği bir dizi döner [key, value]bir tarafından sağlanan ile aynı sırada, çift for...indöngü (fark, bir hazır prototip zincirinde döngü sıralar özellikleri de) .

Umarım yardımcı olur! =)


1
Bu mükemmel, sadece merak ediyor - "nesnedeki anahtar için ve daha sonra nesne [anahtar] ile değer elde etmek" ile karşılaştırıldığında, hangisi daha iyi performans verir?
— lsheng

1
Bu özel durumda, Object.entriesçağrı nedeniyle daha yavaş olduğunu varsayabilirim . Yine de hiç test yapmadım.
— Francesco Casula

6
bu, for döngüsünde hem anahtar hem de değer kapmayı soran soruya en iyi cevaptır.
— cipak

4
Kabul edilen cevap güncellenmelidir, çünkü bu soruya cevap verir, ancak soru anında mevcut değildir.
— Marc Qualie

1
Bu soruyu kontrol etmek isteyebilirsiniz: stackoverflow.com/questions/47213651/… , bu tür bir sözdiziminin önerileceğini gösteriyor gibi görünüyor: Object.keys (myObject) .forEach (key => {...
— Will59

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

hasOwnPropertytargetprototipinden miras almak yerine, gerçekten bu özelliğe sahip olup olmadığını kontrol etmek için kullanılır . Biraz daha basit olurdu:

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

Bu sadece kontroller kbir yöntem değildir (sanki targetolduğunu arraysen yöntemlerden çok alırsınız, örneğin uyarı indexOf, push, pop, vb.)


87
Sadece "kendi" özelliklerinin üzerinde yineleme yapmanın başka bir yolu Object.keys. Object.keys(target).forEach(function (key) { target[key]; });.
— katspaugh

3
targetkullanılarak oluşturulursa işe yaramazsa Object.create(null), kod değiştirilmelidir target.hasOwnProperty(k)->Object.prototype.hasOwnProperty.call(target,k)
— Azder

neden soru örneğinde verilen değişkenleri kullanmıyorsunuz? Burada ne k, targetve property? Benim için, javascripter undefined bu alan :)
— Gediminas

2
Object.keys (target) .forEach ((anahtar) => {target [anahtar];}); Eğik için
— askilondz

315

Kimse Object.keysbahsetmedi, ben de bahsedeceğim.

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

3
Not: IE8 ve altı tarafından desteklenmez.
— Edwin Stoteler

1
Bu noktada bir ES5 şimi kullanmalısınız. Eğer güzel ES6 ileride kullanmak yaşıyorsak for of tc39wiki.calculist.org/es6/for-of
— goatslacker

17
Bu "dur ya da bir istisna atarak dışında bir forEach () döngü kırmaya yolu yoktur" diye değerinde kayda olduğunu
— rluks

Object.keys (obj) .forEach ((anahtar) => {}); for
— asgular

ES6 üzerinde çalışmıyor ya da anlamıyorum. Felix'in aşağıda daha iyi ve daha okunabilir bir cevabı var: data.forEach (function (value, index) {console.log (index); // 0, 1, 2 ...});
— gtamborero

115

çünkü ... sizin için çalışacaktır.

for( var key in obj ) {
  var value = obj[key];
}

Modern JavaScript'te şunları da yapabilirsiniz:

for ( const [key,value] of Object.entries( obj ) ) {

}

64
var obj = {...};
for (var key in obj) {
    var value = obj[key];

}

Php sözdizimi sadece şekerdir.


Bu aynı zamanda tüm miras alınan mülkleri de yineleyecektir. Bundan kaçınmak için .hasOwnProperty () kullanın.
— LSerni

24

Bunun ianahtar olduğunu bildiğinizi ve değeri elde edebileceğinizi varsayıyorum data[i](ve bunun için bir kısayol istiyorum).

ECMAScript5 diziler için forEach [MDN] 'i tanıttı (dizininiz var gibi görünüyor):

data.forEach(function(value, index) {

});

MDN belgeleri, desteklemeyen tarayıcılar için bir şim sağlar.

Elbette bu nesneler için işe yaramaz, ancak onlar için benzer bir işlev oluşturabilirsiniz:

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

Soruyu ile etiketlediğinizden beri , jQuery , dizi ve nesne yapılarının her ikisini de $.each çevreleyen [dokümanlar] sağlar .


Bu Array forEach, itiraz değil forEach.

2
Yani? Görünüşe göre OP bir dizi üzerinde döngü yapıyor.
— Felix Kling

Ayrıca Mozilla (Firefox, SpiderMonkey-C, Rhino & c) for eachsözdizimine izin veren standart dışı bir uzantıya sahiptir . for each (let val in myObj) console.log(val);.
— katspaugh

2
@katspaugh: Doğru, ancak sadece Mozilla olduğu için çok kullanışlı görünmüyor.
— Felix Kling

Cevaplarınız için teşekkürler. Verdiğiniz bilgileri okuyacağım. Cevabın başlangıcındaki varsayımınız doğruydu, biliyordum ki, bu proje ile kafama o kadar çok yaklaştım ki, odaklanıp unutmayacağım. Teşekkür ederim.
— kabare


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

Javascript'te her nesnede, meta bilgileri olan bir grup yerleşik anahtar / değer çifti bulunur. Bir nesnenin tüm anahtar / değer çiftleri arasında geçiş yaptığınızda, bunlar arasında da döngü gerçekleştirirsiniz. HasOwnProperty () kullanımı bunları filtreler.


2

ES6, Map.prototype.forEach (geri arama) yöntemini bu şekilde kullanılabilir

myMap.forEach(function(value, key, myMap) {
                        // Do something
                    });

2
parametre ne myMapiçin?
— phil294

Harita bir nesne değildir. Bunlar tamamen ayrı şeyler.
— Dakusan

2
ForEach işlevi dizinin 'anahtarını' değil, o anda yinelemekte olduğunuz öğenin dizinini içerir.
— Francis Malloch

2
let test = {a: 1, b: 2, c: 3};
Object.entries(test).forEach(([key, value]) => console.log(key, value))

// a 1
// b 2
// c 3

5
Anlaşılamayabilecek düz bir kod göndermek yerine, yayınladığınız kodla ilgili bazı açıklamalar ekleyebilirsiniz.
— AaoIi

Orijinal nesnenin anahtar / değer çiftleri göre dizilerin bir dizi üzerinden Object.entries çeker: [['a', 1],['b',2],['c',3]]. forEachAnahtar / değer diziler her dekonstürüksiyon ve iki değişken setleri keyve valueburada çıktı - Eğer işlevinde istediğiniz olarak kullanılmak üzere, console.log.
— Mark Swardstrom

1

Bunun için 'for in' döngüsünü kullanabilirsiniz:

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


1

Lodash kullanıyorsanız ,_.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

Bu sorunun yapılmasından bu yana geçen birkaç yıl içinde Javascript birkaç yeni özellik ekledi. Bunlardan biri Object.Entries yöntemidir.

Doğrudan MDN'den kopyalanan kod takip snippet'idir


const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

-2

evet, javascript'te de ilişkilendirilebilir diziler olabilir:

var obj = 
{
    name:'some name',
    otherProperty:'prop value',
    date: new Date()
};
for(i in obj)
{
    var propVal = obj[i]; // i is the key, and obj[i] is the value ...
}

@PaulPRO ... javascript'teki her şey bir anahtar / değer çiftidir (bu nedenle, bir nesne aslında anahtar / değer çiftlerinin ilişkilendirilebilir bir dizisidir ...)
— Alex Pacurar

@AlexPacurar ve ilgili dizinin bir sırası vardır. Bir nesne sıralanmamış. bu büyük bir fark
— Raynos

@Raynos haklı olabilirsiniz ... bir nesnenin nasıl sırasız olduğunu tam olarak açıklamak çok yardımcı olacaktır ... yukarıdaki örnek göz önüne alındığında, biri for döngüsündeki 'i' nin [isim, otherProperty, ve son olarak tarih] ... öyleyse hangi durumda bir nesnenin özelliklerinin sırası karıştırılacaktır?
— Alex Pacurar

@AlexPacurar nesnenin üzerinde döngü hangi belirli sıra tarayıcıya özgüdür. Bazıları alfabetik olarak, bazıları tanım sırasını vb.
— Yapar

3
@Raynos: İlişkilendirilebilir diziler zorunlu olarak sıralanıyor mu? Terimin daha genel olarak kullanıldığını sık sık gördüm. Örneğin , İlişkilendirilebilir dizi Wikipedia makalesinde .
— Jeremy Banks

-8
var global = (function() {
   return this;
})();

// Pair object, similar to Python

function Pair(key, value) {
    this.key = key;
    this.value = value;

    this.toString = function() {
       return "(" + key + ", " + value + ")";
    };
}

/**
 * as function
 * @param {String} dataName A String holding the name of your pairs list.
 * @return {Array:Pair} The data list filled
 *    with all pair objects.
 */
Object.prototype.as = function(dataName) {
    var value, key, data;
    global[dataName] = data = [];

    for (key in this) {
       if (this.hasOwnProperty(key)) {
          value = this[key];

          (function() {
             var k = key,
                 v = value;

            data.push(new Pair(k, v));
          })();
       }
    }

    return data;
};

var d = {
   'one': 1,
   'two': 2
};

// Loop on your (key, list) pairs in this way
for (var i = 0, max = d.as("data").length; i < max; i += 1) {
   key = data[i].key;
   value = data[i].value;

   console.log("key: " + key + ", value: " + value);
}

// delete data when u've finished with it.
delete data;
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.