面试时，我问如何迭代一个对象？

上周我在面试一个工作近3年的前端工程师，我问了一个关于JS对象如何遍历其属性的问题。 不管你知与不知道，这里，我都把这个问题详细解答一下

01. 介绍对象

如果我问如何遍历一个数组的所有元素，那可能比较容易答出来 看下面这段代码

let numbers= [13, 10, 56];

// forEach方法
numbers.forEach((num) => console.log(num));

// forOf方法
for (num of numbers) {
  console.log(num);
}

在JavaScript中对象默认是不可迭代的，故对象不能像数组一样进行循环，因为对象并没有内置length属性。 所以像上面代码一样，如果你使用forEach和forof去遍历对象的时候，就会报undefined的错。 若要遍历对象，这些方法行不通。

02. 遍历方式

那如何来遍历一个对象呢？毫无疑问，首先你需要想到的是forin。 来看一下forin如何遍历

const user = {
  name: 'ZZ',
  age: 30,
  city: 'Bei Jing',
};

for (const property in user) {
  console.log(`${property}: ${user[property]}`);
}

这种方式有效，能遍历到对象上的每一个属性。当然，也包括对象原型链上的每一个属性。 也正因为这一点，很有可能会导致具有长原型链的对象出现性能问题。 所以，我们需要采用一些手段，来优化这个问题，使用hasOwnProperty方法先判断属性是否存在于对象上。

for (const property in user) {
  if (user.hasOwnProperty(property)) {
    const key = property;
    const value = user[property];
    console.log(`Key: ${key}, Value: ${value}`);
  }
}

03. 最优方式

ES6之后，引入了几个替代的方法，可以避免使用forin时的一些限制。 出现了三个方法，Object.keys，Object.values，Object.entries。这三个方法的作用，这里就不多赘述了， 直接来看如何使用Object.entries迭代一个数组。

代码如下

const userName = Object.entries(user);

// 使用forof
for (const [key, value] of userName) {
  console.log(`${key}: ${value}`);
}

// 使用foreach
userName.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

总结

使用后面提到这几个方法来遍历对象更高效且更具有可读性。