Объединение объектов JavaScript в один

У меня есть функция, называемая "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 и вернуть значение, которое я нажал.

Ответ 1

Взгляните на метод JQuery extend. Он может объединить два объекта вместе и все их свойства.

На странице примера JQuery:

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

Теперь настройки содержат объединенные настройки и объекты параметров.

Ответ 2

Не-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 действовать как настройка по умолчанию.

Ответ 3

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 с примерами.

Ответ 4

Если вы используете jQuery, вы должны проверить $. extend.

Вы можете попробовать что-то вроде этого:

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

Ответ 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!"); }});

Это быстрее и грязнее (мелкая копия), но он делает то, что мне нужно.

Ответ 6

Я не очень хорошо понимаю ваш вопрос, но думаю, вы должны использовать функцию $.extend:

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

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

Ответ 7

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

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

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

Ответ 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