将 JavaScript 对象合二为一

Question

我有一个名为“Colorbox”（jQuery 插件）的函数，它接受许多参数，如下所示：

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

不过，我有几种不同类型的“this”，每种都有自己的属性。像这样：

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

除此之外，我还有其他行为、逻辑和一组“默认”设置（被更具体的设置覆盖）。我想要做的是将所有适当的设置从多个对象推送到一个对象中，这样我就可以调用：

$(this).colorbox(Settings);

如何将一组未知的属性及其值（例如“宽度”和“高度”）从 Type.video 之类的内容传输到“设置”？目标是能够调用 Settings.height 并取回我推入的值。

Answer 1

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

来自 JQuery 的示例页面：

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

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

Answer 2

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 合并对象的更多信息，请查看merge JavaScript objects 示例。

Answer 3

非 jQuery 解决方案是：

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;

如果您希望在加载和创建通用函数对象之前将变量添加到它，这将非常有用。

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

Answer 4

如果你使用 jQuery，你应该检查 $.extend 函数。

你可以试试这样的：

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

Answer 5

我还在 Javascript 中创建了一个“合并”函数用于我的一般用途：

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);

这样Settings会获取Type.video属性

Answer 7

简单的第一级合并（将第二个对象的键附加到第一个对象）：

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

originalObject 必须为非空！