使用cloneDeep克隆对象后，如何保留原数组仅修改目标元素？

DevOps 小满

2026-8-3

如何保留完整数组列表，仅修改目标对象的属性？

我有一个profiles数组，想要编辑其中一个对象的属性值，于是使用cloneDeep进行克隆：

let newProfiles = []
let newProfile = cloneDeep(this.profiles.find(p => p.id === data.profileId));
newProfile.hasUser = true;
newProfiles.push(newProfile);

这段代码可以通过ID筛选出目标对象并创建其克隆，运行正常。但当我执行this.profiles = newProfiles;时，会移除所有原有profile，仅保留修改后的新对象。请问如何保留完整的profiles列表，仅修改目标对象？

解决方法

你当前的问题是直接将仅包含修改后对象的空数组赋值给了原数组，自然会覆盖掉所有原有元素。要保留全部元素且仅修改目标对象，有两种常用方案：

方案1：先克隆整个数组，再修改目标元素

先深克隆整个profiles数组，避免修改原数组的引用，再找到目标对象修改属性：

// 深克隆整个原数组，确保不影响原数据
const newProfiles = cloneDeep(this.profiles);
// 在克隆后的数组中找到目标对象
const targetProfile = newProfiles.find(p => p.id === data.profileId);
// 确认找到后修改属性
if (targetProfile) {
  targetProfile.hasUser = true;
}
// 将修改后的数组赋值回去
this.profiles = newProfiles;

方案2：使用`map`遍历替换目标元素

通过map遍历数组，对匹配ID的元素进行克隆并修改，其余元素直接保留：

this.profiles = this.profiles.map(profile => {
  if (profile.id === data.profileId) {
    // 仅对目标对象深克隆并修改属性
    const updatedProfile = cloneDeep(profile);
    updatedProfile.hasUser = true;
    return updatedProfile;
  }
  // 非目标对象直接返回（若需严格保持不可变性，也可克隆后返回）
  return profile;
});