What is the purpose of the first boolean parameter in $ .extend
I initially doubt how $ .extend works. I have referenced this question. But I am confused about the following code segment
$.extend(true,{},{foo:2})
$.extend({},{foo:2})
Both return {foo:2}
.
I understand the second code very clearly. How does the first operator work? What is the difference between the first and second expression? If they are both the same, what is the purpose of the first statement? If not, why are both returning the same result?
Any suggestions?
source to share
It creates a deep copy, I think an example can show you what it does
var log = (function() {
var $log = $('#log');
return function(msg) {
$('<p/>', {
text: msg
}).appendTo($log)
}
})();
function test(deep) {
var obj = {
prop1: 1,
obj12: {
prop1: 1
}
};
var cpy = deep ? $.extend(true, {}, obj) : $.extend({}, obj);
cpy.obj12.prop1 = 'changed';
log(JSON.stringify(obj));
log(JSON.stringify(cpy));
}
log('without the deep param')
test();
log('with deep')
test(true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>
If you look at the generated results, the value obj12
is actually copied to cpy
when deep
not used.
source to share
Passing true as the first argument helps to concatenate the values of the same key in both objects, otherwise it just overwrites the value for the first object with the value of the second object with the same key. The following example should help clarify it.
var foo1 = {
prop1: 1,
obj1: { prop2: 2, prop3: 3 },
prop4: 4
};
var foo2 = {
obj1: { prop3: 32 },
prop6: 6
};
/*overwrites the value for key: obj1 */
$.extend( foo1, foo2 );
//{"prop1":1,"obj1":{"prop3":32},"prop4":4,"prop6":6}
/*merges the value for key: obj1 */
$.extend( true, foo1, foo2 );
//{"prop1":1,"obj1":{"prop2":2,"prop3":32},"prop4":4,"prop6":6}
source to share
Ans 1: A merge done with $ .extend () is not recursive by default; if a property of the first object is itself an object or an array, it will be completely overwritten by the property with the same key in the second or subsequent object. The values are not combined. However, by passing true for the first argument to the function, the objects will be recursively combined.
Ans 2: the former will do a recursive merge (deep copy), where when the latter does a normal merge, overriding the first object will go through any ...
Ans 3: since both of them are not the same, the first returns a recursive merged object and the second returns an object without recursive
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.extend </title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Default Objects</p>
<div id="default"></div>
<p>seconrio 1 : merging object using recursive (deep copy)</p>
<div id="seconrio1"></div>
<p>here in this only price value is override using recursive and banana object</p>
<p>seconrio 2 : Merge object1 and object2, without using recursive (deep copy)</p>
<div id="seconrio2"></div>
<p>here in this whole banana object value is override</p>
<script>
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
var printObj = typeof JSON !== "undefined" ? JSON.stringify : function( obj ) {
var arr = [];
$.each( obj, function( key, val ) {
var next = key + ": ";
next += $.isPlainObject( val ) ? printObj( val ) : val;
arr.push( next );
});
return "{ " + arr.join( ", " ) + " }";
};
$( "#default" ).append( "<div><b>object1 -- </b>" + printObj( object1 ) + "</div>" );
$( "#default" ).append( "<div><b>object2 -- </b>" + printObj( object2 ) + "</div>" );
// Merge object2 into object1, recursively
$.extend( true, object1, object2 );
$( "#seconrio1" ).append( "<div><b>object1 -- </b>" + printObj( object1 ) + "</div>" );
$( "#seconrio1" ).append( "<div><b>object2 -- </b>" + printObj( object2 ) + "</div>" );
// Merge object1 and object2, without recursively
var settings = $.extend( {}, object1, object2 );
$( "#seconrio2" ).append( "<div><b>object1 -- </b>" + printObj( settings ) + "</div>" );
$( "#seconrio2" ).append( "<div><b>object2 -- </b>" + printObj( object2 ) + "</div>" );
</script>
</body>
</html>
source to share