Object.entries 和 Object.values 的遍历技巧

ES8 (ECMAScript 2017) 引入了两个非常实用的对象方法：Object.entries() 和 Object.values()，它们极大地简化了对象遍历和操作的过程。本文将深入探讨这两个方法的用法及其在实际开发中的应用技巧。

Object.entries() 方法

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致。

基本用法

javascript 复制代码

const person = {
  name: 'Alice',
  age: 25,
  profession: 'Developer'
};

const entries = Object.entries(person);
console.log(entries);
// 输出: [ ['name', 'Alice'], ['age', 25], ['profession', 'Developer'] ]

遍历技巧

与数组方法结合使用

javascript 复制代码

const person = {
  name: 'Alice',
  age: 25,
  profession: 'Developer'
};

// 使用map转换
const formatted = Object.entries(person).map(([key, value]) => {
  return `${key}: ${value}`;
});
console.log(formatted);
// 输出: ["name: Alice", "age: 25", "profession: Developer"]

转换为Map对象

javascript 复制代码

const person = {
  name: 'Alice',
  age: 25,
  profession: 'Developer'
};

const personMap = new Map(Object.entries(person));
console.log(personMap.get('name')); // 输出: Alice

条件过滤

javascript 复制代码

const person = {
  name: 'Alice',
  age: 25,
  profession: 'Developer'
};

const filtered = Object.entries(person)
  .filter(([key, value]) => typeof value === 'string')
  .reduce((obj, [key, value]) => {
    obj[key] = value;
    return obj;
  }, {});

console.log(filtered);
// 输出: { name: "Alice", profession: "Developer" }

Object.values() 方法

Object.values() 方法返回一个给定对象自身可枚举属性值的数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致。

基本用法

javascript 复制代码

const person = {
  name: 'Alice',
  age: 25,
  profession: 'Developer'
};

const values = Object.values(person);
console.log(values);
// 输出: ["Alice", 25, "Developer"]

遍历技巧

快速计算属性值总和

javascript 复制代码

const shoppingCart = {
  apples: 2.5,
  bananas: 1.75,
  oranges: 3.2
};

const total = Object.values(shoppingCart).reduce((sum, price) => sum + price, 0);
console.log(total); // 输出: 7.45

检查所有值是否满足条件

javascript 复制代码

const formData = {
  username: 'alice123',
  password: 'securePass123',
  email: 'alice@example.com'
};

const allFieldsFilled = Object.values(formData).every(value => value.trim() !== '');
console.log(allFieldsFilled); // 输出: true

查找最大值/最小值

javascript 复制代码

const scores = {
  math: 90,
  science: 85,
  history: 92,
  english: 88
};

const highestScore = Math.max(...Object.values(scores));
console.log(highestScore); // 输出: 92

组合使用技巧

Object.entries() 和 Object.values() 可以结合使用来解决更复杂的问题：

javascript 复制代码

const inventory = {
  apples: { price: 1.2, stock: 50 },
  bananas: { price: 0.8, stock: 75 },
  oranges: { price: 1.5, stock: 40 }
};

// 计算每种水果的总价值并找出最有价值的商品
const mostValuable = Object.entries(inventory)
  .map(([fruit, details]) => ({
    fruit,
    totalValue: details.price * details.stock
  }))
  .reduce((max, item) => item.totalValue > max.totalValue ? item : max);

console.log(mostValuable);
// 输出: { fruit: "bananas", totalValue: 60 }

注意事项

Object.entries() 和 Object.values() 都只返回对象自身的可枚举属性，不会包含原型链上的属性。
对于Symbol属性，这两个方法都会忽略它们。
在遍历顺序上，对于数字键，会按照数字大小升序排列；对于字符串键，按照属性创建时间排序。
如果需要包含不可枚举属性，可以使用 Object.getOwnPropertyNames() 或 Reflect.ownKeys()。

总结

ES8 引入的 Object.entries() 和 Object.values() 方法为对象操作提供了更强大的工具，特别是与数组方法结合使用时，能够以更函数式的方式处理对象数据。掌握这些技巧可以让你写出更简洁、更易读的代码，提高开发效率。