JavaScript函数重构：实现向嵌套对象最末层级插入键值对

云上老周

2026-10-10

JavaScript函数重构方案

原有代码的问题在于逻辑固定将新键值对插入根对象层级，未做嵌套对象的深度查找。你可以参考下方重构后的代码实现需求：

1. 新增深度查找嵌套对象辅助方法

把这个方法放在你组件的methods配置中即可：

// 递归查找对象中最深的最后一个嵌套子对象
findDeepestLastObj(obj) {
  // 倒序遍历对象属性，优先匹配最后一个对象类型的属性
  const keys = Object.keys(obj).reverse();
  for (const key of keys) {
    const val = obj[key];
    // 排除null、数组场景，仅匹配普通嵌套对象
    if (typeof val === 'object' && val !== null && !Array.isArray(val)) {
      // 递归查找更深层级的嵌套对象
      return this.findDeepestLastObj(val);
    }
  }
  // 没有更深的嵌套对象时返回当前对象
  return obj;
},

2. 重构后的addNewParent方法

addNewParent: function () {
  const newKey = this.$refs.inputKey.value.trim();
  const newValue = this.$refs.inputValue.value.trim();
  // 空键直接终止逻辑，避免插入无效数据
  if (!newKey) return;

  // 全量拷贝根对象数组，避免修改原响应式数据导致监听失效
  const updatedObjects = JSON.parse(JSON.stringify(this.objects));
  // 取数组最后一个根对象，对齐你现有业务场景
  const rootObj = updatedObjects[updatedObjects.length - 1];
  // 查找要插入键值对的目标嵌套对象
  const targetObj = this.findDeepestLastObj(rootObj);
  // 插入新键值对
  targetObj[newKey] = newValue;

  // 更新响应式变量
  this.objects = updatedObjects;

  // 清空输入框
  document.getElementById("inputKey").value = "";
  document.getElementById("inputValue").value = "";
}