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)

Answer 2

如何添加foreach并使用item数组检查filtered，如下所示：

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
}];
var filteredData = [];

data.forEach(item => {
    var isSelected = 0;
    filtered.forEach(filterItem => {
        if(item.value === filterItem.value) {
            isSelected = 1;
        }
    });
  
    if (isSelected == 0) {
        item.selected = false;
    }
    filteredData.push(item); 
});

console.log(filteredData)

Answer 3

根据您的要求，一旦找到匹配项，应将所选值设置为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 = true;
      break;
    }
    else {
      item.selected = false;
    
  }
  }
})

console.log(data)

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

3 个答案: