Содержание
Итерация по массиву, такая простая задача с циклом не так ли? Но знаете ли вы, как правильно перебирать объект?
Если вы новичок, вы можете выучить это сегодня и забыть это завтра, если у вас есть куриная память.
Javascript
Самый простой способ перебрать объект с помощью Javascript (и известный) — это использовать простой for .. in петля.
Как это работает на самом деле просто, цикл for будет перебирать объекты в виде массива, но цикл будет посылать в качестве параметра ключ объекта вместо индекса.
var OurObject = {
testProperty: 123,
anotherProperty: "Hey",
helloWorld: "Hi"
};
for(var key in OurObject){
// Check if the property really exists
if(OurObject.hasOwnProperty(key)){
var value = OurObject[key];
// Do something with the item :
// console.log(key,value);
}
}Замечания: мы проверяем, действительно ли объект имеет данное свойство цикла, используя hasOwnProperty предотвратить итерацию свойств прототипа.
Или используйте цикл for, как вы всегда делаете, с массивом, который содержит все ключи объекта, используя Object.keys:
var myObject = {"p1": "value1", "p2": "value2", "p3": "value3"};
// ["p1", "p2", "p3"]
var keys = Object.keys(myObject);
for(i = 0; i < keys.length; i++){
var value = myObject[keys[i]];
console.log(keys[i],value);
}Теперь, если вы хотите перебрать все свойства (даже те, которые не перечисляются), вы можете использовать следующий трюк, используя getOwnPropertyNames Метод (глобального объекта, доступного в окне):
// Define a not enumerable property
var obj = Object.create({}, {
// non-enumerable property
getFoo: {
value: function() { return this.foo; },
enumerable: false
}
});
obj.foo = "Hello";
Object.getOwnPropertyNames(obj).forEach(function (key) {
var value = obj[key];
console.log(key,value);
});JQuery
С помощью jQuery используйте $.each функция, которая позволяет вам получить индекс (ключ в случае объекта) и значение в обратном вызове:
var obj = {
myProperty: "Hello world !",
not: "Yes",
yes: "Nope",
anotherProperty : {
hi:"Hello"
}
};
// or jQuery.each(...)
$.each(obj, function(key, value) {
console.log(key, value);
});На самом деле просто не так? Однако, если вы работаете с огромными объектами, вы можете использовать Vanilla Javascript вместо jQuery, так как это намного быстрее.
