在 ES7 中，JavaScript 引入了 Object.entries() 和 Object.values() 方法。这两个方法可以用来遍历对象的属性和值。本文将详细介绍这两个方法的用法和示例代码，并探讨它们对前端开发的指导意义。
Object.entries() 方法
Object.entries() 方法返回一个给定对象的所有可枚举属性的键值对数组。该数组的元素是形如 [key, value] 的数组。
语法：
Object.entries(obj)
其中，obj 是要被转换为键值对数组的对象。
示例代码：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]在上面的例子中，Object.entries() 方法将 obj 对象转换为一个由键值对数组组成的数组。
Object.values() 方法
Object.values() 方法返回给定对象的所有可枚举属性值的数组。
语法：
Object.values(obj)
其中，obj 是要被转换为属性值数组的对象。
示例代码：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // [ 'bar', 42 ]在上面的例子中，Object.values() 方法将 obj 对象的属性值转换为一个由值组成的数组。
指导意义
Object.entries() 和 Object.values() 方法的引入，可以极大地简化对对象的遍历操作。在实际开发中，我们经常需要遍历对象的属性和值，以便进行相关的操作。使用这两个方法可以让我们的代码更加简洁和易于理解。
下面是一个使用 Object.entries() 方法的例子，它展示了如何使用 for...of 循环遍历一个对象的属性和值：
const obj = { foo: 'bar', baz: 42 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
// Output:
// foo: bar
// baz: 42在上面的例子中，我们使用了解构赋值来将每个键值对数组中的元素分别赋值给 key 和 value 变量。然后，我们使用模板字面量来输出每个属性和值。
总结
Object.entries() 和 Object.values() 方法是 ES7 中引入的两个非常有用的方法。它们可以让我们更加方便地遍历对象的属性和值，并且可以让我们的代码更加简洁和易于理解。在实际开发中，我们可以根据需要选择使用这两个方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66271ed9c9431a720c3a6d03