将集合转换为对象 - JavaScript？

我们在本文中将要执行的任务是“将集合转换为对象”。在深入研究文章之前，让我们快速了解一下 JavaScript 中的集合和对象。

JavaScript 集合包含一组不同的值。在集合中，每个值只能出现一次。集合可以存储任何数据类型的任何值。

JavaScript 中的对象是一个独立的实体，具有属性和类型。可以将其比作一个杯子。杯子是一个具有特征的物品。杯子有设计、重量、颜色、材质等特征。类似地，JavaScript 对象可以具有属性来指定其属性。

让我们深入文章，了解更多关于在 JavaScript 中将集合转换为对象的信息。要将集合转换为对象，请在 JavaScript 中使用Object.assign()。

JavaScript 中的 Object.assign()

Object.assign() 方法将所有可枚举自身属性从一个或多个源对象复制到目标对象。它返回修改后的目标对象。

语法

以下是Object.assign() 的语法

Object.assign(target, ...sources)

让我们考虑以下示例，以更深入地了解如何将集合转换为对象。

示例

在以下示例中，我们使用Array.form 作为映射函数将集合中的值转换为对象，然后使用带有扩展语法的Object.assign() 将对象数组合并到单个结果中。

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      const uom = new Set(['BMW', 'BENZ', 'AUDI', 'DUCATI']);
      const res = Object.assign(...Array.from(uom, v => ({[v]:''})));
      document.getElementById("tutorial").innerHTML=JSON.stringify(res);
   </script>
</body>
</html>

当脚本执行时，它将生成一个输出，其中包含在网页上打印的对象，这是由用户执行脚本时触发的事件引起的。

示例

考虑以下示例，其中我们使用 Array.reduce 从集合中获取元素并将其发送到对象中。

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      const tutorial = new Set(['RC', 'RX100', 'DUKE', 'VESPA']);
      const getObjectFromSet = (set) => {
         return [...set].reduce((x, y) => {x[y] = ""; return x; },{});
      }
      document.getElementById("tutorial").innerHTML=JSON.stringify(getObjectFromSet(tutorial));
   </script>
</body>
</html>

运行以上脚本后，输出窗口将弹出，触发事件并在网页上显示从上述脚本中使用的集合获得的对象。

示例

让我们考虑另一个示例，其中我们使用 Object.fromEntries，它获取集合中的所有键值对并以对象的格式返回它们。

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      const tutorial = new Set(['Avatar', 'RRR', 'Bheem', 'Dheera']);
      const getObjectFromSet = (set) => {
         return Object.fromEntries(Array.from(set, (a) => [a, ""]));
      }
      document.getElementById("tutorial").innerHTML=JSON.stringify(getObjectFromSet(tutorial));
   </script>
</body>
</html>

当脚本执行时，它将生成一个输出，其中包含在网页上打印的对象，这是由事件触发时集合转换引起的。

更新于： 2023年1月18日

2K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告