详解 ES8 的 Object.values() 方法及其在项目中的应用-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，对象是一种非常常用的数据结构。ES6 提供了许多对对象的新特性，而在 ES8 中又新增了一个非常实用的方法 Object.values()。本文将会详细讲解该方法的作用、用法及在项目中的应用。

Object.values() 方法介绍

Object.values() 方法返回一个给定对象自身可枚举属性的值组成的数组，数组中值的顺序与使用 for...in 循环的顺序相同（区别在于 for...in 循环枚举原型链中的属性）。

Object.values() 方法的用法

Object.values() 方法的用法非常简单，只需要将需要获取属性值的对象作为参数传递即可。

const obj = { a: 1, b: 'hello', c: [1, 2, 3] };
const values = Object.values(obj);
console.log(values); // [1, 'hello', [1, 2, 3]]

上述代码中，我们创建了一个包含三个属性的对象 obj。然后我们使用 Object.values() 方法获取其属性值组成的数组，并将其赋值给 values 变量。最后我们打印 values 数组，可以看到它的值为 [1, 'hello', [1, 2, 3]]，即 obj 对象的三个属性的值组成的数组。

Object.values() 方法在项目中的应用

Object.values() 方法在实际项目中的应用非常广泛，以下是几个常见的使用场景。

1. 获取对象属性值

我们可以使用 Object.values() 方法来获取一个对象中所有属性的值。比如我们有一个包含某个商品各项信息的对象，我们可以使用 Object.values() 方法来获取这个对象的所有属性值。

const product = {
  name: 'iPhone X',
  price: 999,
  color: 'silver',
  weight: '174g'
};
const values = Object.values(product);
console.log(values);

2. 计算对象属性值之和

我们可以使用 Object.values() 方法来计算一个对象中所有属性值的和。比如我们有一个包含某个订单各项信息的对象，我们可以使用 Object.values() 方法来计算这个订单的总价。

const order = {
  product: 'iPhone X',
  price: 999,
  quantity: 2,
  shippingFee: 20
};
const totalPrice = Object.values(order).reduce((acc, val) => acc + val);
console.log(totalPrice);

上述代码中，我们先使用 Object.values() 方法获取 order 对象中所有属性值组成的数组，然后使用数组的 reduce() 方法来计算这个订单的总价，最后打印总价。

3. 获取对象属性值中的最大值或最小值

我们可以使用 Object.values() 方法来获取一个对象属性值中的最大值或最小值。比如我们有一个包含某个销售记录各项信息的对象数组，我们可以使用 Object.values() 方法来获取这个数组中销售记录金额的最大值或最小值。

const salesRecords = [
  { product: 'iPhone X', price: 999, quantity: 2 },
  { product: 'iPad mini', price: 399, quantity: 3 },
  { product: 'Apple Watch', price: 399, quantity: 5 }
];
const maxPrice = Math.max(...salesRecords.map(record => Object.values(record)[1] * record.quantity));
const minPrice = Math.min(...salesRecords.map(record => Object.values(record)[1] * record.quantity));
console.log(maxPrice, minPrice);

上述代码中，我们先使用 map() 方法将 salesRecords 数组中每个对象的金额（即属性 price 与 quantity 的乘积）组成一个新数组，然后使用 Math.max() 和 Math.min() 方法获取这个新数组中的最大值和最小值，最后打印最大值和最小值。

总结

Object.values() 方法是 ES8 中非常实用的一个方法，它可以帮助我们快速获取一个对象中所有属性的值。除了在获取对象属性值方面的应用，Object.values() 方法也可以应用于计算对象属性值之和、获取对象属性值中的最大值或最小值等场合。通过学习本文介绍的内容，相信读者对 Object.values() 方法有了更深入的了解，并可以将其应用于实际项目中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64a819c148841e98944b5992