如何在保持原始响应数据结构不可变的情况下，向深度嵌套数组中匹配条件的目标子数组追加数据项？

看起来你想要在tipster.picks数组里找到最后一个包含data.title为"today"的项，并给该项的data数组追加新数据，但你当前的代码逻辑有问题——你没有正确定位到目标项，反而错误地尝试给picks数组直接添加了一个格式不对的元素。

问题分析 #

你的代码：

const tipsterUpdate = { ...req.body, picks: [...tipster.picks, tipster.picks.slice(-(1)[0], newPick)], };

这里的slice(-(1)[0])写法完全错误，而且逻辑上没有找到目标项，只是把原picks数组展开后，又添加了一个无效的元素，根本没触及到目标项的data数组。

正确实现方案 #

我们需要遵循不可变数据的原则（和你用spread运算符的思路一致），步骤如下：

1. 找到picks数组中最后一个满足条件的项的索引（条件：该项的data数组里存在title为"today"的元素）
2. 复制原picks数组，对目标项进行修改：追加新数据到它的data数组
3. 生成最终的tipsterUpdate对象

代码示例：

const newPick = { title, description, date, category, pickImageUrl };

// 找到最后一个符合条件的picks项的索引
const targetIndex = tipster.picks.findLastIndex(pick => 
  pick.data.some(item => item.title === "today")
);

let updatedPicks = [...tipster.picks]; // 复制原picks数组

if (targetIndex !== -1) {
  // 复制目标项，并给它的data数组追加newPick
  const updatedPick = {
    ...updatedPicks[targetIndex],
    data: [...updatedPicks[targetIndex].data, newPick]
  };
  // 替换数组中的目标项
  updatedPicks[targetIndex] = updatedPick;
}

const tipsterUpdate = {
  ...req.body,
  picks: updatedPicks
};

代码解释 #

• findLastIndex：ES2022新增的方法，专门用来查找数组中最后一个符合条件的元素索引，完美匹配你的需求；如果环境不支持，也可以用倒序查找的替代方案。
• 所有修改都基于复制后的数组/对象，确保原数据不会被意外修改，符合你使用spread运算符的初衷。
• 增加了targetIndex !== -1的判断，避免找不到目标项时出现错误。

如果你的环境不支持findLastIndex，可以用替代方案：

// 倒序查找目标项的索引
const reversedIndex = tipster.picks.slice().reverse().findIndex(pick => 
  pick.data.some(item => item.title === "today")
);
const targetIndex = reversedIndex !== -1 ? tipster.picks.length - 1 - reversedIndex : -1;

内容的提问来源于stack exchange，提问作者Rodrigo Ibarra