JS - 使用扩展运算符向嵌套对象添加新键

Question

我有点困惑。你可以帮帮我吗？这很简单，但我无法解决我的问题。

我有这样的树。

[{
    label: "Label 1",
    colspan: 0,
    columns: [
        {
            data: "Colunm1"
        },
        {
            data: "Column2"
        }
    ]
},
{
    label: "Label 2",
    colspan: 0,
    columns: [
        {
            data: "Column3",
            editor: false
        },
        {
            data: "Column4"
        },
        {
            data: "Column5"
        }
    ]
},
{
    label: "Label 3",
    colspan: 0,
    columns: [
        {
            data: "Column6"
        },
        {
            data: "Column7"
        },
        {
            data: "Column8"
        }
    ]
}]

如您所见，第二个对象列数组中有一个 editor 键。我想使用扩展运算符将 editor 键添加到所有对象内的同一级别。

我开始编写代码，但卡住了。

this.columns = [...this.columns, ...item.columns];

我在 constructor 钩子中也有 this.columns 定义。所以，我想在这个定义中创建新的副本。上面的数据结构是从另一个文件导入的，我正在迭代它以创建列数组的新副本。

Answer 1

我假设您想在每一列中添加 editor: false。

const tree = [{
    label: "Label 1",
    colspan: 0,
    columns: [
        {
            data: "Colunm1"
        },
        {
            data: "Column2"
        }
    ]
},
{
    label: "Label 2",
    colspan: 0,
    columns: [
        {
            data: "Column3",
            editor: false
        },
        {
            data: "Column4"
        },
        {
            data: "Column5"
        }
    ]
},
{
    label: "Label 3",
    colspan: 0,
    columns: [
        {
            data: "Column6"
        },
        {
            data: "Column7"
        },
        {
            data: "Column8"
        }
    ]
}]

const res = tree.map(ele => {
    const columns = ele.columns.map(c => ({...c, editor: false }))
    ele = {...ele, columns}
    return ele
})

console.log(res)

JS - 使用扩展运算符向嵌套对象添加新键

JS - Add new key to nested object with speard operator

javascript

arrays

spread-syntax