Question

根据经过过滤的对象数组的数据创建新的对象数组

2019-07-30

68

javascript arrays

我有一个对象数组，其中有一个名为“selected”的键，该键设置为 false。我有一个从原始列表中筛选出的对象数组，其中键“selected”设置为 true。如何创建一个新数组，其中根据筛选后的列表使用 true 值更新原始列表？

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

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

const newData = data.map(item => {
  item.selected = filtered.find(item1 => item1.id === item.id).selected
  return item
})

console.log(newData)

最终结果应该是

    [{
        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**
      }
    ]

Answer 1

您需要检查 color 属性，如果找到对象，则返回一个属性发生变化的新对象。

const 
    data = [{ color: "red", value: "#f00", selected: false }, { color: "green", value: "#0f0", selected: false }, { color: "blue", value: "#00f", selected: false }, { color: "cyan", value: "#0ff", selected: false }, { color: "magenta", value: "#f0f", selected: false }, { color: "yellow", value: "#ff0", selected: false }, { color: "black", value: "#000", selected: false }],
    filtered = [{ color: "magenta", value: "#f0f", selected: true }, { color: "green", value: "#0f0", selected: true }, { color: "black", value: "#000", selected: true }],
    newData = data.map(item => {
        var object = filtered.find(item1 => item1.color === item.color);
        return Object.assign({}, item, object && { selected: object.selected });
    });

console.log(newData)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

将 filtered 数组的选定颜色名称存储在 Set 中。然后在映射时使用该 Set 来决定选择了哪些项目：

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

const selectedSet = new Set(filtered.map(o => o.color))

const newData = data.map(o => selectedSet.has(o.color) ? ({ ...o, selected: true }) : o)

console.log(newData)