從另一個數組替換數組中的對象

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)