"使用父对象值向嵌套对象添加路径的递归函数"

Question

我正在尝试使用其祖先的属性为所有嵌套对象添加“路径”。 本质上，我想使用其父对象的属性值的串联而不是使用键（就像我可以使用点符号、lodash 等）来表示嵌套对象的层次结构的“路径”。

我试过的：

interface SimpleObject {
    name : string
    slug : string
    slug_path? : string
    fields? : SimpleObject[]
}


const addNestedObjSlug = (data:SimpleObject[], parents:SimpleObject[] = []) => {

    data.map((obj) => {
        obj.slug_path = parents.length > 0 ? `${parents.map(({slug}) => slug).join('.')}.${obj.slug}` : obj.slug
        if(obj.fields && obj.fields.length > 0) {
            parents.push(obj)

            // I think the issue is here, that I probably need to set parents to an empty array at some point
            return addNestedObjSlug(obj.fields, parents)
        }
    })

    return data
}

const desiredResult = addNestedObjSlug([
    {
        name : 'Item 1',
        slug : 'i1',
        fields : [
            {
                name : 'Item 1 - 1',
                slug : 'i1-1'
            },
            {
                name : 'Item 1 - 2',
                slug : 'i1-2'
            },
            {
                name : 'Item 1 - 3',
                slug : 'i1-3'
            }
        ]
    },
    {
        name : 'Item 2',
        slug : 'i2',
        fields : [
            {
                name : 'Item 2 - 1',
                slug : 'i2-1',
                fields : [
                    {
                        name : 'Item 2 - 1 - 1',
                        slug : 'i2-1-1'
                    }
                ]
            }
        ]
    }
])

Answer 1

您可以关闭路径。

 const add = p => o => { const slug_path = p + (p && '.') + o.slug, fields = (o.fields || []).map(add(slug_path)); return { ...o, slug_path, ...(fields.length ? { fields } : {}) }; }, addNestedObjSlug = array => array.map(add('')); console.log(addNestedObjSlug([{ name: 'Item 1', slug: 'i1', fields: [{ name: 'Item 1 - 1', slug: 'i1-1' }, { name: 'Item 1 - 2', slug: 'i1-2' }, { name: 'Item 1 - 3', slug: 'i1-3' }] }, { name: 'Item 2', slug: 'i2', fields: [{ name: 'Item 2 - 1', slug: 'i2-1', fields: [{ name: 'Item 2 - 1 - 1', slug: 'i2-1-1' }] }] }]));

 .as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

如果您不介意也将 slugPath 添加到您的根元素（我个人认为在任何情况下都更好地保持一致性），那么应该这样做：

请注意，我们不会在此处更改任何输入数据，而只会返回一个带有适当添加的 slugPath 的副本。

我们在path<\/code>中保留一个节点数组，并在每个递归级别添加到它。 _<\/code>和__<\/code>参数只是为了覆盖map<\/code>提供给其回调函数的索引和完整数组。