如何在JavaScript中为匹配键的对象值实现追加操作？

手动处理更新（已知更新时机场景） #

如果能明确知道对象的更新时机，直接通过字符串拼接就能实现追加：

// 初始对象
let obj = {
  "source": "test",
  "data": {
    "country": "India"
  }
};

// 模拟新的国家值
const newCountry = "USA";

// 执行追加：判断原有值是否存在，存在则拼接，否则直接赋值
obj.data.country = obj.data.country ? `${obj.data.country}, ${newCountry}` : newCountry;

console.log(obj);
// 输出：{ source: 'test', data: { country: 'India, USA' } }

自动监听对象变化（自动捕获更新场景） #

如果需要自动监听country键的更新并执行追加，可以用ES6的Proxy对象，无需手动触发追加逻辑：

let obj = {
  "source": "test",
  "data": {
    "country": "India"
  }
};

// 为data对象创建代理，拦截set操作
obj.data = new Proxy(obj.data, {
  set(target, prop, value) {
    if (prop === 'country') {
      // 若已有值则追加，无值则直接赋值
      target[prop] = target[prop] ? `${target[prop]}, ${value}` : value;
    } else {
      // 其他属性保持默认赋值逻辑
      target[prop] = value;
    }
    return true;
  }
});

// 直接更新country会自动触发追加
obj.data.country = "USA";
console.log(obj);
// 输出：{ source: 'test', data: { country: 'India, USA' } }

// 再次追加新值
obj.data.country = "China";
console.log(obj);
// 输出：{ source: 'test', data: { country: 'India, USA, China' } }

可选：避免重复值追加 #

如果需要防止重复的国家被多次追加，可以在逻辑中加入去重判断：

// 修改Proxy的set逻辑，增加去重检查
obj.data = new Proxy(obj.data, {
  set(target, prop, value) {
    if (prop === 'country') {
      if (target[prop]) {
        const existingList = target[prop].split(', ');
        // 仅当新值不存在时才追加
        if (!existingList.includes(value)) {
          target[prop] = `${target[prop]}, ${value}`;
        }
      } else {
        target[prop] = value;
      }
    } else {
      target[prop] = value;
    }
    return true;
  }
});

// 尝试追加已存在的值，不会生效
obj.data.country = "USA";
console.log(obj);
// 输出仍为：{ source: 'test', data: { country: 'India, USA' } }

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