在前端开发中，我们经常需要使用对象来存储和管理数据。ES9 中提供了一个方便的方法用于获取对象的“键值对”数组：Object.entries。虽然它很方便，但是在使用过程中我们有时会发现它返回的值被预定义的属性所污染，给我们带来很多麻烦。本文将详细讲解这个问题，并提供解决方案。
问题描述
首先，我们来看一个简单的代码示例：
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj));这段代码会输出以下结果：
-- -------------------- ---- ------- - ----- --- ----- --- ----- --- --------------- --- -------------------- --- -------------------- --- ------------------ --- -------------------- --- -------------------- --- ----------------- --- ------------------------ --- ------------ --- ----------- --- ------------------ -- -
我们可以看到，Object.entries 返回了一个数组，包含了对象的属性和对应的值，但是还包含了一些我们并不需要的属性，如 constructor、toString 等等。这些属性污染了我们真正需要的数据，给我们的操作带来损失。
问题分析
为了更好地分析问题，我们需要了解一些基础知识：JavaScript 中对象是通过原型链来实现继承的。每个对象在创建时，都会自动关联一个原型对象，这个原型对象也可能关联一个更高一级的原型对象，这样就构成了一个原型链。JavaScript 的内置对象同样也是类似的，内置对象的原型链顶端是 Object.prototype。
我们再来看一下 Object.entries 返回的数组：
-- -------------------- ---- ------- - -- ------ ----- --- ----- --- ----- --- -- ------------ --------------- --- -------------------- --- -------------------- --- ------------------ --- -------------------- --- -------------------- --- ----------------- --- ------------------------ --- ------------ --- ----------- --- ------------------ -- -
我们会发现，Object.entries 会把对象原型链上的属性一并返回。而这些属性并非我们需要的数据，反而会影响到我们的操作。
解决方案
针对这个问题，我们可以使用 ES6 的 Object.getOwnPropertyNames 方法来获取对象的属性列表，并筛选掉原型链上的属性。下面是一个示例代码：
-- -------------------- ---- ------- ----- --- - - -- -- -- -- -- - -- -- --------------------- ----- ---- - -------------------------------- -- ----- --- --------------- ----- ------ - ------------ -- ----- ----------- --------------------
这段代码会输出以下结果：
[ ["a", 1], ["b", 2], ["c", 3] ]
我们可以看到，它只返回了对象的属性和对应的值，没有包含原型链上的属性，非常方便。
总结
本文详细介绍了 ES9 Object.entries 方法返回值被预定义的属性所污染的问题，并给出了解决方案。我们通过 Object.getOwnPropertyNames 方法获取对象的属性列表，再使用数组的 map 方法转换成“键值对”格式的数组，成功地解决了这个问题。希望这篇文章能够帮助大家更好地理解和掌握前端开发中的对象操作技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647adab9968c7c53b067acaa