在前端开发中，我们常常需要处理对象的属性和值，对于重复的代码，我们可以使用 ES8 中新增的 Object.values/Object.entries 方法进行重构和抽象，以减少代码量和提高代码的可读性和可维护性。
Object.values/Object.entries 方法
Object.values/Object.entries 方法是 ES8 中新增的两个方法，它们可以分别返回对象的值和键值对数组。具体使用方式如下：
----- --- - - -- -- -- -- -- - -- ----- ------ - ------------------- -- --- -- -- ----- ------- - -------------------- -- ------ --- ----- --- ----- ---
重构与抽象
使用 Object.values/Object.entries 方法可以对重复的代码进行重构和抽象，以减少代码量和提高代码的可读性和可维护性。下面举例说明。
示例一：对象属性求和
假设有以下对象：
----- --- - - -- -- -- -- -- - --
我们需要对对象的属性求和，可以使用以下代码：
--- --- - --
--- ---- --- -- ---- -
-- ------------------------- -
--- -- ---------
-
-
----------------- -- -上述代码使用 for...in 循环遍历对象的属性，判断属性是否为对象自身属性，然后累加属性的值，最终得到属性的和。但是，这段代码比较冗长，可读性不高。
使用 Object.values 方法可以简化代码：
----- ------ - ------------------- ----- --- - ------------------- ---- -- --- - ---- --- ----------------- -- -
上述代码使用 Object.values 方法获取对象的值数组，然后使用数组的 reduce 方法求和，代码更加简洁易读。
示例二：对象属性拼接
假设有以下对象：
----- --- - - -- -------- -- -------- -- --- --
我们需要将对象的属性拼接成字符串，可以使用以下代码：
--- --- - ---
--- ---- --- -- ---- -
-- ------------------------- -
--- -- ---------
-
-
----------------- -- -------------上述代码使用 for...in 循环遍历对象的属性，判断属性是否为对象自身属性，然后拼接属性的值，最终得到属性的字符串。但是，这段代码比较冗长，可读性不高。
使用 Object.entries 方法可以简化代码：
----- ------- - -------------------- ----- --- - -------------------- ---- -- --- - ------- ---- ----------------- -- -------------
上述代码使用 Object.entries 方法获取对象的键值对数组，然后使用数组的 reduce 方法拼接值，代码更加简洁易读。
总结
使用 ES8 中的 Object.values/Object.entries 方法可以对重复的代码进行重构和抽象，以减少代码量和提高代码的可读性和可维护性。在实际开发中，我们应该充分利用这两个方法，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655a2dcad2f5e1655d48b99c