JavaScript对象数组嵌套数组复制问题：subList未定义原因及方案

首先咱们先聊聊subList返回undefined的可能原因，大概率是这几个情况：

1. 目标对象查找失败 #

你可能在查找_id=1的对象时，条件写错了或者对象根本不存在：

• 比如把属性名写错了：用item.id === 1代替了item._id === 1，毕竟下划线很容易漏写；
• 或者你的状态对象结构和你想的不一样，比如原数据是state.data.list，你却直接访问state.list，导致state.list本身就是undefined，后续查找自然也返回undefined；
• 再或者你的数组里根本没有_id=1的元素，那用find或者filter（如果取第一个元素的话）都会拿不到结果。

举个反例：

const state = { list: [{ _id: 1, value: 'test' }] };
// 错误：把_id写成了id
const subList = state.list.find(item => item.id === 1); // 返回undefined

2. 混淆了数组和单个对象的返回值 #

如果你用了filter方法，它返回的是符合条件的元素组成的数组，而不是单个对象。如果之后你把这个数组当成单个对象来用，就会出现类似subList.value返回undefined的情况（因为数组没有value属性）。比如：

const subList = state.list.filter(item => item._id === 1); // 返回 [{_id:1, ...}]
console.log(subList.value); // undefined，因为subList是数组

接下来是复制嵌套对象的可行方案，分浅拷贝和深拷贝两种场景：

一、浅拷贝（适合单层嵌套，或不需要修改内层嵌套对象的情况） #

浅拷贝只会复制对象的第一层属性，内层对象还是和原对象共享引用。常用方法：

• 展开运算符：最简洁的方式

const copiedItem = {...targetItem};
// 复制数组的话：
const copiedList = [...state.list];

• Object.assign：和展开运算符效果一致

const copiedItem = Object.assign({}, targetItem);

二、深拷贝（适合多层嵌套的对象，修改拷贝后的对象不会影响原对象） #

如果你的对象有多层嵌套（比如{_id:1, info: {name: 'xxx', address: {city: 'xxx'}}}），浅拷贝就不够用了，得用深拷贝：

1. JSON序列化/反序列化：简单易用，但有局限性（不能复制函数、Symbol、undefined，也处理不了循环引用）

const deepCopiedItem = JSON.parse(JSON.stringify(targetItem));

2. 手写递归深拷贝：自定义逻辑，能处理更多场景

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  // 处理数组
  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }
  // 处理对象
  const copiedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copiedObj[key] = deepCopy(obj[key]);
    }
  }
  return copiedObj;
}

const deepCopiedItem = deepCopy(targetItem);

3. 第三方工具库：比如Lodash的_.cloneDeep，如果你的项目已经引入了Lodash，直接用就行，省心靠谱。

最后给你一个完整的修改流程示例（以不可变状态更新模式为例，适配多数前端框架的状态管理逻辑）：

// 假设你的状态对象是这样的
const state = {
  list: [
    { _id: 1, name: '旧名称', info: { age: 20 } },
    { _id: 2, name: '项目2' }
  ]
};

// 1. 找到目标对象
const targetItem = state.list.find(item => item._id === 1);
if (!targetItem) {
  console.log('未找到_id为1的对象');
  return;
}

// 2. 深拷贝目标对象
const copiedItem = JSON.parse(JSON.stringify(targetItem));

// 3. 修改拷贝后的对象
copiedItem.name = '新名称';
copiedItem.info.age = 25; // 多层嵌套修改也不会影响原对象

// 4. 生成新的数组和状态（避免直接修改原状态）
const newList = state.list.map(item => item._id === 1 ? copiedItem : item);
const newState = {...state, list: newList};

console.log(newState.list[0]); // 修改后的对象
console.log(state.list[0]); // 原对象不受影响

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