在嵌套数据结构中组合对象时设置对象属性

Question

我正在尝试编写一个富有表现力的JSON表示，其中我尝试进行对象组合，直接在组合中设置键值。但是，我不能以嵌套的方式组合多个对象。

我想要实现的是一种富有表现力的方式来编写具有可重用对象的对象数据结构，并以一种简洁的方式替代JSX --这就是为什么我希望能够“重用”这些对象组件，并尝试在组合时使用等号来设置子键。我只想实现没有库的原生JavaScript。JSX我猜，如果有人知道的话，可能是用正则表达式从字符串转换HTML标记？我更喜欢使用对象字面量的解决方案。任何想法都将不胜感激。

示例：

const foo = {
    name: 'Bob',
    abilities: {
        superpower: 'Says grrr',
        mood: 'Gruchy'
    }
}

const bar = {
    name: 'Denny',
    abilities: {
        superpower: 'Diabetes',
        mood: 'Hopeful'
    }
}

const dataStructure = {
    name: 'something',
    children: [
        foo.children = [ // 'foo' object will result in an array, even if we only set .children
            bar.children = [
                {
                    name: 'somethingElse'
                }
            ]
        ]
    ]
}

/*
    Desired resulting data structure:

    {
        name: 'something',
        children: [
            {
                name: 'Bob',
                abilities: {
                    superpower: 'Says grrr',
                    mood: 'Gruchy'
                },
                children = [
                    {
                        name: 'Denny',
                        abilities: {
                            superpower: 'Diabetes',
                            mood: 'Hopeful'
                        },
                        children = [
                            {
                                name: 'somethingElse'
                            }
                        ]
                    }
                ]
            }
        ]
    }
*/

Answer 1

以下是工作示例：

​

const foo = {
  name: 'Bob',
  abilities: {
    superpower: 'Says grrr',
    mood: 'Gruchy'
  }
}

const bar = {
  name: 'Denny',
  abilities: {
    superpower: 'Diabetes',
    mood: 'Hopeful'
  }
}

const dataStructure = {
  name: 'something',
  children: [{
    ...foo,
    children: foo.children = [{
      ...bar,
      children: bar.children = [{
        name: 'somethingElse'
      }]
    }]
  }]
}

console.log('Result:', dataStructure)
console.log('Foo:', foo)
console.log('Bar:', bar)

​

注意:但是这是非常奇怪的你想要做的事情……

Answer 2

你必须在你的变量定义之外设置你的bar.children，所以我猜下次它不会被调用。具有这样的表达式：

bar.children = 
{
    name: 'somethingElse'
}

const dataStructure = {
    name: 'something',
    children: 
        [foo,
        children = [bar]]
}

将为您提供以下输出：

{
    "name": "something",
    "children": [
        {
            "name": "Bob",
            "abilities": {
                "superpower": "Says grrr",
                "mood": "Gruchy"
            }
        },
        [
            {
                "name": "Denny",
                "abilities": {
                    "superpower": "Diabetes",
                    "mood": "Hopeful"
                },
                "children": {
                    "name": "somethingElse"
                }
            }
        ]
    ]
}