在 JavaScript 中，我们经常需要遍历对象来获取它的属性和属性值。ECMAScript 2017 引入了 Object.entries() 方法，它提供了一种简单的方式来遍历对象。本篇文章将介绍 Object.entries() 方法的用法和一些实际应用场景。
Object.entries() 方法简介
Object.entries() 方法返回一个给定对象可枚举属性的键值对数组。这个方法可以很方便地将对象转换为 [key, value] 的形式，方便迭代处理。
Object.entries() 方法的语法如下：
Object.entries(obj)
其中，obj 是要进行遍历的对象。
用 Object.entries() 方法遍历对象
接下来，我们将使用一个简单的 JavaScript 对象为例进行说明：
const obj = {
name: 'Tom',
age: 18,
gender: 'male'
};如果要遍历 obj 对象，我们可以使用 for...in 循环：
for (let key in obj) {
console.log(key, obj[key]);
}执行结果为：
name Tom age 18 gender male
使用 Object.entries() 方法，我们可以通过以下方式实现相同的效果：
for (let [key, value] of Object.entries(obj)) {
console.log(key, value);
}执行结果也为：
name Tom age 18 gender male
从上述例子中可以看出，使用 Object.entries() 方法可以更加方便地遍历对象，同时可以直接获取键值对。
实际应用场景
Object.entries() 方法可以用于循环遍历 JSON 对象、数组中的对象等等。
在 React 等前端框架中，我们经常需要循环遍历数组或者对象，并动态生成组件。使用 Object.entries() 方法，我们可以更加方便地实现这个功能。例如，我们有以下数组：
const arr = [
{ name: 'Tom', age: 18 },
{ name: 'Jerry', age: 20 },
{ name: 'Mike', age: 22 }
];我们可以使用 Object.entries() 方法，对这个数组进行遍历：
// javascriptcn.com 代码示例
<div>
{
arr.map((item, index) => (
<ul key={index}>
{
Object.entries(item).map(([key, value]) => (
<li key={key}>
{key}: {value}
</li>
))
}
</ul>
))
}
</div>上面的代码可以循环遍历数组 arr，并动态生成多个 ul 组件，每个组件中包含多个 li 组件，可以输出每个对象的键值对。
总结
Object.entries() 方法提供了一种简单的方式来遍历对象。它可以将对象转换为 [key, value] 的形式，方便迭代处理。在实际的应用场景中，Object.entries() 方法可以很方便地循环遍历 JSON 对象、数组中的对象等等，并实现动态生成组件等功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528ee1c7d4982a6ebb7ccc8