在 JavaScript 中,Object 是一个经常使用的对象类型,而ES12 新增的 Object.fromEntries() 方法进一步增强了 Object 对象的实用性。该方法可以轻松地将一个数组转换成一个对象。
Object.fromEntries() 方法的用法
Object.fromEntries() 方法的用法很简单,它只接受一个由键值对数组组成的数组作为参数,然后返回一个由这些键值对组成的新对象。
const arr = [['foo', 1], ['bar', 2]]; const obj = Object.fromEntries(arr); console.log(obj); // {foo: 1, bar: 2}
实用性分析
有了 Object.fromEntries() 方法,我们就可以轻松地处理由键值对数组组成的数据,比如将一个形如 [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}]
的数组转换成一个以 name 为键,age 为值的对象。
const arr = [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}]; const obj = Object.fromEntries(arr.map(({name, age}) => [name, age])); console.log(obj); // {Tom: 18, Jerry: 20}
除此之外,结合其他方法, Object.fromEntries() 可以实现很多实用的场景,比如:
从 URL 参数中解析出一个对象
const params = new URLSearchParams('name=Tom&age=18'); const obj = Object.fromEntries(params); console.log(obj); // {name: 'Tom', age: '18'}
用简洁的语法生成一个对象
const name = 'Tom'; const age = 18; const obj = Object.fromEntries([['name', name], ['age', age]]); console.log(obj); // {name: 'Tom', age: 18}
与 Object.entries() 配合实现对象的深拷贝
const obj1 = {foo: {bar: 'baz'}}; const obj2 = Object.fromEntries(Object.entries(obj1)); console.log(obj2); // {foo: {bar: 'baz'}} // 修改 obj1.foo.bar 的值,不会影响 obj2.foo.bar 的值 obj1.foo.bar = 'qux'; console.log(obj1); // {foo: {bar: 'qux'}} console.log(obj2); // {foo: {bar: 'baz'}}
总结
Object.fromEntries() 方法是一个非常实用的方法,它可以轻松地将一个由键值对数组组成的数组转换成一个对象。结合其他方法,我们可以使用它来解析 URL 参数、实现深拷贝、用简洁的语法生成一个对象等等场景,增强了 Object 对象的实用性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65a10096add4f0e0ff928cd2