遍历对象属性

Question

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

变量propt如何表示对象的属性？它不是内置的方法或属性。为什么它会产生对象中的每个属性？

Answer 1

遍历属性需要这个额外的hasOwnProperty检查：

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

这是必要的，因为对象的原型包含对象的附加属性，这些属性在技术上是对象的一部分。这些附加属性继承自基对象类，但仍然是obj 的属性。

hasOwnProperty 只是检查这是否是该类特有的属性，而不是继承自基类的属性。

---

也可以通过对象本身调用hasOwnProperty：

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

但是如果对象有一个不相关的同名字段，这将失败：

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

这就是为什么通过Object.prototype 调用它更安全的原因：

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

Answer 2

从 JavaScript 1.8.5 开始，您可以使用 Object.keys(obj) 来获取在对象本身上定义的属性数组（对于 obj.hasOwnProperty(key) 返回 true 的属性）。

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

这比使用 for-in 循环更好（并且更具可读性）。

在以下浏览器上支持：

• 火狐（壁虎）：4 (2.0)
• 铬：5
• Internet Explorer：9

更多信息请参见the Mozilla Developer Network Object.keys()'s reference。

Answer 3

2019 年的女孩们，我们没有那么多时间打字……所以让我们来做这个酷炫的新奇特 ECMAScript 2016：

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

Answer 4

是for...in statement（MDN，ECMAScript spec）。

您可以将其解读为“FOR 每个属性IN obj 对象，依次将每个属性分配给PROPT 变量” .

Answer 5

在最新的 ES 实现中，您可以使用Object.entries：

for (const [key, value] of Object.entries(obj)) { }

或

Object.entries(obj).forEach(([key, value]) => ...)

如果您只想遍历值，请使用 Object.values：

for (const value of Object.values(obj)) { }

或

Object.values(obj).forEach(value => ...)

Answer 6

这只是一个for...in 循环。查看the documentation at Mozilla。

Answer 7

if (typeof obj === 'object' && obj !== null) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj is neither null nor undefined, which means it's safe to get its keys. 
// Otherwise it will give you a "TypeError: Cannot convert undefined or null to object" if obj is null or undefined.
// NOTE 1: You can use Object.hasOwnProperty() instead of Object.keys(obj).length
// NOTE 2: No need to check if obj is an array because it will work just fine.
// NOTE 3: No need to check if obj is a string because it will not pass the if typeof obj is Object statement.
// NOTE 4: No need to check if Obj is undefined because it will not pass the if type obj is Object statement either.
if (typeof obj === 'object' && obj !== null) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

Answer 8

如果您的环境支持 ES2017，那么我会推荐 Object.entries：

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

如Mozillas Object.entries()文档所示：

Object.entries() 方法返回给定对象自己的数组 可枚举属性 [key, value] 对，顺序相同 由 for...in 循环提供（区别在于 for-in 循环 也枚举原型链中的属性）。

基本上使用 Object.entries 我们可以放弃旧的 for...in 循环所需的以下额外步骤：

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

Answer 9

Dominik's 答案是完美的，我只是更喜欢这样做，因为它更容易阅读：

for (var property in obj) {
    if (!obj.hasOwnProperty(property)) continue;

    // Do stuff...
}

Answer 10

jquery 允许你现在这样做：

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Answer 11

for...in 循环表示对象中的每个属性，因为它就像一个 for 循环。您通过执行以下操作在 for...in 循环中定义了 propt：

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

for...in 循环遍历对象的可枚举属性。无论您定义或放入 for...in 循环中的哪个变量，每次进入它迭代的下一个属性时都会发生变化。 for...in 循环中的变量遍历键，但它的值是键的值。例如：

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

您可以看到变量与变量的值有何不同。相比之下，for...of 循环则相反。

我希望这会有所帮助。

Answer 12

上面的答案有点烦人，因为在确保它是一个对象之后，它们没有解释你在 for 循环中做了什么：你不直接访问它！您实际上只收到了您需要应用到 OBJ 的 KEY：

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

这都是 ECMA5 安全的。甚至可以在 Rhino 等蹩脚的 JS 版本中工作；）

Answer 13

添加 ES2015 对 Reflect.ownKeys(obj) 的使用，并通过迭代器迭代属性。

例如：

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

可以被迭代

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

如果您想直接迭代对象的键值，您可以定义iterator，就像 JavaScipts 的字符串、数组、类型化数组、Map 和 Set 的默认迭代器一样。

