Question

最初我怀疑$ .extend的工作原理。我提到this问题。但我对以下代码段感到困惑

$.extend(true,{},{foo:2})
$.extend({},{foo:2})

两者都返回{foo:2}。

我非常清楚第二个代码声明。第一个陈述如何运作？第一个和第二个陈述有什么区别？如果两者相同，第一个陈述的目的是什么？如果没有，为什么两者都返回相同的结果？

有什么建议吗？

Answer 1

它会创建一个深层副本，我想一个例子可以告诉你它做了什么

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>

＆＃13;

如果您查看生成的结果，obj12值实际上会在未使用cpy时复制到deep。

Answer 2

传递true作为第一个参数有助于合并两个对象中相同键的值，否则它只是用第二个对象的值用相同的键覆盖第一个对象上的值。以下示例应该有助于明确

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}

Answer 3

Ans 1：默认情况下，$ .extend（）执行的合并不是递归的。如果第一个对象的属性本身是一个对象或数组，它将被第二个或后续对象中具有相同键的属性完全覆盖。值未合并。但是，通过为第一个函数参数传递true，将以递归方式合并对象。

Ans 2：第一个将执行递归合并（深层复制），其中第二个将执行正常合并，覆盖第一个对象传递任何...

答案3：由于两者不相同，第一个将返回一个递归的合并对象，而第二个将返回一个没有递归的对象

＆＃13;

<!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>

＆＃13;

$ .extend中第一个布尔参数的用途是什么

3 个答案: