`Object.fromEntries` 与 `Object.entries`：对象与数组的转换

欢迎来到对象变形记：Object.fromEntries 和 Object.entries 的妙用！

各位观众，各位程序猿、程序媛们，欢迎来到今天的“对象变形记”特别节目！我是你们的老朋友，代码魔法师老王，今天我们要聊聊 JavaScript 中一对神奇的搭档：Object.fromEntries 和 Object.entries。

这两位啊，就像是对象世界的“变形金刚”，一个能把数组变成对象，另一个能把对象拆解成数组，简直就是居家旅行、代码优化的必备良药！💊

准备好了吗？让我们一起揭开它们的神秘面纱，看看它们是如何在代码世界里“变身”的！

1. Object.entries：对象的华丽解构

首先，我们来认识一下 Object.entries 这位老朋友。它就像一个经验丰富的侦探，能够深入对象的内部，将对象的每一个属性和值都扒拉出来，然后打包成一个个小包裹，整齐地排列在一个数组里。

形象地说： 假如你有一个装着各种宝藏的盒子（也就是一个 JavaScript 对象），Object.entries 就像一把神奇的钥匙，能把盒子里的每一件宝藏都取出来，贴上标签（属性名）和价格（属性值），然后按照顺序摆放在一个清单上。

语法说明：

Object.entries(obj)

其中 obj 是你想要解构的 JavaScript 对象。

返回值：

一个二维数组，数组中的每一个元素都是一个包含两个元素的数组，分别代表对象的属性名和属性值。 形如：[[key1, value1], [key2, value2], ...]

举个栗子：

假设我们有一个描述用户信息的对象：

const user = {
  name: '老王',
  age: 30,
  city: '北京',
  occupation: '代码魔法师'
};

现在，让我们用 Object.entries 来解构它：

const entries = Object.entries(user);
console.log(entries);

输出结果：

[
  [ 'name', '老王' ],
  [ 'age', 30 ],
  [ 'city', '北京' ],
  [ 'occupation', '代码魔法师' ]
]

瞧！ Object.entries 把 user 对象拆解成了一个二维数组，每个子数组都包含了属性名和属性值。是不是很方便？

应用场景：

Object.entries 的应用场景非常广泛，比如：

• 遍历对象属性： 可以使用 for...of 循环轻松遍历对象的属性名和属性值。

  for (const [key, value] of Object.entries(user)) {
    console.log(`属性名：${key}，属性值：${value}`);
  }

• 转换对象数据结构： 可以将对象转换成其他数据结构，比如 Map。

  const userMap = new Map(Object.entries(user));
  console.log(userMap);

• 过滤对象属性： 可以结合数组的 filter 方法，过滤掉不需要的属性。

  const filteredEntries = Object.entries(user).filter(([key, value]) => key !== 'age');
  console.log(filteredEntries);

总而言之，Object.entries 是一个非常实用的工具，可以帮助我们更方便地操作对象数据。

2. Object.fromEntries：数组的华丽重构

介绍完 Object.entries ，接下来我们来认识一下它的好搭档： Object.fromEntries。 它就像一位技艺精湛的工匠，能够将一个包含键值对的数组，重新组装成一个崭新的对象。

形象地说： 假如你有一堆零件，每个零件都贴着标签（属性名）和功能说明（属性值），Object.fromEntries 就像一个组装大师，能根据这些标签和说明，将所有零件完美地组装成一个功能强大的机器人（也就是一个 JavaScript 对象）。

语法说明：

Object.fromEntries(iterable)

其中 iterable 是一个可迭代对象，比如数组、Map 等，其中的元素必须是包含两个元素的数组，分别代表属性名和属性值。

返回值：

一个新的 JavaScript 对象，对象的属性名和属性值来自 iterable 中的元素。

举个栗子：

假设我们有一个包含用户信息的数组：

const userInfoArray = [
  ['name', '小李'],
  ['age', 25],
  ['city', '上海'],
  ['occupation', '前端工程师']
];

现在，让我们用 Object.fromEntries 来重构它：

const newUser = Object.fromEntries(userInfoArray);
console.log(newUser);

输出结果：

{
  name: '小李',
  age: 25,
  city: '上海',
  occupation: '前端工程师'
}

看！ Object.fromEntries 把数组 userInfoArray 变成了一个对象，属性名和属性值都来自数组中的元素。是不是很神奇？

应用场景：

Object.fromEntries 的应用场景也很广泛，比如：

• 将 Map 转换成对象： 可以将 Map 对象转换成普通的 JavaScript 对象。

  const userMap = new Map([
    ['name', '小赵'],
    ['age', 28],
    ['city', '广州']
  ]);
  const newUser = Object.fromEntries(userMap);
  console.log(newUser);

• 动态创建对象： 可以根据某些条件，动态地创建对象属性。

  const keys = ['name', 'age', 'city'];
  const values = ['小钱', 32, '深圳'];
  const entries = keys.map((key, index) => [key, values[index]]);
  const newUser = Object.fromEntries(entries);
  console.log(newUser);

