如何递归修改任意层级JS Object/JSON中指定键的值？

这问题我之前做电商测试的时候天天碰！比如要把所有商品的price批量改成0做模拟数据，递归遍历绝对是最靠谱的方案——毕竟JSON/JS对象的层级完全没规律，必须一层层钻进去找目标键。

核心思路 #

1. 写一个递归函数，接收三个参数：待处理的对象/数组、要替换的目标键名、新值
2. 遍历当前层级的每个元素：
   • 如果是对象：检查每个键，匹配目标键就替换值；如果值是对象/数组，继续递归处理
   • 如果是数组：遍历数组里的每一项，对每一项递归调用函数（毕竟数组里可能嵌套对象或其他数组）
   • 如果是原始值（字符串、数字、布尔、null、undefined）：直接跳过，不用处理

完整代码示例 #

function replaceKeyValues(target, keyToReplace, newValue) {
  // 处理原始值，直接返回（避免递归到非对象/数组的情况）
  if (typeof target !== 'object' || target === null) {
    return target;
  }

  // 处理数组：遍历每个元素递归修改
  if (Array.isArray(target)) {
    return target.map(item => replaceKeyValues(item, keyToReplace, newValue));
  }

  // 处理对象：遍历每个键，这里用展开运算符创建新对象，不修改原对象；如果要改原对象，直接操作target即可
  const updatedObj = { ...target };
  for (const key in updatedObj) {
    if (key === keyToReplace) {
      updatedObj[key] = newValue;
    } else {
      // 对当前键的值递归处理
      updatedObj[key] = replaceKeyValues(updatedObj[key], keyToReplace, newValue);
    }
  }

  return updatedObj;
}

实际使用示例 #

比如你有这样的嵌套数据：

const originalData = {
  product: "Cotton T-Shirt",
  price: 29.99,
  variants: [
    { size: "XS", price: 27.99 },
    { size: "L", price: 32.99, details: { salePrice: 25.99, price: 32.99 } }
  ],
  relatedProducts: {
    top: { name: "Hoodie", price: 59.99 },
    bottom: { name: "Jeans", price: 49.99 }
  }
};

调用函数把所有price改成0：

const modifiedData = replaceKeyValues(originalData, 'price', 0);
console.log(modifiedData);

输出结果里所有层级的price都会变成0，而且不会修改原对象（因为我们用了{ ...target }创建新对象）。如果想直接修改原对象，把代码里的updatedObj换成直接操作target就行。

注意点 #

• 如果你需要处理循环引用的对象（比如对象里有属性指向自己），得加个缓存来记录已经处理过的对象，避免无限递归
• 函数里用了map和展开运算符，都是ES6+语法，要是要兼容旧环境，换成for循环和Object.assign就行

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