在前端开发中，我们常常需要遍历对象的属性，获取它们的值或者键值对。在 ES9 中，我们可以使用 Object.values() 和 Object.entries() 这两个方法来实现。它们可以让我们更方便地处理对象，但是在实际使用中，也可能会遇到一些问题。本文将介绍在使用 Object.values() 和 Object.entries() 时可能遇到的问题，并给出解决方案。
Object.values()
Object.values() 方法可以返回一个对象的所有属性值，以数组的形式返回。例如：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]但是，如果对象不是一个纯粹的对象，比如说它是一个数组，那么 Object.values() 方法就不能正常工作了。例如：
const arr = ['value1', 'value2', 'value3']; console.log(Object.values(arr)); // []
在这种情况下，Object.values() 返回的是一个空数组。这是因为数组的属性都是从它的原型链继承而来的，而 Object.values() 只会返回对象本身的属性。为了解决这个问题，我们需要自己手动实现一个方法：
-- -------------------- ---- -------
-- ---------------- -
------------- - ------------- -
-- ---- --- ------------ -
----- --- ------------------------ ------ -- - -------------
-
--- ---- - ---
--- ---- --- -- ---- -
-- ------------------------------------------ ----- -
--------------------
-
-
------ -----
--
-这个方法会先判断参数是否是一个对象，如果不是则抛出一个 TypeError 异常。然后它会遍历对象自身的属性，将属性值放入一个数组中返回。
Object.entries()
Object.entries() 方法可以返回一个对象的所有属性键值对，以数组的形式返回。例如：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]在 ES9 中，Object.entries() 在处理数字、字符串、日期等基本类型时会将它们封装成对应类型的对象再返回。例如：
const arr = ['a', 'b', 'c']; console.log(Object.entries(arr)); // [['0', 'a'], ['1', 'b'], ['2', 'c']]
这个方法和 Object.values() 一样，也不能正确处理数组。同样地，我们需要手动实现一个方法：
-- -------------------- ---- -------
-- ----------------- -
-------------- - ------------- -
-- ---- --- ------------ -
----- --- ------------------------- ------ -- - -------------
-
--- ----- - ---
--- ---- --- -- ---- -
-- ------------------------------------------ ----- -
---------------- -----------
-
-
------ ------
--
-这个方法的实现和 Object.values() 类似，只不过每个属性都被作为一个键值对放入数组中返回。
结论
Object.values() 和 Object.entries() 是非常有用的方法，但是在使用它们时，需要注意它们不能正确处理数组。为了解决这个问题，我们需要手动实现一个方法来处理数组。当然，如果你使用的是一个现代的 JavaScript 运行环境（比如 Node.js 或者最新版本的浏览器），那么这些方法已经被原生支持了。不过，在某些较老的环境中，需要使用该文中介绍的方法。
在编写前端代码时，我们应该注意到这些细节，并尽量使用最新的语言特性和 API。这不仅可以让我们更方便地编写代码，还可以提高代码的可读性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67035c2ad91dce0dc84b4711