Объединение объектов 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