सवाल जावास्क्रिप्ट ऑब्जेक्ट्स को एक में जोड़ना


मेरे पास "कलरबॉक्स" (jQuery प्लगइन) नामक एक फ़ंक्शन है जो इस तरह के कई पैरामीटर लेता है:

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

मेरे पास "इस" के कई अलग-अलग प्रकार हैं, हालांकि, प्रत्येक अपनी संपत्ति के साथ। इस तरह:

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

इसके अलावा, मेरे पास अन्य व्यवहार, तर्क, और सेटिंग्स का 'डिफ़ॉल्ट' समूह है (जो अधिक विशिष्ट लोगों द्वारा ओवरराइट किया जाता है)। मैं जो करने की कोशिश कर रहा हूं वह कई ऑब्जेक्ट्स से, एक ऑब्जेक्ट में सभी उपयुक्त सेटिंग्स को धक्का दे रहा है, इसलिए मैं बस कॉल कर सकता हूं:

$(this).colorbox(Settings);

मैं Type.video जैसे सेटिंग में किसी चीज़ से गुणों और उनके मानों (उदाहरण के लिए "चौड़ाई" और "ऊंचाई") को कैसे स्थानांतरित करूं? लक्ष्य सेटिंग्स को कॉल करने में सक्षम होना है। हाइट और उस मूल्य को वापस प्राप्त करें जिसमें मैंने धक्का दिया था।


44
2017-08-26 13:23


मूल


के संभावित डुप्लिकेट मैं गतिशील रूप से दो जावास्क्रिप्ट वस्तुओं के गुणों को कैसे विलय कर सकता हूं? - givanse
कृपया मेरा जवाब देखें stackoverflow.com/a/33572520/2934015 चेतावनी और वैकल्पिक समाधान के लिए। - Spike Sagal


जवाब:


JQuery पर एक नज़र डालें विस्तार तरीका। यह दो वस्तुओं को एक साथ और उनके सभी गुणों को विलय कर सकता है।

JQuery के उदाहरण पृष्ठ से:

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

अब सेटिंग्स में विलय सेटिंग्स और विकल्प ऑब्जेक्ट्स हैं।


82
2017-08-26 13:31



यह सही दिखता है! मुझे लगता है कि मैंने सोचा था कि इसके लिए एक अंतर्निहित जावास्क्रिप्ट विधि होगी, लेकिन विस्तार करना मुझे वही करना है जो मुझे चाहिए। धन्यवाद! - Doug Avery
यह ओपी के लिए उपयोगी लगता है लेकिन तकनीकी रूप से यह सवाल नहीं है कि सवाल क्या है। ओपी ने उल्लेख नहीं किया कि वह उस के लिए jQuery का उपयोग करना चाहता था ... बस सादा जावास्क्रिप्ट। - Alejandro García Iglesias
ओपी एक jQuery प्लगइन एसपी लिख रहा है, यह एक जटिल प्लगइन देने के लिए मूर्खतापूर्ण प्रतीत होता है जब यह jQuery प्लगइन के अंदर एक jQuery फ़ंक्शन का उपयोग करने के लिए सबसे अधिक समझ में आता है। - Matthew Manela


ऑब्जेक्ट को मर्ज करने के लिए जावास्क्रिप्ट में एक साधारण मूल कार्य है। जो ऑब्जेक्ट.साइन () ईएस 6 में पेश किया गया है।

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

जावास्क्रिप्ट विलय ऑब्जेक्ट के बारे में अधिक जानकारी के लिए कृपया जांचें जावास्क्रिप्ट वस्तुओं को मर्ज करें उदाहरण के साथ।


14
2017-08-26 07:10



Upvoted। मुझे "अपरिभाषित एक फ़ंक्शन नहीं है" त्रुटि के कारण नोड को अपग्रेड करना पड़ा - यहां तक ​​कि - हार्मनी ध्वज के साथ नोड चलाते समय भी ... - Herald Smit
यह वस्तुओं में नेस्टेड परतों के साथ काम नहीं करता है, यह केवल शीर्ष स्तर पर काम करता है - thxmike
पूर्णता के लिए: विलय का लक्ष्य पहला तर्क है Object.assign, अर्थात। x नमूना कोड में उत्परिवर्तित है। देख यहाँ (MDN) ब्योरा हेतु। - collapsar


