Объединение объектов 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 имеет простую встроенную функцию для объединения объектов. это Object.assign (), представленный в ES6.

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

таким образом Настройки получат свойства Type.video

Answer 7

Просто слияние первого уровня (добавление ключей от второго объекта к первому):

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

originalObject должно быть ненулевым!