ECMAScript 2019(即 ES10)已经发布了一段时间,其中的 Object.fromEntries()
方法是一个新的 Object 静态方法。这个方法是为了方便地从一个包含键值对二元组的可迭代对象转换为一个对象。
基本用法
关于如何使用 Object.fromEntries()
方法有以下两个条件:
- 参数必须是一个二维数组,即一个数组里每个元素都是一个键值对数组。
- 刚生成的对象的属性字符串属性名来自于键值对中紧随键的值。也就是说,
Object.fromEntries()
方法将数组展开,从中创建一个新的键值对对象。
示例代码如下:
-- -------------------- ---- ------- ----- ------- - - -------- ------------ ------- ---- ------- ---- -- ----- --- - ---------------------------- -----------------
运行结果为:
{ name: 'xiaoming', age: 18, sex: '男' }
应用场景
Object.fromEntries()
方法的应用场景非常广泛,下面介绍两个常见的应用场景。
将对象转化为Iterable
假设我们有一个对象,例如:
const obj = { name: 'xiaoming', age: 18, sex: '男' }
我们可以通过 Object.entries()
方法将这个对象转化为二维数组。例如:
const entries = Object.entries(obj); console.log(entries);
运行结果为:
[ ['name', 'xiaoming'], ['age', 18], ['sex', '男'] ]
但是我们希望将这个二维数组再次转化为一个新的对象,此时我们可以使用 Object.fromEntries()
方法。
const newObj = Object.fromEntries(entries); console.log(newObj);
运行结果为:
{ name: 'xiaoming', age: 18, sex: '男' }
Map 转对象
我们可以使用 Object.fromEntries()
方法将 Map 对象转化为对象。例如:
const map = new Map(); map.set('name', 'xiaoming'); map.set('age', 18); map.set('sex', '男'); const obj = Object.fromEntries(map); console.log(obj);
运行结果为:
{ name: 'xiaoming', age: 18, sex: '男' }
兼容性
众所周知,ES6 和后续版本的规范中的新属性和方法,往往需要使用 babel 转换才能在低版本的浏览器中使用。关于 Object.fromEntries()
方法,我们可以使用@ babel / plugin-transform-object-from-entries插件来将其转换成低版本的浏览器中可用的代码。
总结
ES10 中的 Object.fromEntries()
方法是一个高效且方便的方法,允许您从键值对数组快速创建对象。它非常实用且容易理解,可用于大多数场合,包括 Map 对象转换,数组转换为对象等。
希望本文能够对大家在工作和学习中有所帮助,也希望大家能够跟着示例代码进行学习,掌握这种实用的技术。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/649d0d7e48841e98949c48d8