如何使用 ES8 中的 Object.values/Object.entries 对重复代码进行重构和抽象

在前端开发中，我们常常需要处理对象的属性和值，对于重复的代码，我们可以使用 ES8 中新增的 Object.values/Object.entries 方法进行重构和抽象，以减少代码量和提高代码的可读性和可维护性。

Object.values/Object.entries 方法

Object.values/Object.entries 方法是 ES8 中新增的两个方法，它们可以分别返回对象的值和键值对数组。具体使用方式如下：

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

重构与抽象

使用 Object.values/Object.entries 方法可以对重复的代码进行重构和抽象，以减少代码量和提高代码的可读性和可维护性。下面举例说明。

示例一：对象属性求和

假设有以下对象：

const obj = { a: 1, b: 2, c: 3 };

我们需要对对象的属性求和，可以使用以下代码：

let sum = 0;
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    sum += obj[key];
  }
}
console.log(sum); // 6

上述代码使用 for...in 循环遍历对象的属性，判断属性是否为对象自身属性，然后累加属性的值，最终得到属性的和。但是，这段代码比较冗长，可读性不高。

使用 Object.values 方法可以简化代码：

const values = Object.values(obj);
const sum = values.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6

上述代码使用 Object.values 方法获取对象的值数组，然后使用数组的 reduce 方法求和，代码更加简洁易读。

示例二：对象属性拼接

假设有以下对象：

const obj = { a: 'Hello', b: 'World', c: '!' };

我们需要将对象的属性拼接成字符串，可以使用以下代码：

let str = '';
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    str += obj[key];
  }
}
console.log(str); // 'HelloWorld!'

上述代码使用 for...in 循环遍历对象的属性，判断属性是否为对象自身属性，然后拼接属性的值，最终得到属性的字符串。但是，这段代码比较冗长，可读性不高。

使用 Object.entries 方法可以简化代码：

const entries = Object.entries(obj);
const str = entries.reduce((acc, cur) => acc + cur[1], '');
console.log(str); // 'HelloWorld!'

上述代码使用 Object.entries 方法获取对象的键值对数组，然后使用数组的 reduce 方法拼接值，代码更加简洁易读。

总结

使用 ES8 中的 Object.values/Object.entries 方法可以对重复的代码进行重构和抽象，以减少代码量和提高代码的可读性和可维护性。在实际开发中，我们应该充分利用这两个方法，提高代码的质量和效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655a2dcad2f5e1655d48b99c