javascript - 循环遍历JavaScript对象

  显示原文与译文双语对照的内容

我有一个类似如下的JavaScript对象:


 var p =
 {
"p1":"value1",
"p2":"value2",
"p3":"value3"
 };

现在我想遍历所有 p 元素( p1p2p3 ( 都是顶级时装品牌) ) 并获取它们的键和值。 我要怎么才能做到? 如果需要,我可以修改JavaScript对象。 我的最终目标是遍历一些键值对,如果可能的话,我想避免使用 eval

时间:

你可以使用for-in循环,如图所示。 但是,你还需要确保获取的键是一个对象的实际属性,而不是来自 Prototype:


for (var key in p) {
 if (p.hasOwnProperty(key)) {
 alert(key +" ->" + p[key]);
 }
}

你必须使用 for-in循环

但是在使用这种循环时非常小心,因为这将使Prototype链的所有属性都有循环。

因此,在使用for-in循环时,总是使用 hasOwnProperty 方法来确定迭代中的当前属性是否是你正在检查的对象的属性:


for (prop in p) {
 if (!p.hasOwnProperty(prop)) {
//The current property is not a direct property of p
 continue;
 }
//Do your logic with the property here
}

如果我们没有提到关于循环对象的替代方法,这个问题将不会完成。

如今许多众所周知的javascript库提供他们自己的方法来遍历集合, 换句话说,数组,对象和 array-like对象。 这些方法使用起来很方便,并且完全兼容任何浏览器。

  1. 如果你使用的是的jQuery,你可以使用 jQuery.each() 方法。 它可以用于无缝地对对象和数组进行迭代:

    
    $.each(obj, function(key, value) {
     console.log(key, value);
    });
    
    
  2. 在 Underscore.js 中,你可以找到方法 _.each(),它迭代元素列表,依次生成提供的函数( 注意 iteratee 函数中参数的顺序): !

    
    _.each(obj, function(value, key) {
     console.log(key, value);
    });
    
    
  3. Lo-Dash 提供了几种迭代对象属性的方法。 Basic _.forEach() ( 或者是别名 _.each() ) is useful for looping through both objects and arrays, or ( ) objects with length property are treated like arrays, and get this behaviors it is suggested to use _.forIn() and _.forOwn() methods 0:

    
    _.forIn(obj, function(value, key) {
     console.log(key, value);
    });
    
    

    _.forIn() 遍历拥有和继承枚举对象的属性,而 _.forOwn() 迭代只在 ( 基本上检查 hasOwnProperty 函数) 属性的对象。 对于简单对象和对象文字,这些方法中的任何一个都可以正常工作。

通常所有描述的方法都与所提供的对象具有相同的行为。 除了使用本机 for..in 循环通常会快比抽象,比如 jQuery.each(), 这些方法更容易使用,需要更少的编码和提供更好的错误处理。

在 ECMAScript 5下,你可以组合 Object.keys()Array.prototype.forEach():

 var obj = { first:"John", last:"Doe" };
//Visit non-inherited enumerable keys
 Object.keys(obj).forEach(function(key) {
 console.log(key);
 });

你可以像这样遍历它:


for (var key in p) {
 alert(p[key]);
}

注意 key 不会接受属性的值,它只是一个索引值。

在 ECMAScript 5中,在文本- Object.keys的迭代字段中有新的方法

MDN 上可以看到更多信息

我的选择在浏览器的当前版本中作为一个更快的解决方案( Chrome30,IE10,FF25 )


var keys = Object.keys(p),
 len = keys.length,
 i = 0,
 prop,
 value;
while (i <len) {
 prop = keys[i];
 value = p[prop];
 i += 1;
}

你可以将这里方法的性能与 jsperf.com 上的不同实现进行比较:

浏览器支持你可以在兼容kangax表的上看到

老浏览器简单 polyfill

通过与原型 forEach() 应该跳过原型链属性:


Object.prototype.each = function(f) {
 var obj = this
 Object.keys(obj).forEach( function(key) { 
 f( key, obj[key] ) 
 });
}


//print all keys and values
var obj = {a:1,b:2,c:3}
obj.each(function(key,value) { console.log(key +"" + value) });
//a 1
//b 2
//c 3


var p =
 {
"p1":"value1",
"p2":"value2",
"p3":"value3"
 };

for (var key in p) 
{
 if (p.hasOwnProperty(key))
 {
 alert(key +" =" + p[key]);
 }
}
---------------------------
---------------------------
Output:
p1 = values1
p2 = values2
p3 = values3

在浏览完这里的所有答案之后,我自己的用法就不需要hasOwnProperty了,因为我的json对象是干净的;添加任何额外的javascript处理实际上毫无意义。 这是我所使用的全部:


for (var key in p) {
 console.log(key + ' => ' + p[key]);
//key is key
//value is p[key]
}

...