Question

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

2022-08-20

633

javascript reactjs arrays

我试图用另一个数组替换一个数组中的对象，同时保持索引/顺序不变。

因此 arrayOne：

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

arrayTwo：

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

我想要的新数组将是：

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

因此 选定 颜色仍将位于数组中的相同索引/位置。所需的数组可以是全新的数组或更新的 arrayOne 或 Two。我遇到的主要问题是当有多个带有 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.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 中给定索引处的对象

请注意，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)