Olası Mükerrer: Nesne Literal Değerleri Üzerinde Yineleme
JavaScript'te nesnem var:
var object = someobject;
Object { aaa=true, bbb=true, ccc=true }
Bunun için her birini nasıl kullanabilirim?
object.each(function(index, value)) {
console.log(value);
}
Çalışmıyor.
Bir javascript Nesnesinin standart bir .each işlevi yoktur. jQuery bir işlev sağlar. Bkz. http://api.jquery.com/jQuery.each/ Aşağıdaki çalışmalıdır
$.each(object, function(index, value) {
console.log(value);
});
Başka bir seçenek de Object.keys()
ve Array .map()
fonksiyonlarını kullanarak vanilla Javascript kullanmak olabilir.
Object.keys(object).map(function(objectKey, index) {
var value = object[objectKey];
console.log(value);
});
Bkz. https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keys ve https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Bunlar, normal bir for döngüsü kullanmanın etkilerini gerçekten anlamadığınız ve özellik zinciri üzerinde döngü gibi belirli özelliklerinin kullanımını görmediğiniz sürece, genellikle bir vanilla Javascript for döngüsü kullanmaktan daha iyidir.
Ancak genellikle bir for döngüsü jQuery
veya Object.keys().map()
den daha iyi çalışmaz. Aşağıda düz bir for döngüsü kullanmayla ilgili iki potansiyel sorunu ele alacağım.
Doğru, diğer cevaplarda da belirtildiği gibi, düz bir Javascript alternatifi şöyle olabilir
for(var index in object) {
var attr = object[index];
}
Bununla ilgili iki potansiyel sorun vardır:
1 . Bulduğunuz özniteliğin prototip zincirinin yukarısından değil de nesnenin kendisinden olup olmadığını kontrol etmek istersiniz. Bu, hasOwnProperty
fonksiyonu ile aşağıdaki gibi kontrol edilebilir
for(var index in object) {
if (object.hasOwnProperty(index)) {
var attr = object[index];
}
}
Daha fazla bilgi için https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty adresine bakınız.
Bunu jQuery.each
ve Object.keys
fonksiyonları otomatik olarak halleder.
2 . Düz bir for döngüsüyle ilgili bir diğer potansiyel sorun da kapsam ve kapalılıkla ilgilidir. Bu biraz karmaşıktır, ancak örneğin aşağıdaki kodu ele alalım. button0, button1, button2 vb. kimliklere sahip bir grup düğmemiz var ve bunlara bir onclick ayarlamak ve aşağıdaki gibi bir console.log
yapmak istiyoruz:
<button id='button0'>click</button>
<button id='button1'>click</button>
<button id='button2'>click</button>
var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"];
for(var buttonId in messagesByButtonId ) {
if (messagesByButtonId.hasOwnProperty(buttonId)) {
$('#'+buttonId).click(function() {
var message = messagesByButtonId[buttonId];
console.log(message);
});
}
}
Bir süre sonra düğmelerden herhangi birine tıklarsak konsolda her zaman "son tıklandı!" mesajı alırız ve asla "ilk tıklandı!" veya "orta tıklandı!" mesajı almayız. Neden? Çünkü onclick fonksiyonu çalıştırıldığında, buttonId
değişkenini o anda kullanarak messagesByButtonId[buttonId]
gösterecektir. Ve döngü o anda bittiğinden, buttonId
değişkeni hala "button2" (son döngü yinelemesi sırasında sahip olduğu değer) olacaktır ve bu nedenle messagesByButtonId[buttonId]
, messagesByButtonId["button2"]
olacaktır, yani "en son tıklandı!".
Kapanışlar hakkında daha fazla bilgi için https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures adresine bakın. Özellikle o sayfanın bizim örneğimizi kapsayan son kısmı.
Yine, jQuery.each
ve Object.keys().map()
bu sorunu bizim için otomatik olarak çözer, çünkü bize bir function(index, value)
(kapanışa sahip) sağlar, böylece hem index hem de value'yu güvenle kullanabiliriz ve beklediğimiz değere sahip olduklarından emin olabiliriz.
var object = { "a": 1, "b": 2};
$.each(object, function(key, value){
console.log(key + ": " + object[key]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
//output
a: 1
b: 2