Nesne özellikleri üzerinden yineleme

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

Değişken proptnesnenin özelliklerini nasıl temsil eder? Bu yerleşik bir yöntem veya özellik değildir. Neden cisimdeki her özellik ile karşılaşıyor?

Mülkler üzerinde yineleme yapmak için bu ek hasOwnPropertykontrol gereklidir :

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

Bir nesnenin prototipi, nesne için teknik olarak nesnenin bir parçası olan ek özellikler içerdiğinden gereklidir. Bu ek özellikler, temel nesne sınıfından miras alınır, ancak yine de bunların özellikleridir obj.

hasOwnProperty bunun temel sınıfa miras alınan değil, bu sınıfa özgü bir özellik olup olmadığını kontrol eder.

hasOwnPropertyNesnenin kendisini aramak da mümkündür :

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

Ancak, nesnenin aynı ada sahip ilgisiz bir alanı varsa bu başarısız olur:

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

Bu yüzden onu aramak daha güvenli Object.prototype:

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

JavaScript 1.8.5'ten Object.keys(obj)itibaren, nesnenin kendisinde tanımlanmış özellikler dizisi elde etmek için kullanabilirsiniz (doğru olanları obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Bu, for-in döngüsü kullanmaktan daha iyidir (ve daha okunabilir).

Bu tarayıcılarda desteklenir:

• Firefox (Gecko): 4 (2.0)
• Krom: 5
• Internet Explorer: 9

Daha fazla bilgi için Mozilla Geliştirici Ağı Object.keys () referansına bakın.

2019'da olduğumuz kızlar ve çocuklar ve yazmak için çok zamanımız yok ... Öyleyse bu havalı yeni süslü ECMAScript 2016'yı yapalım:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

Bu for...in statement( MDN , ECMAScript spesifikasyonu ).

"Gibi okuyabilirsiniz İÇİN her özellik İÇİNDEobj nesne, her özellik atamak PROPT sırayla değişken".

ES'nin güncel uygulamalarında şunları kullanabilirsiniz Object.entries:

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

veya

Object.entries(obj).forEach(([key, value]) => ...)

Yalnızca değerler üzerinde yineleme yapmak istiyorsanız, Object.values ​​kullanın:

for (const value of Object.values(obj)) { }

veya

Object.values(obj).forEach(value => ...)

Sadece bir for...indöngü. Check out Mozilla adresinden belgeleri .

Ortamınızın destekleri ise ES2017 sonra tavsiye ederim Object.entries :

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

Mozillas Object.entries () belgelerinde gösterildiği gibi :

Object.entries () metodu tarafından sağlanan ile aynı sırada, belirli bir nesnenin kendi numaralandırılabilir özelliği [anahtar değeri] çiftlerinin bir dizi döndürür için ... döngüsünde (fark, bir-için döngü numaralandırır prototip zincirindeki özellikler).

Temelde Object.entries ile daha eski olan for ... döngüsünde gereken aşağıdaki ek adımı kaldırabiliriz :

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

jquery şimdi bunu yapmanızı sağlar:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Dominik'in cevabı mükemmel, sadece okumayı tercih ettiğim için bu şekilde yapmayı tercih ediyorum:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

Yukarıdaki yanıtlar biraz can sıkıcıdır, çünkü bir nesne olduğundan emin olduktan sonra for döngüsü içinde ne yaptığınızı açıklamazlar: DOĞRUDAN ERİŞMEYİNİZ! Aslında yalnızca OBJ'ye başvurmanız gereken ANAHTAR teslim edilir:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Bunların hepsi ECMA5 güvenlidir. Hatta Rhino gibi topal JS sürümlerinde çalışır;)

ES2015'in Reflect.ownKeys(obj)özelliklerini bir yineleyici aracılığıyla kullanımını ve ayrıca yinelemeyi eklemek için .

Örneğin:

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

tarafından tekrarlanabilir

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

Bir nesnenin anahtarlarının değerleri üzerinde doğrudan yineleme yapmak isterseniz, iterator tıpkı JavaScipts'in dizeler, diziler, yazılan diziler, Harita ve Küme için varsayılan yineleyicileri gibi .

JS, olarak tanımlanması gereken varsayılan yineleyici özelliği üzerinden yineleme yapmaya çalışır Symbol.iterator.

Tüm nesneler üzerinde yineleme yapabilmek istiyorsanız, nesneyi prototip olarak ekleyebilirsiniz:

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

Bu, for ... döngüsüne sahip bir nesnenin değerlerini yinelemenize olanak tanır, örneğin:

for(val of obj) { console.log('Value is:' + val ) }

Dikkat : Bu yanıtı yazarken (Haziran 2018) IE hariç tüm diğer tarayıcılar, jeneratörleri ve for...ofyinelemeyiSymbol.iterator

