ES9 是 ECMAScript 2018 的正式版，相较于上一版 ES8，它增加了一些非常有用的新 API，包括 Object.entries() 和 Object.fromEntries()。这两个 API 可以帮助我们更轻松、更高效地操作对象。本文将深度解析这两个 API 的用法和实现原理，并提供示例代码。
Object.entries()
Object.entries() 可以将一个对象转换成一个键值对数组。这个数组中的每个元素都包含一个键值对，键名和键值分别作为数组元素的第一个和第二个值。下面是一个示例：
const obj = { foo: 'bar', baz: 42 }; console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]
可以看到，Object.entries() 将对象 obj 转换成了一个键值对数组，其中包含两个元素：['foo', 'bar'] 和 ['baz', 42]。
Object.entries() 的实现原理很简单，只需要依次遍历对象的属性，然后把每个属性名和属性值组成数组即可。下面是一个简单的实现示例：
-- -------------------- ---- ------- -------------- - ------------- - ----- ------ - --- --------- --- -- ---- - --------------------------- - ----------------- ----------- - - ------ ------- --展开代码
在这个实现中，我们使用 for-in 循环遍历对象的属性，然后判断每个属性是否为对象自身的属性（而非继承自原型链上的属性），然后将属性名和属性值组成一个数组，最后将这个数组放入 result 数组中，最终返回 result 数组。
Object.fromEntries()
Object.fromEntries() 则是 Object.entries() 的反向操作，它可以将一个键值对数组转换成一个对象。这个数组中的每个元素都包含一个键值对，键名和键值分别作为数组元素的第一个和第二个值。下面是一个示例：
const arr = [['foo', 'bar'], ['baz', 42]]; console.log(Object.fromEntries(arr)); // { foo: 'bar', baz: 42 }
可以看到，Object.fromEntries() 将数组 arr 转换成了一个对象，其中包含了两个属性：foo: 'bar' 和 baz: 42。
Object.fromEntries() 的实现与 Object.entries() 相似，只需要依次遍历数组中的每个键值对，然后使用属性名作为对象的键名，属性值作为对象的键值即可。下面是一个简单的实现示例：
Object.fromEntries = function(arr) { const result = {}; for(const pair of arr) { result[pair[0]] = pair[1]; } return result; };
在这个实现中，我们使用 for-of 循环遍历数组中的每个键值对，然后使用键名作为对象的属性名，键值作为对象的属性值，最终将这些属性添加到 result 对象中，最终返回 result 对象。
用例及注意点
Object.entries() 和 Object.fromEntries() 可以很方便地进行对象和数组之间的转换。在实际开发中，我们可以根据具体情况选择合适的方法来处理数据。
需要注意的是，Object.entries() 和 Object.fromEntries() 目前仅在现代浏览器中支持，如果需要在旧版浏览器中使用，可以使用一些 polyfill 或转译工具来解决兼容性问题。同时，对于使用 Object.fromEntries() 创建大量属性较多的对象，需要注意其效率与浏览器的兼容性。
总结
Object.entries() 和 Object.fromEntries() 是 ES9 中非常有用的 API，它们可以很方便地进行对象和数组之间的转换，同时也为我们带来了更简洁、更高效的代码实现。在实际开发中，我们应该根据具体情况来选择合适的方法来处理数据，在保证兼容性和效率的前提下，尽量使用最新的 API 来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9af98add4f0e0ff233045
