jQuery extend vs angular extend

Question

jQuery extend vs angular extend

Jaka jest różnica między tymi dwoma funkcjami rozszerzenia?

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

Podczas gdy jquery.extend jest dobrze udokumentowany kąt.extend brakuje szczegółów, a komentarze nie dają odpowiedzi. ( https://docs.angularjs.org/api/ng/function/angular.extend).

Robi kątowe.rozszerzyć również zapewnić głęboką kopię?

60

javascript jquery angularjs extend

Author: j.wittwer, 2013-05-28

Source

4 answers

Istnieje jedna subtelna różnica między tymi dwoma, o której nie wspomniano w poprzednich odpowiedziach.

JQuery ' s .extend () pozwala warunkowo dodać pary kluczy, wartości, tylko jeśli wartość jest zdefiniowana . Tak więc w jQuery, to: $.extend({}, {'a': x ? x : undefined}); zwróci {} w przypadku, gdy x jest niezdefiniowane.

W Angular ' s .extend() jednak to: angular.extend({}, {'a': x ? x : undefined}); zwróci {'a': undefined}, nawet jeśli x jest niezdefiniowane. Więc klucz będzie tam, bez względu na wszystko. To może być dobra lub zła rzecz, w zależności od to, czego potrzebujesz. W każdym razie jest to różnica w zachowaniu {[10] } pomiędzy obiema bibliotekami.

29

Author: asafge,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-14 11:27:11

Wersja 1.0.7 angularjs stwierdza, że metody extend & copy nie kopiują już wewnętrznych wartości angularjs $ $ hashKey.

Zobacz uwagi do wydania @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md

Kątowe.copy / angular.extend: nie kopiuj $ $ hashKey w funkcjach Kopiuj/rozszerz. (6d0b325f,# 1875)

Szybki test kąta.metoda copy in chomre dev tools pokazuje, że robi głęboką kopię.

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

Kątowe./ align = "left" / robi płytką kopię.

6

Author: Mike Pugh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-28 17:16:37

.extend() w AngularJS działa podobnie do 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

Author: RavenHursT,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-08 05:18:47

score 94 · Accepted Answer

angular.extend i jQuery.extend są bardzo podobne. Obie wykonują kopię właściwości shallow z jednego lub więcej obiektów źródłowych do obiektu docelowego. Na przykład:

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 dostarcza głęboką kopię:

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.

Wracając do extend: widzę tylko jedną istotną różnicę, która polega na tym, że jQuery extend pozwala określić tylko jeden obiekt, w którym to przypadku jQuery sam jest celem.

Rzeczy w często:

To płytka Kopia. Jeśli więc src ma właściwość p, która odnosi się do obiektu, dst otrzyma właściwość p, która odnosi się do tego samego obiektu (nie jest kopią obiektu).
Obie zwracają obiekt docelowy.
Obie obsługują wiele obiektów źródłowych.
Obie wykonują wiele obiektów źródłowych w kolejności , a więc ostatni obiekt źródłowy "wygra" w przypadku więcej niż jeden obiekt źródłowy ma tę samą nazwę właściwości.

Strona testowa: Live Copy | Live Source

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