我有一个JavaScript对象,如下所示:

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

我如何循环遍历p的所有元素(p1、p2、p3…)并获取它们的键和值?


当前回答

您可以像这样迭代:

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

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

其他回答

自ES2015以来,您可以使用for of循环直接访问元素:

// before ES2015
for(var key of elements){
  console.log(elements[key]);
}


// ES2015
for(let element of elements){
  console.log(element);
}

希望这对某人有所帮助。

在查看了这里的所有答案后,hasOwnProperty对于我自己的使用是不需要的,因为我的json对象是干净的;添加任何额外的javascript处理确实没有意义。这就是我所使用的:

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

我在使用Angular时遇到了类似的问题,这里是我找到的解决方案。

步骤1。获取所有对象关键点。使用Object.keys。此方法返回给定对象自己的可枚举财产的数组。

步骤2。创建一个空数组。这是所有财产都将存在的地方,因为您的新ngFor循环将指向此数组,所以我们必须捕获所有属性。步骤3。迭代抛出所有键,并将每个键推入您创建的数组中。这是代码中的样子。

    // Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.push(evilResponseProps[prop]);
}

这里是原始帖子的链接。https://medium.com/@papponmx/循环对象属性-带ngfor-in-angular-869cd7b2ddcc

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

注意:可以对数组执行此操作,但也要对长度和其他财产进行迭代。

在可枚举JavaScript对象上进行循环的一个好方法是使用object.keys或object.entries并使用map函数,这对于ReactJS来说可能是非常棒和常见的。如下所示:

// assume items:

const items = {
  first: { name: 'phone', price: 400 },
  second: { name: 'tv', price: 300 },
  third: { name: 'sofa', price: 250 },
};

对于循环和显示ReactJS上的一些UI,如下所示:

~~~
<div>
  {Object.entries(items).map(([key, ({ name, price })]) => (
    <div key={key}>
     <span>name: {name}</span>
     <span>price: {price}</span>
    </div>
  ))}
</div>

实际上,我使用了两次析构函数赋值,一次用于获取key,一次是获取name和price。