如何迭代JavaScript对象？

Question

我在JavaScript中有一个对象:

{
    abc: '...',
    bca: '...',
    zzz: '...',
    xxx: '...',
    ccc: '...',
    // ...
}

我想使用for循环来获取其属性.我想在部分中迭代它(不是一次所有的对象属性).

使用简单的数组我可以使用标准for循环:

for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last

但是如何用物体做呢？

Answer 1

对于大多数对象,请使用for .. in:

for (let key in yourobject) {
  console.log(key, yourobject[key]);
}

使用ES6,如果您同时需要键和值,请执行

for (let [key, value] of Object.entries(yourobject)) {
    console.log(key, value);
}

要避免记录继承的属性,请使用hasOwnProperty进行检查:

for (let key in yourobject) {
   if (yourobject.hasOwnProperty(key)) {
      console.log(key, yourobject[key]);
   }
}

hasOwnProperty如果您使用的是简单对象(例如您自己制作的对象),则无需在迭代键时进行检查{}.

此MDN文档更一般地解释了如何处理对象及其属性.

如果你想"以块为单位",最好是提取数组中的键.由于订单无法保证,这是正确的方法.在现代浏览器中,您可以使用

let keys = Object.keys(yourobject);

为了更兼容,你最好这样做:

 let keys = [];
 for (let key in yourobject) {      
     if (yourobject.hasOwnProperty(key)) keys.push(key);
 }

然后,您可以通过索引迭代您的属性yourobject[keys[i]]:

for (let i=300; i < keys.length && i < 600; i++) { 
   console.log(keys[i], yourobject[keys[i]]);
}

Answer 2

这是现代浏览器的另一种迭代解决方案:

Object.keys(obj).filter(function(k, i) {
    return i >= 100 && i < 300;
}).forEach(function(k) {
    console.log(obj[k]);
});

甚至更短:

Object.keys(obj).forEach(function(k, i) {
    if (i >= 100 && i < 300) {
        console.log(obj[k]);
    }
});

但是,您必须考虑JavaScript对象中的属性未排序,即没有顺序.

Answer 3

用Object.entries你做这样的事情.

 // array like object with random key ordering
 const anObj = { 100: 'a', 2: 'b', 7: 'c' };
 console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]

Object.entries()方法返回给定对象自己的可枚举属性[key,value]的数组

所以你可以遍历Object并拥有key和value为每个对象获取这样的东西.

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
   const key   = obj[0];
   const value = obj[1];

   // do whatever you want with those values.
});

或者像这样

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

有关参考,请查看对象条目的MDN文档

Answer 4

使用新的ES6/ES2015功能,您不必再使用对象来迭代哈希.您可以使用地图.Javascript Maps将密钥保持在插入顺序中,这意味着您可以迭代它们而无需检查hasOwnProperty,这总是真的很糟糕.

迭代地图:

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

for (var key of myMap.keys()) {
  console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"

for (var value of myMap.values()) {
  console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

或使用forEach:

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

Answer 5

如果在迭代时需要键和值，则可以对Object.entries使用for ... of循环。

const myObj = {a: 1, b: 2}

for (let [key, value] of Object.entries(myObj)) {
    console.log(`key=${key} value=${value}`)
}

// output: 
// key=a value=1
// key=b value=2

Answer 6

唯一可行的方法是将对象数据保存到2个数组,一个键和一个数据:

var keys = [];
var data = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        keys.push(key);
        data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
    }
}

然后,您可以像通常那样迭代数组:

for(var i = 0; i < 100; i++){
    console.log(keys[i], data[i]);
    //or
    console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
    console.log(keys[i], data[i]);
}

我没有使用Object.keys(obj),因为那是IE 9+.

Answer 7

->如果我们使用并找到对象数组的键来遍历 JavaScript 对象

Object.keys(Array).forEach(key => {

 console.log('key',key)

})