ES10 中 Object.entries 和 Object.fromEntries 的区别及应用场景-JavaScript中文网-JavaScript教程资源分享门户

前言

ES10 是 ECMAScript 的最新版本，它引入了一些新的特性和方法，其中包括 Object.entries 和 Object.fromEntries。这两个方法可以方便地处理对象和数组，提高开发效率。本文将介绍 Object.entries 和 Object.fromEntries 的区别及应用场景，并提供示例代码。

Object.entries

Object.entries 方法可以将一个对象转换为一个二维数组，其中第一维是键，第二维是对应的值。例如：

const obj = { a: 1, b: 2, c: 3 };
const arr = Object.entries(obj);
console.log(arr); // [["a", 1], ["b", 2], ["c", 3]]

Object.entries 方法可以方便地遍历对象的键值对，例如：

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}
// a 1
// b 2
// c 3

Object.fromEntries

Object.fromEntries 方法可以将一个二维数组转换为一个对象，其中第一维是键，第二维是对应的值。例如：

const arr = [["a", 1], ["b", 2], ["c", 3]];
const obj = Object.fromEntries(arr);
console.log(obj); // { a: 1, b: 2, c: 3 }

Object.fromEntries 方法可以方便地将一个数组转换为对象，例如：

const arr = ["a", "b", "c"];
const obj = Object.fromEntries(arr.map((item) => [item, item.toUpperCase()]));
console.log(obj); // { a: "A", b: "B", c: "C" }

区别及应用场景

Object.entries 和 Object.fromEntries 方法可以方便地在对象和数组之间进行转换，它们的区别在于：

Object.entries 将一个对象转换为一个二维数组，Object.fromEntries 将一个二维数组转换为一个对象。
Object.entries 可以方便地遍历对象的键值对，Object.fromEntries 可以方便地将一个数组转换为对象。

Object.entries 和 Object.fromEntries 方法可以应用于很多场景，例如：

遍历对象的键值对，例如使用 for...of 循环。
对象属性的排序，例如使用 Array.prototype.sort 方法。
将一个数组转换为对象，例如从服务器获取数据后转换为对象。
将一个对象转换为 JSON，例如使用 JSON.stringify 方法。
对象属性的过滤，例如使用 Array.prototype.filter 方法。

示例代码

下面是一些示例代码，展示了 Object.entries 和 Object.fromEntries 方法的使用场景。

遍历对象的键值对

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

对象属性的排序

const obj = { c: 1, b: 2, a: 3 };
const arr = Object.entries(obj).sort(([key1, value1], [key2, value2]) => value1 - value2);
const sortedObj = Object.fromEntries(arr);
console.log(sortedObj); // { c: 1, b: 2, a: 3 }

将一个数组转换为对象

const arr = [["a", 1], ["b", 2], ["c", 3]];
const obj = Object.fromEntries(arr);
console.log(obj); // { a: 1, b: 2, c: 3 }

将一个对象转换为 JSON

const obj = { a: 1, b: 2, c: 3 };
const json = JSON.stringify(Object.entries(obj));
console.log(json); // [["a",1],["b",2],["c",3]]

对象属性的过滤

const obj = { a: 1, b: 2, c: 3 };
const filteredObj = Object.fromEntries(
  Object.entries(obj).filter(([key, value]) => value > 1)
);
console.log(filteredObj); // { b: 2, c: 3 }

结论

Object.entries 和 Object.fromEntries 方法是 ES10 中新增的方法，它们可以方便地处理对象和数组，提高开发效率。本文介绍了 Object.entries 和 Object.fromEntries 的区别及应用场景，并提供了示例代码。我们可以根据具体的需求选择使用这两个方法，以提高开发效率。

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