JS 将尝试通过默认的迭代器属性进行迭代，该属性必须定义为Symbol.iterator。

如果您希望能够遍历所有对象，可以将其添加为 Object 的原型：

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

这将使您能够使用 for...of 循环迭代对象的值，例如：

for(val of obj) { console.log('Value is:' + val ) }

警告：截至撰写此答案时（2018 年 6 月），除 IE 外，所有其他浏览器都支持生成器和 for...of 迭代，通过 Symbol.iterator

Answer 14

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).forEach((item) => {console.log("item", obj[item])})

// a
// 3
// 2

Answer 15

您可以使用 Lodash。 The documentation

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

Answer 16

您可以使用for...in 和forEach 循环访问对象的嵌套属性。

对于...在：

for (const key in info) {
    console.log(info[key]);
}

forEach:

Object.keys(info).forEach(function(prop) {
    console.log(info[prop]);
    // cities: Array[3], continent: "North America", images: Array[3], name: "Canada"
    // "prop" is the property name
    // "data[prop]" is the property value
});

Answer 17

Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

Answer 18

如今，您只需添加 Symbol.iterator 方法即可将标准 JS 对象转换为可迭代对象。然后您可以使用for of 循环并直接访问其值，甚至也可以在对象上使用扩展运算符。凉爽的。让我们看看我们是如何做到的：

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

Answer 19

您的for 循环正在遍历对象obj 的所有属性。 propt 在 for 循环的第一行中定义。它是一个字符串，是obj 对象的属性名称。在循环的第一次迭代中，propt 将是“名称”。

Answer 20

JavaScript 中的对象是属性的集合，因此可以在 for each 语句中循环。

您应该将obj 视为一个键值集合。

Answer 21

如果运行 Node，我建议：

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

Answer 22

虽然评价最高的答案是正确的，但这里有一个替代用例，即如果您正在迭代一个对象并希望最终创建一个数组。使用.map 而不是forEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

Answer 23

我想补充一下上面的答案，因为您可能有与 Javascript 不同的意图。 JSON 对象和 Javascript 对象是不同的东西，您可能想使用上面提出的解决方案遍历 JSON 对象的属性，然后感到惊讶。

假设您有一个 JSON 对象，例如：

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

遍历其“属性”的错误方式：

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

在遍历prop1 和prop2 和prop3_1 的属性时，您可能会惊讶地看到控制台记录0、1 等。这些对象是序列，序列的索引是 Javascript 中该对象的属性。

递归遍历 JSON 对象属性的更好方法是首先检查该对象是否为序列：

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

Answer 24

同时添加递归方式：

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

用法：

iterate({ foo: "foo", bar: { foo: "foo"} }); 

Answer 25

for..in 循环的作用是创建一个新变量（var someVariable），然后将给定对象的每个属性一一存储在这个新变量（someVariable）中。因此，如果您使用块 {}，您可以迭代。考虑以下示例。

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

Answer 26

我在这里迭代每个节点并创建有意义的节点名称。如果您注意到，instanceOf Array 和 instanceOf Object 几乎做同样的事情（在我的应用程序中，我给出了不同的逻辑）

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

注意 - Ondrej Svejdar 的回答启发了我。但是这个解决方案性能更好，不那么模糊

Answer 27

你基本上想遍历对象中的每个属性。

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

Answer 28

为了进一步完善已接受的答案，值得注意的是，如果您使用 var object = Object.create(null) 实例化对象，那么 object.hasOwnProperty(property) 将触发 TypeError。所以为了安全起见，你需要像这样从原型中调用它：

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

Answer 29

实现这一点的简单明了的方法，即不迭代原型的现代 JS，是这样的：

Object.prototype.iterateProperties = ((callback) => {
   Object.keys(obj).filter(key => obj.hasOwnProperty(key)).forEach((key) => {
      callback(key, obj[key]);
   });
});

解释

这段代码在所有对象的原型中创建了一个函数——意味着在每个Object 实例中都可以访问的函数。 该函数迭代对象的所有自身属性并运行一个回调函数，该函数为对象中的每个属性获取(key, value)。

使用示例

obj.iterateProperties((key, value) => console.log(key + ': ' + value));

Answer 30

检查类型

您可以通过以下方式检查propt如何表示对象属性

typeof propt

发现它只是一个字符串（属性名称）。由于for-in js“内置”循环的工作方式，它提出了对象中的每个属性。

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(typeof propt,  propt + ': ' + obj[propt]);
}