如何映射获得键和值的对象的对象?

时间:2020-08-15 19:05:58

标签: javascript

我有一个称为“标记”的地图,该地图具有其他地图作为字段。我需要执行诸如forEach循环(或地图)之类的操作,以获取每个嵌套地图的键和值。

这是我的数据

   "marks" : {
       "mark_01": {x: 10, y: 200},
       "mark_02": {x: 200, y: 100},
        ...
       "mark_99": {x: 1000, y: 1039}
    }

我想做的是:

 // This is wrong but represents the main idea
 const newMarks = marks.map(mark => {
    // Get the mark key "mark_number"
    // Change its value (x, y)
    // Return an object with the same key and the new manipulated value
 })

有什么想法吗?结果数据必须如下所示:

"marks" : {
      "mark_01" : {x: 0, y: 190},
      "mark_02" : {x: 190, y: 90},
       ...
      "mark_99" : {x: 990, y: 1029}
 }

4 个答案:

答案 0 :(得分:4)

以下代码段可以帮助您

const { marks } = {
  marks: {
    mark_01: { x: 10, y: 200, other_if_have: 'a' },
    mark_02: { x: 200, y: 100, other_if_have: 'b' },
    mark_99: { x: 1000, y: 1039, other_if_have: 'c' },
  },
}

const temp = Object.keys(marks).map((mark) => {
  const manipulate = ({ x, y }) => ({
    x: x - 10,
    y: y - 10,
  })
  return [mark, { ...marks[mark], ...manipulate(marks[mark]) }]
})

const res = { marks: Object.fromEntries(temp) }

console.log(res)

参考:

  • Object.keys() doc
  • Object.entries() doc

答案 1 :(得分:2)

另一种替代解决方案:


const edited = Object.fromEntries(Object.entries(marks).map(
    ([k,{x,y}]) => [k,{x: x+10, y: y+10}]
));

您可以在此处进行检查:https://jsfiddle.net/sandro_paganotti/ztw1exb4/13/

答案 2 :(得分:1)

可以使用for...in循环:

const marks = {
  "mark_01": {
    x: 10,
    y: 200
  },
  "mark_02": {
    x: 200,
    y: 100
  },
  "mark_99": {
    x: 1000,
    y: 1039
  }
}

console.log("before", marks)

for (let i in marks) {
  marks[i].x += 1;
  marks[i].y += 1;
}

console.log("after", marks)


但是,您应该注意:

for ... in循环的问题在于,它会循环访问原型链中的属性。当使用for ... in循环遍历对象时,需要检查该属性是否属于该对象。您可以使用hasOwnProperty做到这一点。

为此,请考虑以下原因:

const marks = {
  "mark_01": {
    x: 10,
    y: 200
  },
  "mark_02": {
    x: 200,
    y: 100
  },
  "mark_99": {
    x: 1000,
    y: 1039
  }
}

console.log("before", marks)

for (let i in marks) {
  if (marks.hasOwnProperty(i)) {
    marks[i].x += 1;
    marks[i].y += 1;
  }
}

console.log("after", marks)


This是一篇不错的文章,可以检查出类似这样的内容。

答案 3 :(得分:1)

如果您的对象中的属性数量不确定,则可以像这样嵌套

let marks = {
  "mark_01": {x: 10, y: 200, z: 300, ...},
  "mark_02": {x: 200, y: 100, z: 10, ...},
  "mark_99": {x: 1000, y: 1039, z: 1200, ...}
}

let newMarks = {}
for (const [key, value] of Object.entries(marks)) {
  let newValues = {}
  for (const [innerKey, innerValue] of Object.entries(value)) {
    newValues[innerKey] = innerValue - 10
  }
  newMarks[key] = newValues
}
console.log(newMarks);