从另一个数组替换数组中的对象

Question

我正在尝试从另一个数组替换数组中的对象，同时保持索引/顺序到位。

所以arrayOne：

[
    {
        "color": "#f8edd1",
        "selected": true
    },
    {
        "color": "#d88a8a",
        "selected": false
    },
    {
        "color": "#474843",
        "selected": false
    },
    {
        "color": "#9d9d93",
        "selected": true
    },
    {
        "color": "#c5cfc6",
        "selected": false
    }
]

数组二：

[
    "#1c2130",
    "#028f76",
    "#b3e099",
    "#ffeaad",
    "#d14334"
]

我想要的新数组是：

[
    "#f8edd1",
    "#028f76",
    "#b3e099",
    "#9d9d93",
    "#d14334"
]

因此， selected颜色仍将位于数组中的相同索引/位置。 所需的数组可以是全新的数组或更新的数组一或二。 我遇到的主要问题是当有超过 1 个 object 且selected: true时映射它。

这是我第一次尝试它：

  const selectedColors = arrayOne.filter(function (obj) {
    return obj.selected === true
  })
  if (selectedColors) {
    const lockedIndex = arrayOne.findIndex((obj) => {
      if (obj.color === selectedColors[0].color) {
        return true
      }
    })
    const newColors = arrayTwo.splice(lockedIndex, 1, selectedColors[0].color)
    console.log(newColors)
  }

另请注意，arrayOne 实际上是一个 React useState，但我不想更新 useState，我正在使用newColors做其他事情 - 但如果创建单独的 useState 来执行我正在尝试做的事情更容易，没关系。

Answer 1

您可能只在 arrayTwo 上使用.map arrayTwo并使用作为索引的第二个参数。 如果未选择相应元素或该元素的值，则只需返回原始元素：

arrayTwo.map((element, index) => arrayOne[index].selected ? arrayOne[index].color : element)

 const arrayOne = [ { "color": "#f8edd1", "selected": true }, { "color": "#d88a8a", "selected": false }, { "color": "#474843", "selected": false }, { "color": "#9d9d93", "selected": true }, { "color": "#c5cfc6", "selected": false } ]; const arrayTwo = [ "#1c2130", "#028f76", "#b3e099", "#ffeaad", "#d14334" ] const result = arrayTwo.map((element, index) => arrayOne[index].selected? arrayOne[index].color: element); console.log(result);

Answer 2

我不知道您以后是否需要 arrayOne 和 arrayTwo，所以我创建了第三个，如下所示：

const arrayThree = [];
arrayOne.forEach(function(element, index) {
  arrayThree.push(element.selected ? element.color : arrayTwo[index]);
});

在这里，我们使用 forEach 循环对 arrayOne 进行迭代。 我们使用两个参数来获取对应的值：

element = arrayOne 中给定索引处的 object

请注意 forEach 循环是异步代码。 因此，如果在 forEach 循环之后需要 arrayThree 行并且必须迭代数百个元素的列表，则可能会得到一个空数组。 在这种情况下，您可以尝试使用常规循环：

const arraythree = [];
for(const [index, element] of arrayOne.entries()) {
  arrayThree.push(element.selected ? element.color : arrayTwo[index]);
}

如果您需要更多信息，请告诉我。

 const arrayOne = [ { "color": "#f8edd1", "selected": true }, { "color": "#d88a8a", "selected": false }, { "color": "#474843", "selected": false }, { "color": "#9d9d93", "selected": true }, { "color": "#c5cfc6", "selected": false } ]; const arrayTwo = [ "#1c2130", "#028f76", "#b3e099", "#ffeaad", "#d14334" ]; const arrayThree = []; arrayOne.forEach(function(element, index) { arrayThree.push(element.selected? element.color: arrayTwo[index]); }); console.log('result: ', arrayThree)