如何循环或枚举JavaScript对象？

我有一个JavaScript对象，如下所示：

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

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

当前回答

在可枚举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。

2020-02-22 20:38:36

其他回答

在javascript中迭代对象的多种方法

正在使用。。。在回路中

变量p={“p1”：“值1”，“p2”：“值2”，“p3”：“值3”};for（输入p）{if（p.hasOwnProperty（键））{console.log（`${key}:${p[key]}`）}}

正在使用。。。回路的

变量p={“p1”：“值1”，“p2”：“值2”，“p3”：“值3”};for（对象.keys（p）的let键）{console.log（`key:${key}&value:${p[key]}`）}

将forEach（）与Object.keys、Object.values、Object.entries一起使用

变量p={“p1”：“值1”，“p2”：“值2”，“p3”：“值3”};Object.keys（p）.forEach（key=>{console.log（`${key}:${p[key]}`）；});对象.values（p）.forEach（值=>{console.log（值）；});Object.entries（p）.forEach（（[key，value]）=>{console.log（`$｛key｝：$｛value｝`）})

2020-01-04 11:13:47

您可以使用for in循环，如其他人所示。然而，您还必须确保获得的密钥是对象的实际属性，而不是来自原型。

下面是片段：变量p={“p1”：“值1”，“p2”：“值2”，“p3”：“值3”};for（p中的var键）{if（p.hasOwnProperty（键））{console.log（键+“->”+p[key]）；}}

对于具有Object.keys（）选项的：

变量p={0：“值1”，“b”：“值2”，键：“value3”};for（Object.keys（p）的var键）{console.log（key+“->”+p[key]）}

请注意for-of而不是for-in的用法，如果不使用，它将在命名的财产上返回undefined，并且Object.keys（）确保只使用对象自己的财产，而不使用整个prototype-chain财产

使用新的Object.entries（）方法：

注意：Internet Explorer本机不支持此方法。您可以考虑将Polyfill用于较旧的浏览器。

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

for (const [key, value] of Object.entries(p)) {
  console.log(`${key}: ${value}`);
}

2009-03-26 06:12:13

考虑到ES6，我想添加自己的一勺糖，并提供另一种方法来迭代对象的财产。

由于纯JS对象不能立即迭代，因此我们无法使用。。用于迭代其内容的循环。但没有人能阻止我们使其可迭代。

让我们有书的对象。

let book = {
  title: "Amazing book",
  author: "Me",
  pages: 3
}

book[Symbol.iterator] = function(){

  let properties = Object.keys(this); // returns an array with property names
  let counter = 0;
  let isDone = false;

  let next = () => {
    if(counter >= properties.length){
      isDone = true;
    }
    return { done: isDone, value: this[properties[counter++]] }
  }

  return { next };
}

既然我们做到了，我们可以这样使用它：

for(let pValue of book){
  console.log(pValue);
}
------------------------
Amazing book
Me
3

或者如果你知道ES6发电机的功率，那么你当然可以让上面的代码更短。

book[Symbol.iterator] = function *(){

  let properties = Object.keys(this);
  for (let p of properties){
    yield this[p];
  }

}

当然，通过在原型级别上使Object可迭代，您可以对所有对象应用这样的行为。

Object.prototype[Symbol.iterator] = function() {...}

此外，符合可迭代协议的对象可以与新的ES2015特性扩展运算符一起使用，因此我们可以将对象属性值作为数组读取。

let pValues = [...book];
console.log(pValues);
-------------------------
["Amazing book", "Me", 3]

或者可以使用析构函数赋值：

let [title, , pages] = book; // notice that we can just skip unnecessary values
console.log(title);
console.log(pages);
------------------
Amazing book
3

您可以使用我上面提供的所有代码查看JSFiddle。

2016-09-01 20:15:42

您可以像这样迭代：