时间戳

首页 > 解决方案 > JS - 使用矛运算符向嵌套对象添加新键

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

问题描述

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

我有这样的树。

[{
    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];

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

标签： javascriptarraysspread-syntax

解决方案

我假设您想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)

推荐阅读