Soru JavaScript Nesnelerini Bir'e Birleştirme


Ben gibi bir dizi parametre alır "Colorbox" (jQuery eklentisi) adlı bir işlevi var:

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

Bununla birlikte, her biri kendi özelliklerine sahip olan birkaç farklı "bu" türüm var. Öyle:

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

Bunun ötesinde, diğer davranışlarım, mantığım ve 'varsayılan' bir grup ayar grubum var (daha spesifik olanların üzerine yazılır). Yapmaya çalıştığım şey, birden fazla nesneden gelen tüm uygun ayarları tek bir nesneye itmektir, böylece sadece arayabilirim:

$(this).colorbox(Settings);

Bilinmeyen bir özellik grubunu ve değerlerini (örneğin "genişlik" ve "yükseklik"), Type.video gibi bir öğeden Ayarlar'a nasıl aktarırım? Amaç, Settings.height öğesini arayabilmek ve içeri aktardığım değeri geri alabilmektir.


44
2017-08-26 13:23


Menşei


olası kopyası İki JavaScript nesnesinin özelliklerini dinamik olarak nasıl birleştirebilirim? - givanse
Lütfen cevabımı gör stackoverflow.com/a/33572520/2934015 uyarılar ve alternatif bir çözüm için. - Spike Sagal


Cevaplar:


JQuery'ye bir göz atın uzatmak yöntem. Birlikte iki nesneyi ve tüm özelliklerini birleştirebilir.

JQuery'nin örnek sayfasından:

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

Şimdi ayarlar birleştirilmiş ayarları ve seçenekler nesnelerini içerir.


82
2017-08-26 13:31



Bu mükemmel görünüyor! Sanırım bunun için yerleşik bir javascript yöntemi olacağını düşündüm, ama Uzatma tam ihtiyacım olan şeyi yapıyor gibi görünüyor. Teşekkürler! - Doug Avery
Bu OP için yararlı gibi görünüyor ama teknik olarak soru sorduğu değil. OP, bunun için jQuery kullanmak istediğini söylemedi ... Sadece düz JavaScript. - Alejandro García Iglesias
OP bir jQuery eklentisi yazmaktadır, bir jQuery eklentisinin içinde jQuery işlevini kullanmak için en mantıklı olanı daha karmaşık bir çözüm vermek için aptalca görünecektir. - Matthew Manela


JavaScript, nesneyi birleştirmek için basit bir yerel işleve sahiptir. ES6'da tanıtılan 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 birleştirme nesnesi hakkında daha fazla bilgi için lütfen kontrol edin JavaScript nesnelerini birleştir örnekler ile.


14
2017-08-26 07:10



Upvoted. Düğümün --harmony bayrağıyla düğümü çalıştırırken bile - "tanımlanmamış bir işlev değil" hatası nedeniyle yükseltmesi gerekiyordu ... - Herald Smit
Bu, nesnelerdeki yuvalanmış katmanlar ile çalışmaz, yalnızca en üst düzeyde çalışır - thxmike
Bütünlük uğruna: Birleşmenin hedefi, ilk argümandır. Object.assignyani x örnek kodda mutasyona uğramıştır. Görmek Burada (MDN) detaylar için. - collapsar


JQuery olmayan bir çözümdür:

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;

Bu, genel işlev nesnesine, yüklenmeden ve oluşturulmadan önce bir değişken eklemek isterseniz kullanışlıdır.

Bu ayrıca ikinci YOUROBJ.vars'ın varsayılan ayar olarak işlev görmesini sağlar.


12
2018-02-23 12:19



Hey teşekkürler! Bu çok yararlı. - Doug Avery
"FC" ne ifade eder? - mediafreakch
Tahminimce aslında bu kodu kod adında kullanıyorlar. FCve değişti YOUROBJ soruyu cevaplamak ve sadece bir nokta kaçırdı. - John Gibb
Doğru. Çözüm güncellendi. - mummybot


JQuery kullanıyorsanız, ödeme yapmalısınız. $ .extend işlevi.

Böyle bir şey deneyebilirsin:

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

6
2017-08-26 13:35





Ayrıca genel amaçlarla kullanmak için Javascript'te "birleştirme" işlevi oluşturdum:

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

Kullanımı:

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

Daha hızlı ve daha pis (sığ kopya), ama yapmam gerekeni yapar.


4
2017-08-16 23:01



Uyarı: Nesne prototipini bunun gibi genişletmek, beklenmedik ve genellikle tehlikelidir. Bunun tehlikeleri hakkında oldukça iyi bir yazma ve ne zaman / nasıl buradan kurtulabilirsiniz? sugarjs.com/native ve konuyla ilgili harika bir konuşma blip.tv/jsconf/... - timoxley
@timoxley: Eğer yakından bakarsanız, aslında Nesne prototipini değiştirmiyor. - palswim
haklısın. Hepsini geri aldım D: - timoxley


Sorunuzu çok iyi anlamıyorum ama sanırım $ .extend işlevini kullanmalısınız:

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

bu şekilde Ayarlar Type.video özelliklerini alır


3
2017-08-26 13:34



Sorun hakkında yeterince adil. Örnek için teşekkürler, bu mükemmel. - Doug Avery


Basitçe birinci seviye birleştirme (ikinci nesneden ilk taneye eklenen tuşlar):

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

originalObject boş olmayan olmalı!


1
2018-04-05 14:58



HasOwnProperty hangi durumda kontrolde yanlış bir sonucu tetikler? Foreach döngüsünün nesneden çıkacağı ek öğeler var mı? - Prusprus
@Prusprus "HasOwnProperty () kullanımı, döngünün nesne üzerindeki herhangi bir miras alınmış özellik üzerinde numaralandırılmasını engeller" - user11153
Bu iyi bir referans, bunun için teşekkürler. Öyleyse, bir dizinin (URL’nizle verilen örnekte olduğu gibi), eğer sadece bir dizi ise miras kalan özelliklere sahip olabileceğine dair biraz kafam karışmış galiba. - Prusprus
@Prusprus Her dizi, eklenen özellikleri devralır. Array.prototype: "Array örnekleri devralın Array.prototype. Tüm kurucularda olduğu gibi, tümünde değişiklik yapmak için yapıcının prototip nesnesini değiştirebilirsiniz. Array örnekleri." - user11153
Tamam, yardımlarınız için teşekkürler. - Prusprus


Bunu da kullanabilirsiniz nesne birleştirme dayanır yeniden bileşen Object.assign ve orijinal nesneleri mutasyona uğratmadan birden fazla nesneyi bir araya getirir.

Örnekler:

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

0
2018-06-01 11:06