if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj
// If there is no keys in obj, it will return empty array = []
// Then it will get it's length, if it has at least one element,
// it's bigger than 0 which evaluates to true and the bellow 
// code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

For ... in döngüsü, bir for döngüsü gibi olduğu için bir nesnedeki her özelliği temsil eder. For ... in loop içindeki propt komutunu aşağıdakileri yaparak tanımladınız:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

For ... in loop, bir nesnenin numaralandırılabilir özellikleri boyunca yinelenir. Hangi değişkeni tanımlarsanız veya for ... in döngüsüne koyarsanız koyun, yinelediği bir sonraki özelliğe her gittiğinde değişir. For ... in döngüsünde değişken, anahtarlar arasında yinelenir, ancak değeri anahtarın değeridir. Örneğin:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

Değişkenin, değişkenin değerinden nasıl farklı olduğunu görebilirsiniz. Buna karşılık, for ... döngüsü bunun tersini yapar.

Umarım bu yardımcı olur.

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2

Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

Lodash'ı kullanabilirsiniz. Dökümantasyon

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

Sizin fordöngü nesnesinin tüm özelliklerini üzerinde yineleme edilir obj. proptfor döngünüzün ilk satırında tanımlanır. objNesnenin bir özelliğinin adı olan bir dizedir . Döngünün ilk yinelemesinde propt"ad" olur.

JavaScript'teki nesneler özellik koleksiyonlarıdır ve bu nedenle her deyim için bir imlecinde döngüye sokulabilir.

objBir anahtar değer koleksiyonu olarak düşünmelisiniz .

Günümüzde standart bir JS nesnesini yalnızca bir Symbol.iterator yöntemi ekleyerek yinelenebilir bir nesneye dönüştürebilirsiniz. Daha sonra bir for ofdöngü kullanabilir ve değerlerine doğrudan erişebilir veya hatta nesne üzerinde bir yayma işleci de kullanabilirsiniz. Güzel. Nasıl başarabileceğimizi görelim:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

Düğüm çalıştırıyorsanız tavsiye ederim:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

En yüksek puanlı yanıt doğru olsa da, alternatif bir kullanım örneğidir; örneğin, bir nesnenin üzerinde yineleme yapıyorsanız ve sonunda bir dizi oluşturmak istiyorsanız. Yerine .mapkullanınforEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

Ayrıca özyinelemeli yol ekleyerek:

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

Kullanımı:

iterate({ foo: "foo", bar: { foo: "foo"} }); 

..İn döngüsünün yaptığı, yeni bir değişken (var someVariable) oluşturması ve daha sonra verilen nesnenin her özelliğini bu yeni değişken (someVariable) içinde tek tek depolamasıdır. Bu nedenle {} bloğunu kullanırsanız, yineleyebilirsiniz. Aşağıdaki örneği ele alalım.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

Burada her düğümü yineliyorum ve anlamlı düğüm adları oluşturuyorum. Eğer fark ederseniz, exampleOf Array ve instanceOf Object hemen hemen aynı şeyi yapar (uygulamamda olsa da farklı mantık veriyorum)

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

not - Ondrej Svejdar'ın cevabından ilham aldım. Ancak bu çözüm daha iyi performansa ve daha az belirsiz

Temel olarak nesnedeki her özellik arasında döngü yapmak istersiniz.

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

Yukarıdaki yanıtlara eklemek istiyorum, çünkü Javascript'ten farklı niyetleriniz olabilir. Bir JSON nesnesi ve bir Javascript nesnesi farklı şeylerdir ve yukarıda önerilen çözümleri kullanarak bir JSON nesnesinin özellikleri arasında yineleme yapmak ve sonra şaşırmak isteyebilirsiniz.

Bir JSON nesneniz olduğunu varsayalım:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

'Özelliklerini' yinelemenin yanlış yolu:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

Sen konsol günlüğünü görme sürpriz olabilir 0, 1vb zaman iterating özellikleri sayesinde prop1ve prop2veprop3_1 . Bu nesneler dizilerdir ve bir dizinin dizinleri Javascript'teki o nesnenin özellikleridir.

Bir JSON nesnesi özellikleri arasında özyinelemeli olarak yineleme yapmanın daha iyi bir yolu , öncelikle bu nesnenin bir dizi olup olmadığını kontrol etmektir:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

Ayrıca rafine etmek kabul cevap Eğer bir nesneyi örneğini eğer belirterek 's değerinde var object = Object.create(null)sonra object.hasOwnProperty(property)bir TypeError tetikleyecektir. Bu yüzden güvenli tarafta olmak için, bunu prototipten şöyle çağırmanız gerekir:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

Https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin yardımcı olacak bu bağlantıyı kontrol edin

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);