ES9 中新增了 Object.fromEntries() API,它可以将一个由键值对组成的数组转换为一个对象。由于在日常开发中,我们经常需要将数组转换为对象,并且这是一个非常常见且基础的操作,我们有必要详细地学习并掌握这个 API。本文将介绍 Object.fromEntries() 的用法、示例以及它的指导意义。
用法
Object.fromEntries() 方法的用法非常简单,只需要将一个由键值对组成的数组作为参数传递,就可以将其转换为一个对象。例如:
const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']];
const obj = Object.fromEntries(arr);
console.log(obj); // { name: 'Tom', age: 18, gender: 'male' }Object.fromEntries() 方法接受的参数是一个二维数组,其中每一个元素都是一个由两个值组成的数组,第一个值是键名,第二个值是键值。在上面的示例中,我们定义了一个二维数组 arr,其中包含了三个元素,每个元素都是一个由两个值组成的数组,分别表示 name、age 和 gender 这三个属性及其对应的值。
我们使用 Object.fromEntries() 方法将 arr 转换成了一个对象 obj,其中 name、age 和 gender 分别是键,对应的 Tom、18 和 male 分别是键值。
需要注意的是,Object.fromEntries() 方法是 ES9 新增的 API,目前尚未被所有主流浏览器完全支持,需要在使用时做好兼容性处理。
示例
我们来看几个示例,以更好地理解 Object.fromEntries() 的用法。
示例一:使用 Object.fromEntries() 将 FormData 转换为对象
我们使用表单提交数据时,通常会将表单元素的内容封装成 FormData 对象,然后通过 Ajax 或其他方式将其提交到服务器。默认情况下,FormData 对象的数据格式是键值对,需要将其转换为对象格式才能使用。
下面是一个示例,演示了如何使用 Object.fromEntries() 将 FormData 转换成对象:
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.fromEntries() 示例</title>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(form);
const obj = Object.fromEntries(formData);
console.log(obj); // 输出转换后的对象
});
</script>
</body>
</html>上面的示例中,我们定义了一个表单,其中包含了两个文本框和一个提交按钮。当用户单击提交按钮时,我们使用 FormData 对象来获取表单数据,然后使用 Object.fromEntries() 方法将其转换为一个对象,最后将转换后的对象打印到控制台中。
示例二:使用 Object.fromEntries() 将 Map 转换为对象
Map 是一种非常实用的数据结构,它是一组键值对的有序列表,可以存储任意类型的键值对。在某些情况下,我们可能会希望将一个 Map 对象转换为一个对象,以便于使用和访问。
下面是一个示例,演示了如何使用 Object.fromEntries() 将 Map 转换成对象:
const map = new Map([['name', 'Tom'], ['age', 18], ['gender', 'male']]);
const obj = Object.fromEntries(map);
console.log(obj); // { name: 'Tom', age: 18, gender: 'male' }上面的示例中,我们创建了一个 Map 对象,其中包含了三组键值对,然后使用 Object.fromEntries() 方法将其转换为一个对象,并将转换后的对象打印到控制台中。
示例三:使用 Object.fromEntries() 将数组转换为对象
除了将 FormData 和 Map 转换为对象外,Object.fromEntries() 方法还可以将一个由键值对组成的数组转换为一个对象。我们在前面已经演示了如何使用 Object.fromEntries() 来做到这一点,这里再给出另一个示例:
const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']];
const obj = Object.fromEntries(arr);
console.log(obj); // { name: 'Tom', age: 18, gender: 'male' }上面的示例中,我们定义了一个由键值对组成的数组 arr,使用 Object.fromEntries() 将其转换为一个对象 obj,最后将转换后的对象打印到控制台中。
指导意义
Object.fromEntries() API 的出现,简化了从数组到对象的转换方式,让开发者更加方便地处理数据。使用 Object.fromEntries() API 可以节省大量的代码量,并提高代码的可读性和可维护性。
在实际开发中,我们经常需要将数据从某种格式转换成另一种格式,这个过程是非常常见的,通过学习 Object.fromEntries() API 可以更深入地理解数据类型的转换以及在实际开发中如何更加高效地处理数据。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d023b9e46428fe9ecc743a