如何通过带点字符串键修改对象深层属性并合并对象？

假设你有这样的原对象：

{
   "item": {
      "data": "some text here",
      "info": {
         "test": {
            "roles": [
               "admin"
            ],
            "index": 0 
         }
      }
   }
}

以及要定位的字符串路径 "item.info.test"，和用来替换的新对象：

{
   "roles": [
      "admin"
   ],
   "index": 5  
}

直接用obj[key][subkey]的写法没法适配层级数不固定的场景，你可以写一个通用函数来处理：

基础实现（假设路径已存在） #

function replaceDeepObject(obj, path, newObj) {
  const keys = path.split('.');
  let current = obj;
  // 遍历到目标层级的父对象
  for (let i = 0; i < keys.length - 1; i++) {
    current = current[keys[i]];
    // 路径不存在时直接返回，避免报错
    if (!current) return;
  }
  // 替换目标子对象
  current[keys[keys.length - 1]] = newObj;
}

使用示例 #

const originalObj = {
   "item": {
      "data": "some text here",
      "info": {
         "test": {
            "roles": ["admin"],
            "index": 0 
         }
      }
   }
};

const targetPath = "item.info.test";
const newTestObj = {
   "roles": ["admin"],
   "index": 5  
};

replaceDeepObject(originalObj, targetPath, newTestObj);
console.log(originalObj.item.info.test); // 输出：{ roles: ['admin'], index: 5 }

进阶实现（自动创建不存在的路径） #

如果需要处理路径部分层级不存在的情况，可以在遍历过程中自动创建空对象：

function replaceDeepObject(obj, path, newObj) {
  const keys = path.split('.');
  let current = obj;
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    // 层级不存在则创建空对象
    if (!current[key]) {
      current[key] = {};
    }
    current = current[key];
  }
  current[keys[keys.length - 1]] = newObj;
}

这个函数不管路径有多少层都能通用，完美解决多层级键的替换问题。

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