JavaScript中如何根据键路径数组动态修改对象属性值？

可以写一个通用函数来处理任意层级的键路径，核心思路是逐层遍历键路径，定位到最后一层属性后完成赋值。

通用实现函数 #

function setNestedValue(obj, keys, value) {
  // 遍历到倒数第二个键，确保每一层对象都存在（可选自动创建空对象）
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    // 如果当前层级不存在，自动创建空对象（按需保留，不需要可删除）
    if (!obj[key]) {
      obj[key] = {};
    }
    obj = obj[key];
  }
  // 给最后一个键赋值
  obj[keys[keys.length - 1]] = value;
}

结合你的场景使用 #

注意你的api_response.key包含了根对象名settings，但目标修改对象就是settings本身，所以需要跳过第一个键：

var api_response = { key: "settings.options.height", val: 500 };
var keys = api_response.key.split('.');
var settings = { options: { height: 0 } };

// 调用函数，用slice(1)跳过第一个"settings"键
setNestedValue(settings, keys.slice(1), api_response.val); 

console.log(settings.options.height); // 输出 500

扩展优化 #

1. 支持直接传入字符串路径：不用提前拆分键路径，让函数兼容字符串和数组两种格式：

function setNestedValue(obj, keyPath, value) {
  const keys = typeof keyPath === 'string' ? keyPath.split('.') : keyPath;
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    if (!obj[key]) obj[key] = {};
    obj = obj[key];
  }
  obj[keys[keys.length - 1]] = value;
}

// 直接传字符串路径调用
setNestedValue(settings, "options.height", api_response.val);

2. 兼容数组索引：如果键路径包含数组（比如"list.0.name"），可以调整逻辑自动识别数组索引：

function setNestedValue(obj, keyPath, value) {
  const keys = typeof keyPath === 'string' ? keyPath.split('.') : keyPath;
  for (let i = 0; i < keys.length - 1; i++) {
    const key = keys[i];
    const isArrayIndex = !isNaN(parseInt(key));
    if (!obj[key]) {
      obj[key] = isArrayIndex ? [] : {};
    }
    obj = obj[key];
  }
  obj[keys[keys.length - 1]] = value;
}

3. 禁止自动创建层级：如果不需要自动生成不存在的中间对象，直接删除if (!obj[key]) obj[key] = {};这行即可，此时若路径不存在会报错，可按需添加错误捕获逻辑。

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