web-dev-qa-db-ja.com

jquery extend vs angular extend

これら2つの拡張機能の違いは何ですか？

  angular.extend(a,b);
  $.extend(a,b);

Jquery.extendは十分に文書化されていますが、angular.extendには詳細がなく、そこにあるコメントには答えがありません。 （ https://docs.angularjs.org/api/ng/function/angular.extend ）。

Angular.extendはディープコピーも提供しますか？

javascriptjqueryangularjsextend
62
Renaud

angular.extendおよびjQuery.extendはveryと似ています。両方とも、1つまたは複数のソースオブジェクトから宛先オブジェクトへのshallowプロパティコピーを実行します。したがって、たとえば：

var src = {foo: "bar", baz: {}};
var dst = {};
whatever.extend(dst, src);
console.log(dst.foo);             // "bar"
console.log(dst.baz === src.baz); // "true", it's a shallow copy, both
                                  // point to same object

angular.copy は、deepコピーを提供します。

var src = {foo: "bar", baz: {}};
var dst = angular.copy(src);
console.log(dst.baz === src.baz); // "false", it's a deep copy, they point
                                  // to different objects.

extendに戻ると、重要な違いが1つしかありません。jQueryのextendでは、オブジェクトを1つだけ指定できます。この場合、jQuery自体がターゲットになります。

共通点：

  • 浅いコピーです。 srcがオブジェクトを参照するプロパティpを持っている場合、dstはを参照するプロパティpを取得しますsameオブジェクト（オブジェクトのコピーではありません）。

  • どちらも宛先オブジェクトを返します。

  • どちらも複数のソースオブジェクトをサポートしています。

  • 両方とも複数のソースオブジェクトを順番に処理します。したがって、複数のソースオブジェクトが同じプロパティ名を持つ場合、最後のソースオブジェクトが「勝ち」ます。

テストページ： ライブコピー | ライブソース

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>Extend!</title>
</head>
<body>
  <script>
    (function() {
      "use strict";
      var src1, src2, dst, rv;

      src1 = {
        a: "I'm a in src1",
        b: {name: "I'm the name property in b"},
        c: "I'm c in src1"
      };
      src2 = {
        c: "I'm c in src2"
      };

      // Shallow copy test
      dst = {};
      angular.extend(dst, src1);
      display("angular shallow copy? " + (dst.b === src1.b));
      dst = {};
      jQuery.extend(dst, src1);
      display("jQuery shallow copy? " + (dst.b === src1.b));
      $("<hr>").appendTo(document.body);

      // Return value test
      dst = {};
      rv = angular.extend(dst, src1);
      display("angular returns dst? " + (rv === dst));
      dst = {};
      rv = jQuery.extend(dst, src1);
      display("jQuery returns dst? " + (rv === dst));
      $("<hr>").appendTo(document.body);

      // Multiple source test
      dst = {};
      rv = angular.extend(dst, src1, src2);
      display("angular does multiple in order? " +
                  (dst.c === src2.c));
      dst = {};
      rv = jQuery.extend(dst, src1, src2);
      display("jQuery does multiple in order? " +
                  (dst.c === src2.c));

      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })();
  </script>
</body>
</html>
96
T.J. Crowder

以前の回答では言及されていなかった2つの間にわずかな違いがあります。

jQueryの.extend（）を使用すると、条件に応じて値が定義されている場合にのみキー、値のペアを追加できます。そのため、jQueryでは、$.extend({}, {'a': x ? x : undefined});は、xが未定義の場合に_{}_を返します。

ただし、Angularの.extend（）では、xが未定義であっても、angular.extend({}, {'a': x ? x : undefined});は_{'a': undefined}_を返します。だから、キーは何があってもそこにあります。

これは、必要なものに応じて、良いことも悪いこともあります。とにかく、これは2つのライブラリ間のbehaviorの違いです。

31
asafge

1.0.7 angularjsビルドでは、extend＆copyメソッドは、angularjsの内部$$ hashKey値をコピーしなくなりました。

リリースノートを参照@ https://github.com/angular/angular.js/blob/master/CHANGELOG.md

angular.copy/angular.extend：コピー/拡張機能で$$ hashKeyをコピーしないでください。 （6d0b325f、＃1875）

Chomre dev toolsメソッドでのangular.copyの簡単なテストは、ディープコピーを行うことを示しています。

x = {p: 3, y: {x: 5}}
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z = angular.copy(x);
Object {p: 3, y: Object}
z
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z.y.x = 1000
    1000
x
Object {p: 3, y: Object}
p: 3
y: Object
    x: 5
    __proto__: Object
__proto__: Object
z
Object {p: 3, y: Object}
p: 3
y: Object
   x: 1000
   __proto__: Object
__proto__: Object

一方、angular.extendは浅いコピーを行います。

6
Mike Pugh

AngularJSの.extend（）はjQueryの.extend（）と同様に機能します

http://jsfiddle.net/Troop4Christ/sR3Nj/

var o1 = {
    a: 1,
    b: 2,
    c: {
        d:3,
        e:4
    }
},
    o2 = {
        b: {
            f:{
                g:5
            }
        }
    };


console.log(angular.extend({}, o1, o2));
console.log(o1);
console.log(o2);
1
RavenHursT