एक गैर-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 को डिफ़ॉल्ट सेटिंग के रूप में कार्य करने में सक्षम बनाता है।


12
2018-02-23 12:19



धन्यवाद! यह बहुत उपयोगी है। - Doug Avery
"एफसी" क्या संदर्भित करता है? - mediafreakch
मेरा अनुमान है कि वे वास्तव में इस कोड को अपने कोड बेस में कॉल कर रहे हैं FC, और इसे बदल दिया YOUROBJ सवाल का जवाब देने के लिए और बस एक जगह चूक गई। - John Gibb
सही बात। समाधान अद्यतन किया गया। - mummybot


यदि आप jQuery का उपयोग कर रहे हैं तो आपको चेकआउट करना चाहिए $ .extend समारोह।

आप इस तरह कुछ कोशिश कर सकते हैं:

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

6
2017-08-26 13:35





मैंने अपने सामान्य उद्देश्यों के लिए जावास्क्रिप्ट में एक "विलय" फ़ंक्शन भी बनाया है:

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!"); }});

यह तेज और गंदगी (उथली प्रतिलिपि) है, लेकिन यह वही करता है जो मुझे करने की ज़रूरत है।


4
2017-08-16 23:01



चेतावनी: ऑब्जेक्ट प्रोटोटाइप को विस्तारित करना इस तरह की अव्यवस्थित और आम तौर पर खतरनाक है। इस के खतरों पर बहुत अच्छा लेखन और यहां आप कब से दूर हो सकते हैं sugarjs.com/native और यहां विषय पर एक महान बात है blip.tv/jsconf/... - timoxley
@ टिमॉक्सले: यदि आप बारीकी से देखते हैं, तो यह वास्तव में ऑब्जेक्ट प्रोटोटाइप को संशोधित नहीं कर रहा है। - palswim
आप सही हे। मैं इसे सब वापस लेता हूं डी: - timoxley


मैं आपके प्रश्न को बहुत अच्छी तरह समझ नहीं पा रहा हूं लेकिन मुझे लगता है कि आपको $ .extend फ़ंक्शन का उपयोग करना चाहिए:

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

इस तरह सेटिंग्स सेटिंग्स.विडियो गुण मिलेगा


3
2017-08-26 13:34



सवाल के बारे में काफी उचित है। उदाहरण के लिए धन्यवाद, यह सही है। - Doug Avery


बस पहले स्तर विलय (दूसरे ऑब्जेक्ट से पहली बार कुंजी जोड़ना):

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

originalObject गैर-शून्य होना चाहिए!


1
2018-04-05 14:58



किस मामले में ओनप्रोपर्टी ने चेक में झूठा परिणाम ट्रिगर किया होगा? क्या अतिरिक्त आइटम हैं जो ऑब्जेक्ट से फ़ोरैच लूप निकाले जाएंगे? - Prusprus
@Prusprus "HasOwnProperty () का उपयोग लूप को ऑब्जेक्ट पर किसी भी विरासत गुणों के बारे में बताते हुए रोकता है" - user11153
यह एक अच्छा संदर्भ है, इसके लिए धन्यवाद। तो मुझे लगता है कि मैं थोड़ा उलझन में हूं कि एक सरणी (आपके यूआरएल के माध्यम से दिए गए उदाहरण में कहें) में विरासत गुण हो सकते हैं, अगर यह सिर्फ एक सरणी है? - Prusprus
@Prusprus प्रत्येक सरणी में गुणों को विरासत में मिला है Array.prototype: "Array उदाहरण से वारिस Array.prototype। सभी रचनाकारों के साथ, आप सभी को बदलने के लिए कन्स्ट्रक्टर की प्रोटोटाइप ऑब्जेक्ट को बदल सकते हैं Array उदाहरणों। " - user11153
ठीक है, आपकी मदद के लिए धन्यवाद। - Prusprus


आप इसका भी उपयोग कर सकते हैं वस्तु-मर्ज पुन: प्रयोज्य घटक जो निर्भर करता है 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

0
2018-06-01 11:06