如何向嵌套JavaScript对象数组插入元素？无需手动路径赋值

原生JavaScript实现 #

核心思路是通过递归遍历定位目标元素，利用JavaScript对象的引用类型特性直接修改目标元素的content数组——找到的目标对象就是原数据的引用，修改它的属性会直接同步到原data对象，完全不需要硬编码data.content[0].content[0]这类路径。

实现代码 #

const data = {
    "content": [
        {
            "name": "a",
            "content": [
                {
                    "name": "b",
                    "content": [
                        {
                            "name": "c",
                            "content": []
                        }
                    ]
                }
            ]
        }
    ]
};

// 要插入的新元素
const newItem = {"name": "d", "content": []};

// 递归查找并插入的函数
function insertIntoTarget(arr, targetName, item) {
    arr.forEach(element => {
        if (element.name === targetName) {
            // 找到目标后直接往content数组添加元素
            element.content.push(item);
            return; // 找到匹配项可提前终止当前遍历
        }
        // 当前元素有子content数组时，递归遍历下一层
        if (element.content && Array.isArray(element.content)) {
            insertIntoTarget(element.content, targetName, item);
        }
    });
}

// 调用函数，指定目标为name="c"的元素
insertIntoTarget(data.content, "c", newItem);

console.log(data); // 原data已被修改，符合预期结果

关键说明 #

• 如果存在多个name="c"的元素，上述代码会给所有匹配项插入新元素；若只需修改第一个匹配项，可在找到目标后抛出标记终止递归。
• 全程操作原对象引用，没有创建副本，因此修改会直接同步到原数据。

使用库实现（以Lodash为例） #

借助Lodash的工具函数可以简化递归逻辑，核心原理依然是基于引用修改原对象。

实现代码 #

先确保已引入Lodash：

// Node.js环境执行npm i lodash后引入，浏览器可通过CDN引入
const _ = require('lodash');

const data = { /* 原数据同上 */ };
const newItem = {"name": "d", "content": []};

// 递归遍历插入
function lodashInsert(data, targetName, item) {
    _.forEach(data.content, (elem) => {
        if (elem.name === targetName) {
            elem.content.push(item);
            return false; // 终止当前遍历链
        }
        if (elem.content && elem.content.length) {
            lodashInsert(elem, targetName, item);
        }
    });
}

lodashInsert(data, "c", newItem);
console.log(data);

也可以用_.flatMapDeep先扁平化所有元素，再定位修改：

// 扁平化所有层级的元素
const allElements = _.flatMapDeep(data, (val) => {
    return val.content ? [...val.content, ..._.flatMapDeep(val.content)] : [];
});

// 找到目标元素并插入
const target = _.find(allElements, {name: "c"});
if (target) {
    target.content.push(newItem);
}

关于之前重新赋值失败的原因 #

如果之前尝试遍历后重新赋值未成功，大概率是因为你在遍历过程中创建了对象/数组的副本（比如用map返回新数组），而非直接修改原数据的引用。修改副本自然不会同步到原data对象中。

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