使用jQuery迭代JavaScript对象的属性

Question

有没有一种jQuery方法可以遍历对象的成员，就像这样：

    for (var member in obj) {
        ...
    }

我只是不喜欢这个for很突兀地出现在我的可爱的jQuery符号中！

- tags2k

Answer 1

$.each( { name: "John", lang: "JS" }, function(i, n){
    alert( "Name: " + i + ", Value: " + n );
});

each

每个

- Tim Büthe

---

我猜警告“n”并不完全正确。至少它可以是“n.name”。 - Eugene

@Eugene：我不明白你的意思。each函数将数组或对象作为第一个参数，函数作为第二个参数。这个函数会针对数组中的每个元素/对象中的每个属性进行调用。每次调用函数时，它都会将索引和值/名称和值作为参数传递。在我的示例中，参数“n”是两个字符串“John”和“JS”。而“name”属性则为“undefined”。 - Tim Büthe

是的，我在这里错了。不知何故，我认为对象中的每个属性都是另一个对象，例如具有字符串属性名称的对象。当然，所有这些都是错误的。非常抱歉。 :) - Eugene

每个都有更多的特性：this 也是 n。return false 中断了每一个循环... - andy

“i”和“n”？为什么不用“index”和“name”来保持代码的清晰易懂呢？不过你确实教会了我一些新知识，比如$.each(obj, callback)和$(obj).each(callback)并不相同，非常感谢。已点赞。 - Rick Mac Gillis

@RickMacGillis 可以使用任何你喜欢的变量名。我认为在 for each 中，i 作为索引非常常见，但你说得对，index 和 value 会更好一些。 - Tim Büthe

Answer 2

你也可以使用each来处理对象，而不仅仅是数组：

var obj = {
    foo: "bar",
    baz: "quux"
};
jQuery.each(obj, function(name, value) {
    alert(name + ": " + value);
});

- Gumbo

Answer 3

注意: 大多数现代浏览器现在都允许您在开发者控制台中导航对象，本解答已经过时。

此方法将遍历对象属性并将它们写入控制台，并增加缩进：

function enumerate(o,s){

    //if s isn't defined, set it to an empty string
    s = typeof s !== 'undefined' ? s : "";

    //if o is null, we need to output and bail
    if(typeof o == "object" && o === null){

       console.log(s+k+": null");

    } else {    

        //iterate across o, passing keys as k and values as v
        $.each(o, function(k,v){

            //if v has nested depth
           if(typeof v == "object" && v !== null){

                //write the key to the console
                console.log(s+k+": ");

                //recursively call enumerate on the nested properties
                enumerate(v,s+"  ");

            } else {

                //log the key & value
                console.log(s+k+": "+String(v));
            }
        });
    }
}

只需将您想要迭代的对象传递给它：

    var response = $.ajax({
        url: myurl,
        dataType: "json"
    })
    .done(function(a){
       console.log("Returned values:");
       enumerate(a);
    })
    .fail(function(){ console.log("request failed");});

- terrabruder

---

当一个值为空时，使用此方法会出现“Uncaught TypeError: Cannot read property 'length' of null”错误。 - JustinStolle

Answer 4

虽然有些晚了，但是可以使用Object.keys实现，例如：

var a={key1:'value1',key2:'value2',key3:'value3',key4:'value4'},
  ulkeys=document.getElementById('object-keys'),str='';
var keys = Object.keys(a);
for(i=0,l=keys.length;i<l;i++){
   str+= '<li>'+keys[i]+' : '+a[keys[i]]+'</li>';
}
ulkeys.innerHTML=str;

<ul id="object-keys"></ul>

- Rohan Kumar