迭代对象属性

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 只需检查这是否是特定于此类的属性,而不是从基类继承的属性.

Answer 2

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

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循环更好(也更可读).

它支持这些浏览器:

• Firefox(Gecko):4(2.0)
• Chrome:5
• Internet Explorer:9

有关更多信息,请参阅Mozilla Developer Network Object.keys()的参考.

Answer 3

我们在2017年的女孩和男人,我们没有那么多的时间打字......所以,让我们做这个很酷的新幻想ECMAScript 2016:

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

Answer 4

这是for...in statement(MDN,ECMAScript规范).

你可以把它读作" 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循环.查看Mozilla的文档.

Answer 7

if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

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

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj.
// Keys are just the regular incremental numbers starting from 0.
// If there is no keys in obj, it will return empty array = []
// Then it will get its length. At this point, it checks: 
// If it has at least one element, it means it's bigger than 0 
// which evaluates to true and the bellow code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // 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()方法返回在给定对象的自己的可枚举的属性[键,值]对的数组,在相同的顺序,通过提供一种用于... in循环(不同之处在于一个用于-in循环枚举原型链中的属性也是如此).

基本上使用Object.entries,我们可以放弃以下额外的步骤,这对于旧的for ... in循环是必需的:

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

Answer 9

jquery允许你现在这样做:

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

Answer 10

多米尼克的答案是完美的,我只是喜欢这样做,因为阅读更清晰:

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

    // Do stuff...
}

Answer 11

上面的答案有点烦人,因为在你确定它是一个对象之后,它们没有解释你在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 12

添加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 13

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

对于...在：

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

为每个：

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 14

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 15

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

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

// a
// 3
// 2

Answer 16

你可以使用Lodash.文档

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

Answer 17

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

Answer 18

您的for循环正在迭代对象的所有属性obj.propt在for循环的第一行中定义.它是一个字符串,是obj对象属性的名称.在循环的第一次迭代中,propt将是"名称".

Answer 19

JavaScript中的对象是属性的集合,因此可以在每个语句的循环中循环.

您应该将其obj视为关键值集合.

Answer 20

现在,您可以通过添加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 21

在JavaScript中迭代对象的方式类型

• 对于...在循环

• for ... of循环

• forEach（） 方法

• map（）方法

let obj = {
  city1: 'BOM',
  city2: 'BLR',
  city3: 'HYD',
  state: {
    city1: 'Sub-city1',
    city2: 'Sub-city2'
  }
}
console.log('----------------using for...in loop------')
for(let entry in obj) 
  console.log(entry +" -> "+ obj[entry])

for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key + " -> " + obj[key]);
    }
}
console.log('----------------using for...of loop------')
for (const key of Object.keys(obj)) 
    console.log(key +" -> "+ obj[key]);

for (const [key, value] of Object.entries(obj)) 
    console.log(key +" -> "+ value);

console.log('----------------using forEach loop------')
Object.entries(obj).forEach(([key, value]) => console.log(key +" -> "+ value));
    
console.log('----------------using map function------')
Object.entries(obj).map(([k,v])=> console.log(k+' -> '+v))

嵌套对象的迭代方法

let obj = {
  city1: 'ALD',
  city2: 'BLR',
  city3: 'HYD',
  state: {
    city4: 'Sub-city1',
    city5: 'Sub-city2'
  }
}
function nestedObj(obj) {
    for (let key in obj) {
        // checking if it's nested to iterate again
        if (obj.hasOwnProperty(key) && 
           (typeof obj[key] === "object")) {
            nestedObj(obj[key])
        } else {
            // showing the flat attributes
            console.log(key + " -> " + obj[key]);
        }
    }
}
nestedObj(obj);

Answer 22

我想补充上面的答案，因为你可能有与 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]);
    }
}

当迭代和的属性时，您可能会惊讶地看到控制台日志记录0、等。这些对象是序列，序列的索引是 Javascript 中该对象的属性。1prop1prop2prop3_1

递归迭代 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 23

如果运行节点，我建议：

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

Answer 24

虽然最受好评的答案是正确的，但这是一个替代用例，即如果您要遍历一个对象并想最后创建一个数组。使用.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]
})