javascript - 比较两个对象数组并更新主数组中的元素 - JS

Question

我有一个对象数组(主数组)和一个过滤列表。他们有一个值为 true 的选定属性。我需要比较它们，如果另一个数组中不存在所选属性，则将其更新为 false。

这是我的实现。

const data = [{
    color: "red",
    value: "#f00",
    selected: true
  },
  {
    color: "green",
    value: "#0f0",
    selected: true
  },
  {
    color: "blue",
    value: "#00f",
    selected: true
  },
  {
    color: "cyan",
    value: "#0ff",
    selected: true
  },
  {
    color: "magenta",
    value: "#f0f",
    selected: true
  },
  {
    color: "yellow",
    value: "#ff0",
    selected: true
  },
  {
    color: "black",
    value: "#000",
    selected: true
  }
]

const filtered = [{
  color: "magenta",
  value: "#f0f",
  selected: true
}, {
  color: "green",
  value: "#0f0",
  selected: true
}, {
  color: "black",
  value: "#000",
  selected: true
}]

data.forEach(item => {
	for(var key in filtered) {
  	if(filtered[key]['value'] === item.value) {
    	item.selected = false
    }
  }
})

console.log(data)

预期的输出应该与此相反。

    [
      {
        "color": "red",
        "value": "#f00",
        "selected": false
      },
      {
        "color": "green",
        "value": "#0f0",
        "selected": true
      },
      {
        "color": "blue",
        "value": "#00f",
        "selected": false
      },
      {
        "color": "cyan",
        "value": "#0ff",
        "selected": false
      },
      {
        "color": "magenta",
        "value": "#f0f",
        "selected": true
      },
      {
        "color": "yellow",
        "value": "#ff0",
        "selected": false
      },
      {
        "color": "black",
        "value": "#000",
        "selected": true
      }
    ]

请指教。有没有更好的方法来实现这个目标？

P.S:我也可以使用 lodash。

谢谢。

Answer 1

您可以创建一个包含过滤数组中的值的数组，然后迭代主数据数组并查看各个项目是否包含过滤数组中的值:

const filteredValues = filtered.map(item => item.value);
data.forEach(item => {
  item.selected = filteredValues.includes(item.value);
});

此方法的优点是您无需进行嵌套迭代(基本上是 O(n^2) 复杂度)。

const data = [{
    color: "red",
    value: "#f00",
    selected: true
  },
  {
    color: "green",
    value: "#0f0",
    selected: true
  },
  {
    color: "blue",
    value: "#00f",
    selected: true
  },
  {
    color: "cyan",
    value: "#0ff",
    selected: true
  },
  {
    color: "magenta",
    value: "#f0f",
    selected: true
  },
  {
    color: "yellow",
    value: "#ff0",
    selected: true
  },
  {
    color: "black",
    value: "#000",
    selected: true
  }
]

const filtered = [{
  color: "magenta",
  value: "#f0f",
  selected: true
}, {
  color: "green",
  value: "#0f0",
  selected: true
}, {
  color: "black",
  value: "#000",
  selected: true
}]

const filteredValues = filtered.map(item => item.value);
data.forEach(item => {
  item.selected = filteredValues.includes(item.value);
})

console.log(data)