Javascript object literal template: Extending implementation object with a baseline

I'm working with javascript object literals, and got the brilliant idea that I'd streamline the actual object literal I had to work with, by abstracting all the common attributes away.

我正在使用javascript对象文字,并且通过抽象出所有常见属性,我得到了一个很好的想法,即我将简化我必须使用的实际对象文字。

As such I'd like to extend/inherit/merge my concrete object from a baseline predefined object structure. What I mean is something like this:

因此,我想从基线预定义对象结构扩展/继承/合并我的具体对象。我的意思是这样的:

Baseline:

{  
       "id":"",
       "options":[  
          {  
             "1":true,
              "concreteValue":"important"
          },
          {  
             "2":false,
              "concreteValue":"unimportant"
          },
          {  
             "3":true,
             "concreteValue":"important"
          }
       ],
       "greeting":"Howdy",
       "player":{  
          "name":"",
          "hp":1,
          "mana":10
       }
}

Concrete:

{  
   "id":"player1",
   "options":[  
      {  
         "5":true,
          "concreteValue":"awesome"
      }
   ],
   "greeting":"Greetings!",
   "player":{  
      "name":"player1",
      "hp":15
   }
}

and through extending/inheriting/merging concrete with baseline, I want the output to be this:

通过扩展/继承/合并具体基线,我希望输出为:

{  
   "id":"player1",
   "options":[  
      {  
         "1":true,
         "concreteValue":"important"
      },
      {  
         "2":false,
         "concreteValue":"unimportant"
      },
      {  
         "3":true,
         "concreteValue":"important"
      },
      {  
         "5":true,
         "concreteValue":"awesome"
      }
   ],
   "greeting":"Greetings!",
   "player":{  
      "name":"player1",
      "hp":15,
      "mana":10
   }
}

So values that exist both places are overwritten by those in concrete, values that does not already exist are added. This seem like a good way of doing things, so I'm sure there's a smart way of doing this, that I haven't found yet :) I looked at jQuery Extend, but it doesn't seem to merge values by the same name into each other.

因此,存在于两个地方的值都会被具体的值覆盖,因此会添加尚不存在的值。这似乎是一种很好的做事方式,所以我确信有一种聪明的方法可以做到这一点,我还没有找到:)我看了jQuery Extend,但它似乎没有合并值相同相互命名。

I tried using concat and Object.Assign, but they didn't do the trick either. Anyone got any ideas?

我尝试使用concat和Object.Assign,但他们也没有做到这一点。有人有任何想法吗?

2 个解决方案

#1

Lodash library can be used here.

Lodash库可以在这里使用。

I would probably choose @DelightedD0D solution not to add additional library if that's the only thing you will use Lodash for.

我可能会选择@ DelightedD0D解决方案,不添加额外的库,如果这是你将使用Lodash的唯一。

The advantage of using Lodash would be the customizer function where you can specify some custom merge goodies although i don't know if that is possible in jQuery extend approach.

使用Lodash的优点是定制器功能,你可以指定一些自定义合并的好东西,虽然我不知道这是否可能在jQuery扩展方法。

You can use merge(src, dest, customizer) function to get what you described, here is the result:
http://jsbin.com/qibeji/edit?js,console

您可以使用merge(src,dest,customizer)函数来获取您所描述的内容,结果如下:http://jsbin.com/qibeji/edit?js,console

Lodash and Underscore are most optimal libraries for advanced javascript object manipulation.

Lodash和Underscore是用于高级javascript对象操作的最佳库。

Take a look at this two questions for a detailed overview of what you can do:
Lodash - difference between .extend() / .assign() and .merge()
Lodash: Constructing single object from many - Merging/overriding properties

看看这两个问题,详细了解你可以做什么:Lodash - .extend()/ .assign()和.merge()之间的区别Lodash:从多个构造单个对象 - 合并/覆盖属性

#2

To do this, you could change the strcture of the options objects like below, then jQuery.extend(true, baseline, concrete) would work

为此,您可以更改选项对象的结构,如下所示,然后jQuery.extend(true,baseline,concrete)将起作用

"options": {
    "5": {
      "someName": true,
      "concreteValue": "important"
    }
  },

See this jsFiddle which produces this result: