时间戳

首页 > 解决方案 > 是否有更快的方法将数据对象键中的值复制到 javascript 中同一数据对象中的新键？

javascript - 是否有更快的方法将数据对象键中的值复制到 javascript 中同一数据对象中的新键？

问题描述

当我从 API 端点接收到一组对象时，我正在尝试如何使我的代码更简洁。这是初始变量：

let stringOptionsOutlet = [];

然后我想创建一个名为“value”的新键。这就是我通常的做法（我认为这还可以，但我相信与您可能想出的其他技术相比，肯定有一些缺点）：

stringOptionsOutlet = [...response.data.outlet]; // 1. this is the data I get from an API endpoint, I copy it with the spread operator
stringOptionsOutlet.map((v) => return { ...v, value: "" }; ); // 2. then I make the same new value in every single data object inside the array stringOptionsOutlet
Object.entries(stringOptionsOutlet).forEach((e) => {
   e[1].value = e[1].id; // 3. copy the value of id to the new key
});

我映射数据之前的数据：

[ 
  {
   label: "A1-1",
   id: "1",
  },
  {
   label: "B2-1",
   id: "4",
  },
]

映射后（第 2 步和第 3 步）：

[ 
  {
   label: "A1-1",
   id: "1",
   value: "1",
  },
  {
   label: "B2-1",
   id: "4",
   value: "1"
  },
]

能否请您解释一下这些技术的优点和缺点？谢谢你。

标签： javascriptalgorithmvue.js

解决方案

你正在做的事情会奏效，但肯定有一些不必要的步骤。当您可以映射 API 响应本身时，无需将 API 响应数据复制到数组中，然后更改数组内容。

// You can do steps 1 2 and 3 all in 1 .map()
const stringOptionsOutlet = response.data.outlet.map(v => {
    return {
        ...v,
        value: v.id
    }
})

以 1 方式完成所有操作的缺点是，如果您想做一些更复杂的逻辑，那么单个.map调用可能会变得非常混乱，并且可能引入一个单独的步骤会更简单，但需要注意的是，您随后会处理数据第二次。

推荐阅读