• 处理 URL 查询参数： 可以将 URL 查询参数转换成对象。 （需要一些额外的处理）

  const queryString = '?name=小孙&age=26&city=成都';
  const paramsArray = queryString.slice(1).split('&').map(param => param.split('='));
  const paramsObject = Object.fromEntries(paramsArray);
  console.log(paramsObject);

需要注意的是：

• Object.fromEntries 只能处理包含两个元素的数组，如果数组中的元素不是包含两个元素的数组，将会抛出错误。
• 如果 iterable 中存在相同的属性名，后面的属性值会覆盖前面的属性值。

3. Object.entries 和 Object.fromEntries 的完美配合

现在，我们已经分别认识了 Object.entries 和 Object.fromEntries 这两位“变形金刚”，接下来，让我们看看它们是如何完美配合，在代码世界里大显身手的。

它们就像一对默契的舞伴，一个负责分解，一个负责重构，共同完成各种复杂的对象操作。

案例一：过滤对象属性并转换数据类型

假设我们有一个包含多种数据类型的对象：

const data = {
  name: '老刘',
  age: '35',  // 注意，这里是字符串类型的年龄
  city: '南京',
  isMarried: 'true' // 注意，这里是字符串类型的布尔值
};

现在，我们需要过滤掉 isMarried 属性，并将 age 属性转换成数字类型。

const filteredAndTransformedData = Object.fromEntries(
  Object.entries(data)
    .filter(([key, value]) => key !== 'isMarried')
    .map(([key, value]) => (key === 'age' ? [key, Number(value)] : [key, value]))
);

console.log(filteredAndTransformedData);

输出结果：

{ name: '老刘', age: 35, city: '南京' }

代码解析：

1. Object.entries(data) 将 data 对象解构成一个二维数组。
2. .filter(([key, value]) => key !== 'isMarried') 过滤掉 isMarried 属性。
3. .map(([key, value]) => (key === 'age' ? [key, Number(value)] : [key, value])) 将 age 属性的值转换成数字类型。
4. Object.fromEntries(...) 将处理后的二维数组重构成一个新的对象。

案例二：交换对象的键和值

有时候，我们需要交换对象的键和值，比如：

const colorMap = {
  red: '#FF0000',
  green: '#00FF00',
  blue: '#0000FF'
};

我们需要将 colorMap 对象的键和值互换：

const invertedColorMap = Object.fromEntries(
  Object.entries(colorMap).map(([key, value]) => [value, key])
);

console.log(invertedColorMap);

输出结果：

{ '#FF0000': 'red', '#00FF00': 'green', '#0000FF': 'blue' }

代码解析：

1. Object.entries(colorMap) 将 colorMap 对象解构成一个二维数组。
2. .map(([key, value]) => [value, key]) 交换键和值的位置。
3. Object.fromEntries(...) 将处理后的二维数组重构成一个新的对象。

通过以上案例，我们可以看到 Object.entries 和 Object.fromEntries 的完美配合，可以帮助我们轻松地完成各种复杂的对象操作。

4. 性能考量

虽然 Object.entries 和 Object.fromEntries 非常方便，但在处理大型对象时，我们需要考虑性能问题。

Object.entries 的性能：

Object.entries 的时间复杂度是 O(n)，其中 n 是对象的属性数量。这意味着，当对象的属性数量很大时，Object.entries 的执行时间也会相应增加。

Object.fromEntries 的性能：

Object.fromEntries 的时间复杂度也是 O(n)，其中 n 是可迭代对象的元素数量。

优化建议：

• 避免不必要的转换： 如果只需要遍历对象的属性，可以使用 for...in 循环或 Object.keys() 方法，而不需要使用 Object.entries。
• 减少数据量： 在处理大型对象时，可以先过滤掉不需要的属性，然后再使用 Object.entries 和 Object.fromEntries 进行转换。
• 使用更高效的算法： 在某些情况下，可以使用更高效的算法来完成相同的任务。

5. 兼容性问题

Object.entries 和 Object.fromEntries 是 ES2017 中新增的特性，因此在一些老版本的浏览器中可能不支持。

兼容性解决方案：

• 使用 Polyfill： 可以使用 Polyfill 来为老版本的浏览器提供 Object.entries 和 Object.fromEntries 的支持。 例如：core-js 库。
• 使用 Babel： 可以使用 Babel 等代码转换工具，将 ES2017 代码转换成 ES5 代码，从而在老版本的浏览器中运行。

6. 总结

今天，我们一起学习了 JavaScript 中 Object.entries 和 Object.fromEntries 这两个强大的工具。它们就像对象世界的“变形金刚”，一个能把对象变成数组，另一个能把数组变成对象，可以帮助我们更方便地操作对象数据。

功能	Object.entries	Object.fromEntries
作用	将对象转换为包含键值对的数组	将包含键值对的数组转换为对象
输入	对象	包含键值对的可迭代对象（如数组、Map）
输出	二维数组	对象
常用场景	遍历对象属性、转换数据结构	将 Map 转换为对象、动态创建对象
性能	O(n)	O(n)
兼容性	ES2017+	ES2017+

希望通过今天的讲解，大家能够更好地理解和使用 Object.entries 和 Object.fromEntries，在代码世界里“变身”出更精彩的作品！ 🎉

感谢大家的观看，我们下期再见！ 👋