Javascript对象文字模板:使用基线扩展实现对象

时间:2016-03-27 01:08:17

标签: javascript jquery software-design

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

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

基线:

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

混凝土:

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

并通过使用concrete扩展/继承/合并baseline,我希望输出为:

{  
   "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
   }
}

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

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

2 个答案:

答案 0 :(得分:3)

Lodash 库可以在这里使用。

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

使用 Lodash 的优势是customizer功能,您可以在其中指定一些自定义合并礼品,虽然我不知道这是否可以在 jQuery extend接近。

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

Lodash 下划线是用于高级JavaScript对象操作的最佳库。

请看这两个问题,详细了解您可以做什么:
Lodash - difference between .extend() / .assign() and .merge()
Lodash: Constructing single object from many - Merging/overriding properties

答案 1 :(得分:2)

要执行此操作,您可以更改options对象的结构,如下所示,然后jQuery.extend(true, baseline, concrete)将起作用

"options": {
    "5": {
      "someName": true,
      "concreteValue": "important"
    }
  },
产生此结果的

See this jsFiddle

enter image description here