如何从数组中删除特定索引，然后在同一索引上插入一个新索引？答案

【问题标题】：How can I remove a specific index from an array and then insert a new one on that same index?如何从数组中删除特定索引，然后在同一索引上插入一个新索引？
【发布时间】：2021-03-15 17:51:09
【问题描述】：

我想做一件事，但我有两个选择

从数组中删除特定项/索引，然后在同一索引中插入一个新项/索引。
不要删除该项目，而是使用新数据对其进行编辑。

我有这段代码：

const handleClick = () => {
    for (let i = 0; i < qs.length; i++) {
      if (qs[i].id === getNewQ.id) {
        const qsCopy = [...qs].filter((q) => q.id !== getNewQ.id);

        return [...qsCopy, { ...newGroup }];
      }
    }

    return [...qs];
  };

它从数组中删除项目，但是当它添加新项目时，它会将它添加到最后一个索引。但我需要的是，将这个新项目添加到删除另一个项目的索引中。

清楚吗？

我创建了一个可重现的示例：https://codesandbox.io/s/pedantic-darwin-4tty0?file=/src/App.tsx:912-1171

在示例中，您会注意到新项目是如何添加到最后一个索引的。它需要尽可能通用，因为它是动态的。并非所有时间都是相同的索引。

【问题讨论】：

标签： javascript arrays reactjs typescript ecmascript-6

【解决方案1】：

改为映射qs，当ID匹配时，返回newGroup而不是状态中的前一项：

const handleClick = () => qs.map((q) => (
  q.id === getNewQ.id
    ? { ...newGroup }
    : q
));

【讨论】：

qs.map 返回一个新的修改数组。您将需要重新分配 qs 变量。例如：qs = qs.map(...)，如果你想保持相同的变量！
我不这么认为，OP的当前代码不会重新分配qs，它只会返回一个新数组。同样，我的代码不会重新分配qs，而是返回一些新的东西。（即便如此，最好避免在不必要时重新分配）
这是突变吗？我正在使用 react useState 所以最后你的解决方案看起来像这样：addItems(qs => [...qs.map(q => (q.id === getClickedQuestion.id ? { ...newGroup } : q))])，可以吗？我认为它不能改变数据。目前，该解决方案完美运行。
我的回答没有突变。 .map 返回一个新数组，它不会修改旧数组。所以你不需要传播.map 的结果。您可能也不需要传播 newGroup - 您可以改为 ? newGroup

【解决方案2】：

为避免遍历整个数组，使用 findIndex 如下

const handleClick = () => {
  const qsCopy = [...qs];
  const itemIndex = qs.findIndex(({ id }) => (id === getNewQ.id));

  if (itemIndex !== -1) {
    qsCopy[itemIndex] = { ...newGroup };
  }

  return qsCopy;
};

【讨论】：

【解决方案3】：

CertainPerformance 提供了一个很好的解决方案，允许您只对数组进行一次 foreach。

仅供参考，可能对其他人有用：

还有其他方法可以做到这一点您可以找到您的对象，然后添加您的属性。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find 喜欢：

const myObject = qs.find(q => q.id === myId)

但是传播是行不通的，因为它会创建另一个对象。

另一种可能性：如果需要，一个 findIndex 和一个拼接

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

【讨论】：