将JavaScript对象合并为一个

我有一个名为“Colorbox”（jQuery插件）的函数，它需要一些参数，如下所示：

$(this).colorbox({ width : "500px", height : "500px" }); 

我有几种不同types的“this”，但是，每个都有自己的属性。 像这样：

 var Type = { video: { width : "500px", height : "500px" }, gallery: { width : "1065px", height : "600px" } } 

除此之外，我还有其他行为，逻辑和一个“默认”设置组（这些设置会被更具体的设置覆盖）。 我想要做的是将所有适当的设置，从多个对象，到一个单一的对象，所以我可以打电话：

 $(this).colorbox(Settings); 

我将如何将Type.video等未知组的属性及其值（例如“width”和“height”）转移到Settings中？ 目标是能够调用Settings.height并获取我推入的值。

Answer 1

看看JQuery 扩展方法。 它可以将两个对象合并在一起，并将其所有属性合并

从JQuery的示例页面：

 var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 

现在设置包含合并的设置和选项对象。

Answer 2

非jQuery解决scheme是：

 YOUROBJ.vars = { vars1: { vars1_1: 'an object which will overwrite', vars1_2: 'an object which will be added' } }; YOUROBJ.vars2 = (!YOUROBJ.vars) ? {} : YOUROBJ.vars; YOUROBJ.vars = { vars1: { vars1_1: 'an object which will be overwritten', vars1_3: 'an object which will remain' } }; YOUROBJ.extend = function(obj, defaults) { for (var i in defaults) { if (!obj[i]) { obj[i] = defaults[i]; } else { YOUROBJ.extend(obj[i], defaults[i]); } } }; YOUROBJ.extend(YOUROBJ.vars, YOUROBJ.vars2); delete YOUROBJ.vars2; 

如果你希望在一个通用的函数对象被加载和创build之前添加一个variables，这是非常有用的。

这也使第二个YOUROBJ.vars作为默认设置。

Answer 3

JavaScript有一个简单的本地函数来合并对象。 这是ES6中引入的Object.assign（）。

  // creating two JavaScript objects var x = { a: true };var y = { b: false}; // merging two objects with JavaScript native function var obj = Object.assign(x,y); //result Console.log(obj); // output is { a: true, b: false } 

有关JavaScript合并对象的更多信息，请使用示例检查合并JavaScript对象 。

Answer 4

如果你使用jQuery，你应该签出$ .extend函数。

你可以尝试这样的事情：

 $.fn.somePlugin = function(options){ settings = $.extend(true, {default_values: "foo"}, options); } 

Answer 5

我也在Javascript中创build了一个“合并”函数，用于我的一般目的：

 if (typeof Object.merge !== 'function') { Object.merge = function (o1, o2) { // Function to merge all of the properties from one object into another for(var i in o2) { o1[i] = o2[i]; } return o1; }; } 

用法：

 var eDiv = document.createElement("div"); var eHeader = Object.merge(eDiv.cloneNode(false), {className: "header", onclick: function(){ alert("Click!"); }}); 

它更快，更脏（浅拷贝），但它做我需要做的。

Answer 6

我不明白你的问题，但我认为你应该使用$ .extend函数：

 Settings=$.extend(Settings, Type.video); 

通过这种方式设置将获得Type.video属性

Answer 7

简单地说，第一级合并（从第二个对象追加到第一个）：

 var mergeObjects = function (originalObject, objectToAppend) { for (var item in objectToAppend) { if (objectToAppend.hasOwnProperty(item)) { originalObject[item] = objectToAppend[item]; } } }; 

originalObject必须是非空的！

Answer 8

您也可以使用这个依赖于Object.assign 对象合并可重用组件，并将多个对象合并为一个，而不会改变原始对象。

例子：

 const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = merge(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1 } does not mutate objects