javascript - 循环添加多个项目的Javascript

我的最终目标是一个数组，如下所示：

let nodes_data =  [
    {"id": "A", "depth": 1, "x":50, "y":100},
    {"id": "B", "depth": 2, "x":150, "y":200},
    {"id": "C", "depth": 2, "x":250, "y":200},
    {"id": "D", "depth": 3, "x":350, "y":300},
]

但是，我仅从id和depth开始，我想分别计算x和y。

因此，给定起始源数组：

let nodes_data =  [
    {"id": "A", "depth": 1},
    {"id": "B", "depth": 2},
    {"id": "C", "depth": 2},
    {"id": "D", "depth": 3},
]

我试图做一个for循环添加到数组：

 function presetCoordinates(data){
 let nodes = [];
  for ( let i = 0; i< nodes_data.length; i++) {
    y = data[i].depth*100;
    x = (i*100) + 50;

    nodes.push(x, y)
  }
  return nodes;
}

let nodes_with_coords = presetCoordinates(nodes_data)
console.log(nodes_with_coords)

其中nodes_with_coords是我的“目标”数组。

但是我得到了一些非常奇怪的结果。对我在这里缺少什么有任何想法吗？我想也许我把这个复杂化了。

最佳答案

您可以像下面这样使用“ Array.map”。

映射的作用是，它遍历“ nodes_data”中的每个元素，并返回您需要的新对象/数组/ {whatever}，在这种情况下，新对象将包含更多数据。

let nodes_data =  [
    {"id": "A", "depth": 1},
    {"id": "B", "depth": 2},
    {"id": "C", "depth": 2},
    {"id": "D", "depth": 3},
]

let res = nodes_data.map((d, i) => ({...d, x: i * 100 + 50, y: d.depth * 100 }))

console.log(res)