javascript - 向对象数组添加新属性(根据现有属性值分配特定值)

Question

在对象数组中，如何根据特定对象的属性值之一将具有特定值的新属性添加到特定对象。哎呀。真是拗口了。

例如，这是一个对象数组:

var data = [
    {"label":"event1","name":"Red Total","count":220,},
    {"label":"event2","name":"Green Total","count":330,},
    {"label":"event3","name":"Blue Total","count":440,},
    {"label":"overlap1","name":"Red","count":200,},
    {"label":"overlap2","name":"Green","count":300}
]

所有这些对象都应该获得两个新属性: x 和 y 。我知道值为 event1 的 label 应始终分配 x 为 0.5 和 y 为 0.75。我知道值为 event2 的 label 应始终分配 x 为 1/3 和 0.235 的 y 等...以下是我想要的结果。

var data = [
    {"label":"event1","name":"Red Total","count":220,"x":0.5,"y":0.75},
    {"label":"event2","name":"Green Total","count":330,"x":0.333,"y":0.235},
    {"label":"event3","name":"Blue Total","count":440,"x":0.666,"y":0.235},
    {"label":"overlap1","name":"Red","count":200,"x":0.9,"y":0.9},
    {"label":"overlap2","name":"Green","count":300,"x":0.9,"y":0.9}
]

x 和 y 值尚未存储在任何特定位置或格式，它们只是已知的，因此完全灵活。

想法 1: 也许它们应该存储为另一个对象数组，并以 label 作为公共(public)键，然后根据该键的值以某种方式合并这两个对象？我不知道。

var xAndY = [
    {"label":"event1","x":0.5,"y":0.75},
    {"label":"event2","x":0.333,"y":0.235}
}

想法 2:或者可以将它们存储为数组对？

var xAndY = [
    [0.333,0.75],
    [0.666,0.235]
}

更多上下文:我也不会总是知道哪些对象将在数组中。有时 event1、event2、event3 会在那里。有时，只有 event1 和 event2。所以，我正在考虑某种 if 语句。就像想法 1(用简单的语言):

if label = event1, add these new properties x:0.5 and y:0.75
if label = event2, add these new properties x:0.666 and y:0.235

或想法2

if label = event1, add these new properties x:xAndY[0][0] and y:xAndY[0][1]
if label = event2, add these new properties x:xAndY[1][0] and y:xAndY[1][1]

显然我不知道如何解决这个问题。感谢您给我的任何指导。

Answer 1

这可能是一个使用 map 的好地方(可能通过 lodash 或下划线):

var data = [
    {"label":"event1","name":"Red Total","count":220,},
    {"label":"event2","name":"Green Total","count":330,},
    {"label":"event3","name":"Blue Total","count":440,},
    {"label":"overlap1","name":"Red","count":200,},
    {"label":"overlap2","name":"Green","count":300}
]

var valueMap = {
  event1: {
    x: 0.5,
    y: 0.75
  },
  event2: {
    x: 1,
    y: 2
  },
  event3: {
    x: 2,
    y: 4
  },
  overlap1: {
    x: 6,
    y: 3
  },
  overlap2: {
    x: 0.3,
    y: 0.1
  }
}

var fullData = data.map(function(el) {
  var values = valueMap[el.label];
  el.x = values.x;
  el.y = values.y;
  return el;
})