如何删除嵌套对象数组中hobby为dance的元素？

原代码的问题 #

用forEach遍历category数组并结合splice删除元素时，会出现元素跳过检查的情况。因为splice删除元素后数组长度缩短，后续元素向前移位，但forEach的遍历索引仍按原顺序递增，导致部分元素没被检查到（比如数组中有连续两个dance项时，第二个会被跳过）。

解决方案1：倒序遍历修改原数组 #

通过倒序遍历数组，即使删除当前元素，前面的元素索引不会受影响，能确保每个元素都被检查到：

const people = [{
    id: 1,
    documents: [{
        id: 1,
        category: [{ hobby: 'soccer' }, { hobby: 'dance' }]
      },
      { id: 2, category: [{ hobby: 'soccer' }, { hobby: 'dance' }] }
    ]
  },
  {
    id: 2,
    documents: [{
        id: 1,
        category: [{ hobby: 'dance' }, { hobby: 'soccer' }]
      },
      { id: 2, category: [{ hobby: 'soccer' }, { hobby: 'dance' }] }
    ]
  }
];

people.forEach(person => {
  person.documents.forEach(document => {
    // 从数组末尾开始遍历
    for (let i = document.category.length - 1; i >= 0; i--) {
      if (document.category[i].hobby === 'dance') {
        document.category.splice(i, 1);
      }
    }
  });
});

console.log(people);

解决方案2：使用filter创建新数组（推荐） #

这种方式不修改原数组，通过map和filter生成新的处理后数组，代码简洁且无副作用：

const people = [{
    id: 1,
    documents: [{
        id: 1,
        category: [{ hobby: 'soccer' }, { hobby: 'dance' }]
      },
      { id: 2, category: [{ hobby: 'soccer' }, { hobby: 'dance' }] }
    ]
  },
  {
    id: 2,
    documents: [{
        id: 1,
        category: [{ hobby: 'dance' }, { hobby: 'soccer' }]
      },
      { id: 2, category: [{ hobby: 'soccer' }, { hobby: 'dance' }] }
    ]
  }
];

const filteredPeople = people.map(person => ({
  ...person,
  documents: person.documents.map(doc => ({
    ...doc,
    category: doc.category.filter(cat => cat.hobby !== 'dance')
  }))
}));

console.log(filteredPeople);

两种方案对比 #

• 方案1直接修改原数组，适合需要保留原对象引用的场景；
• 方案2创建新数组，避免修改原数据带来的潜在副作用，更符合现代JavaScript函数式编程风格，推荐优先使用。

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