ES8 中的 Object.entries() 及 Object.fromEntries() 方法详解-JavaScript中文网-JavaScript教程资源分享门户

ES8 是 ECMAScript 标准的第八个版本，其中引入了一些新的方法和功能。其中，Object.entries() 和 Object.fromEntries() 方法是非常实用的对象方法，在前端开发中具有广泛的应用。本文将详细介绍这两个方法的使用方法和应用场景，希望能够帮助读者更好地理解和应用这两个方法。

Object.entries() 方法

首先介绍 Object.entries() 方法。这个方法的作用是将一个对象转化为一个由键值对组成的数组（即二维数组），其中每个键值对的顺序为其在原对象中的顺序。下面是一个示例：

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

可以看到，Object.entries() 方法将 obj 转化为了一个由两个键值对组成的数组。其中，键值对的顺序为它们在原对象中的顺序。

使用 Object.entries() 方法还可以很方便地实现遍历对象属性的过程。下面是一个示例：

const obj = { foo: 'bar', baz: 42 };

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// foo: bar
// baz: 42

在上述示例中，我们使用了解构赋值的方式来将 Object.entries() 方法返回的数组中的键值对解构为 key 和 value 两个变量。然后，我们就可以通过遍历这个数组来输出 obj 对象中的所有属性。

需要注意的是，Object.entries() 方法只会返回对象自身的可枚举属性，而不会返回继承自原型链上的属性。如果要获取对象所有属性，可以使用 Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols() 方法。

Object.fromEntries() 方法

接下来介绍 Object.fromEntries() 方法。与 Object.entries() 方法相反，Object.fromEntries() 方法的作用是将一个由键值对组成的数组转化为一个对象。下面是一个示例：

const entries = [ ['foo', 'bar'], ['baz', 42] ];
console.log(Object.fromEntries(entries)); // { foo: 'bar', baz: 42 }

可以看到，Object.fromEntries() 方法将 entries 数组转化为了一个对象，其中每个键值对都对应了 entries 数组中的一个元素。

使用 Object.fromEntries() 方法可以方便地将一个由键值对组成的数组转化为一个对象。这在实际开发中有时非常有用。例如，我们可以用这个方法来从一个 URL 查询字符串中提取参数并转化为一个对象。下面是一个示例：

const searchParams = new URLSearchParams('foo=bar&baz=42');
const paramsAsArray = Array.from(searchParams.entries());
const paramsAsObject = Object.fromEntries(paramsAsArray);

console.log(paramsAsObject); // { foo: 'bar', baz: '42' }

在上述示例中，我们首先使用 URLSearchParams API 将查询字符串转化为一个 URLSearchParams 对象，然后再通过 Array.from() 方法将这个对象转化为一个由键值对组成的数组。最后，我们使用 Object.fromEntries() 方法将这个数组转化为了一个对象，其中每个键值对对应了查询字符串中的一个参数。

需要注意的是，由于 Object.fromEntries() 方法会创建一个新对象并返回，因此如果将一个大数组传递给它，可能会对性能造成影响。在这种情况下，最好考虑使用其他更高效的数据结构。

总结

本文介绍了 ES8 中的 Object.entries() 和 Object.fromEntries() 方法，这两个方法可以很方便地将对象和数组相互转化，实现了对象和数组之间的无缝转换。同时，这两个方法也为我们提供了实现某些功能的更加简单和高效的方法。希望读者可以在实际开发中灵活使用这两个方法，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654234f57d4982a6ebbe0650