extend() से Objects Merge करना
In this page:
var merged = $.extend({}, object1, object2);
var deep = $.extend(true, {}, object1, object2);extend() क्या है?
$.extend() एक या ज़्यादा source objects की properties को एक target object पर copy करता है, उन्हें एक single combined object में merge करते हुए।
उदाहरण: What is extend()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const merged = $.extend({a: 1}, {b: 2});
console.log(merged);
</script>
</body>
</html>Properties को Override करना
जब दो source objects same property name share करती हैं, तो argument list में बाद में आने वाला object जीत जाता है और पहले वाली value को overwrite कर देता है।
उदाहरण: Override Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const result = $.extend({color: "red"}, {color: "blue"});
console.log(result.color);
</script>
</body>
</html>Default Options इस्तेमाल करना
एक बहुत common pattern यह है कि sensible fallback values वाला एक defaults object define किया जाए, फिर एक final settings object produce करने के लिए $.extend({}, defaults, userOptions) call किया जाए।
उदाहरण: Use Default Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const defaults = {speed: 300, color: "blue"};
const userOptions = {color: "red"};
const settings = $.extend({}, defaults, userOptions);
console.log(settings);
</script>
</body>
</html>कई Objects Merge करना
आप एक ही $.extend() call में दो से ज़्यादा objects merge कर सकते हैं, और properties सब में left से right copy होती हैं।
उदाहरण: Merge Multiple Objects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const merged = $.extend({}, {a: 1}, {b: 2}, {c: 3});
console.log(merged);
</script>
</body>
</html>एक छोटा extend() Project
extend() reusable, configurable functions बनाने के लिए खासतौर पर valuable है, क्योंकि यह हर caller को सिर्फ वही specific options override करने देता है जिनकी उसे परवाह है।
उदाहरण: Small extend() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function createWidget(options) {
const settings = $.extend({speed: 300, color: "blue"}, options);
console.log(settings);
}
createWidget({color: "green"});
</script>
</body>
</html>$.extend(defaults, options)call करना और original defaults खो देना, जबकि पहला argument बदल दिया जाता है;$.extend({}, defaults, options)इस्तेमाल करें।- यह उम्मीद करना कि nested objects एक shallow
$.extend()से merge हो जाएँगी, जबकि nested object पूरी तरह replace हो जाता है जब तक आप deep merge के लिए पहलेtruepass न करें। - arguments को गलत order में रखना, जैसे
$.extend({}, options, defaults), ताकि defaults user के options को overwrite कर दें।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: