迭代对象属性

时间:2011-11-29 14:30:26

标签: javascript loops object

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

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

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

31 个答案:

答案 0 :(得分:2268)

迭代属性需要进行额外的hasOwnProperty检查:

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

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

hasOwnProperty只是检查这是否是特定于此类的属性,而不是从基类继承的属性。

答案 1 :(得分:993)

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

在这些浏览器上支持:

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

有关更多信息,请参阅the Mozilla Developer Network Object.keys()'s reference

答案 2 :(得分:228)

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

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

答案 3 :(得分:201)

这是for...in statementMDNECMAScript spec)。

您可以将其视为“ FOR 每个属性 IN obj对象,将每个属性分配给 PROPT 变量转”。

答案 4 :(得分:84)

在即将推出的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 => ...)

答案 5 :(得分:36)

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

答案 6 :(得分:21)

jquery允许你现在这样做:

def my_function(ints):
    res = []
    for i, el in enumerate(ints):
        res.append(reduce(lambda x, y: x*y, ints[:i] + ints[i+1:]))
    return res

print my_function([1,2,3,4])
>>> [24, 12, 8, 6]

答案 7 :(得分:19)

Dominik's答案是完美的,我只是喜欢这样做,因为阅读更清晰:

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

    // Do stuff...
}

答案 8 :(得分:18)

如果您的环境支持 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
}

答案 9 :(得分:18)

上述答案有点烦人,因为在你确定它是一个对象之后,他们不会解释你在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版本中工作;)

答案 10 :(得分:14)

添加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的{​​{1}}迭代

答案 11 :(得分:11)

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

require': cannot load such file -- dl/import (LoadError)
        from D:/Herramientas/Ruby/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in

for ... in循环遍历对象的可枚举属性。无论您定义哪个变量,还是放入for ... in循环,每次变换到它迭代的下一个属性时都会更改。 for ... in循环中的变量遍历键,但它的值是键的值。例如:

<top (required)>'
        from D:/Herramientas/Ruby/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in

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

我希望这会有所帮助。

答案 12 :(得分:11)

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

  • 用于... 循环

  • 用于...的循环

  • 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);

答案 13 :(得分:11)

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

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

// a
// 3
// 2

答案 14 :(得分:10)

你可以使用Lodash。 The documentation

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

答案 15 :(得分:9)

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

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

答案 16 :(得分:9)

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

答案 17 :(得分:9)

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

答案 18 :(得分:8)

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

答案 19 :(得分:6)

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
// If there is no keys in obj, it will return empty array = []
// Then it will get it's length, if it has at least one element,
// 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]);
    });
}

答案 20 :(得分:4)

如果正在运行节点,我建议:

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

答案 21 :(得分:4)

还添加递归方式:

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"} }); 

答案 22 :(得分:3)

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

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);

答案 23 :(得分:2)

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

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

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

console.log(someVariable); // outputs planet

答案 24 :(得分:2)

虽然评分最高的答案是正确的,但这是一个替代用例,即,如果您正在遍历一个对象并希望最后创建一个数组。使用.map代替forEach

const newObj = Object.keys(obj).map(el => {
 //What ever you want to do
})

答案 25 :(得分:2)

我想添加上面的答案,因为你可能有不同的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]);
    }
}

在迭代01以及prop1的属性时,您可能会惊讶地看到控制台记录prop2prop3_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]);

            }

     }
}

答案 26 :(得分:2)

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

for...in

for (const key in info) {
    consoled.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
});

答案 27 :(得分:1)

为了进一步细化已接受的答案,值得注意的是,如果使用var object = Object.create(null)实例化对象,则object.hasOwnProperty(property)将触发TypeError。因此,为了安全起见,您需要从原型中调用它:

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

答案 28 :(得分:1)

选中此链接将有助于https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);

答案 29 :(得分:0)

检查类型

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

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0]

发现它只是一个字符串(属性名称)。由于for-in js“内置”循环的工作方式,它具有对象中的每个属性。

typeof propt

答案 30 :(得分:0)

如果你只想迭代映射属性值,那么 lodash 有 _.mapValues

const obj = {
  a: 2,
  b: 3
}
const res = _.mapValues(obj, v => v * 2)
console.log(res)
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>