详解 ES12 中的 Object.fromEntries 方法-JavaScript中文网-JavaScript教程资源分享门户

在 ES12 中，新增了一个非常实用的方法，即 Object.fromEntries()。它可以将一个由键值对组成的数组转换为一个对象。这个方法在前端开发中非常有用，可以帮助我们处理数据，简化代码，提高开发效率。

语法

Object.fromEntries(iterable)

其中，iterable 是一个可迭代的对象，它包含若干个键值对。

示例

我们来看一个简单的示例：

const arr = [['name', '张三'], ['age', 18], ['gender', '男']];
const obj = Object.fromEntries(arr);
console.log(obj); // { name: '张三', age: 18, gender: '男' }

在这个示例中，我们定义了一个由键值对组成的二维数组 arr，然后使用 Object.fromEntries() 方法将其转换为一个对象 obj。最后，我们打印出了这个对象，可以看到它已经成功地转换了。

注意事项

在使用 Object.fromEntries() 方法时，需要注意以下几点：

iterable 参数必须是一个可迭代的对象，例如数组、Map、Set 等。
iterable 中每个元素必须是一个长度为 2 的数组，第一个元素表示键，第二个元素表示值。
如果 iterable 中存在相同的键，则后面的键值对会覆盖前面的键值对。
如果 iterable 中存在非法的键值对（例如键不是字符串或 Symbol 类型），则会抛出异常。

应用场景

Object.fromEntries() 方法在前端开发中有很多应用场景，例如：

将 URL 参数转换为对象：

const searchParams = new URLSearchParams('?name=张三&age=18&gender=男');
const obj = Object.fromEntries(searchParams.entries());
console.log(obj); // { name: '张三', age: '18', gender: '男' }

将 FormData 转换为对象：

const formData = new FormData(document.querySelector('form'));
const obj = Object.fromEntries(formData.entries());
console.log(obj); // { name: '张三', age: '18', gender: '男' }

将 Map 转换为对象：

const map = new Map([['name', '张三'], ['age', 18], ['gender', '男']]);
const obj = Object.fromEntries(map);
console.log(obj); // { name: '张三', age: 18, gender: '男' }

总结

Object.fromEntries() 方法是一个非常实用的方法，它可以将一个由键值对组成的数组转换为一个对象。在前端开发中，我们可以将其应用到很多场景中，例如将 URL 参数、FormData、Map 等转换为对象。使用这个方法可以简化代码，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/663ee25dd3423812e4d1f16d