ES8 新特性之 Object.values 和 Object.entries 的使用方法详解

前言

ES8 是 ECMAScript 的新版本，随着社区的发展和需求的增加，ES8 为开发者带来了很多新的特性。其中，Object.values 和 Object.entries 是两个非常实用的新特性。本文将详细介绍这两个新特性的使用方法，包括示例代码和实际应用场景。

Object.values

Object.values() 方法用于获取对象自身可枚举属性的值，返回一个值数组。这个方法可以方便的获取对象的属性值，并且可以调用数组的各种方法对它们进行处理。

Object.values() 的使用方法非常简单，只需要将对象作为参数传入即可。例如：

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

Object.values() 返回的是一个数组，数组的值就是对象的属性值。如果对象没有任何属性，返回空数组 []。

我们也可以将 Object.values() 方法放在数组的原型方法中使用，以便更好地进行处理。例如：

Array.prototype.sum = function() {
  return this.reduce((acc, val) => acc + val);
};

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);

console.log(values.sum()); // 6

这里定义了一个 sum() 方法，它可以计算数组的和。当我们使用 Object.values() 方法获取对象的属性值时，返回的是一个数组，我们可以通过 sum() 方法计算数组的和。

Object.entries

Object.entries() 方法用于将对象转换为一个键值对的二维数组。这个方法可以方便的获取对象的所有属性和值，并且可以调用数组的各种方法对它们进行处理。

Object.entries() 的使用方法与 Object.values() 类似，只需要将对象作为参数传入即可。例如：

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

Object.entries() 返回的是一个二维数组，数组的第一个元素是对象的键，第二个元素是对象的值。如果对象没有任何属性，返回空数组 []。

我们可以在数组的原型方法中使用 Object.entries() 方法，以便更好地进行处理。例如：

Array.prototype.objSum = function() {
  return this.reduce((acc, [key, val]) => acc + val, 0);
};

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);

console.log(entries.objSum()); // 6

这里定义了一个 objSum() 方法，它可以计算对象的所有属性值的和。当我们使用 Object.entries() 方法获取对象的所有属性和值时，返回的是一个二维数组，我们可以通过 objSum() 方法计算对象的所有属性值的和。

实际应用场景

Object.values 和 Object.entries 的实际应用场景非常广泛，下面列举了一些常见的例子：

1. 获取对象的属性值

Object.values() 方法可以方便的获取对象的属性值。例如：

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

2. 获取对象的所有属性和值

Object.entries() 方法可以将对象转换为一个键值对的二维数组。例如：

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

3. 合并对象

可以使用 Object.assign() 方法将多个对象合并为一个新的对象。例如：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 2, c: 3 }

4. 对象属性求和

通过 Object.values() 和 reduce() 方法可以计算对象的所有属性值的和。例如：

const obj = { a: 1, b: 2, c: 3 };
const sum = Object.values(obj).reduce((acc, val) => acc + val);
console.log(sum); // 6

5. 对象属性过滤

通过 Object.entries() 方法可以获取对象的所有属性和值，然后通过 filter() 方法过滤出符合条件的属性。例如：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj).filter(([key, val]) => key === 'a' || val === 2);
console.log(entries); // [['a', 1], ['b', 2]]

总结

Object.values 和 Object.entries 是 ES8 的新特性，它们可以方便的获取对象的属性值和所有属性和值，并且可以调用数组的各种方法对它们进行处理。这两个方法的实际应用场景非常广泛，开发者可以根据实际需求来使用它们。

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