{"id":983,"date":"2009-04-10T14:32:34","date_gmt":"2009-04-10T12:32:34","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=983"},"modified":"2009-04-10T14:32:34","modified_gmt":"2009-04-10T12:32:34","slug":"comparaisons-dobjets-en-javascript","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/comparaisons-dobjets-en-javascript\/","title":{"rendered":"Comparaisons d’objets en javascript"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Une des questions que j’aime \u00e0 poser aux\u00a0 jeunes d\u00e9veloppeurs qui viennent passer une interview d’embauche chez nous est quelle est la diff\u00e9rence entre l’op\u00e9rateur (==<\/code>) et l’op\u00e9rateur (===<\/code>) <\/em>?. En javascript<\/em> comme en PHP<\/em>, la r\u00e9ponse et la m\u00eame le premier pratique une conversion silencieuse des valeurs que l’on compare tandis que l’autre ne le fait pas.
\nDans un monde id\u00e9al on devrait donc toujours utiliser l’op\u00e9rateur ===<\/code> pour comparer 2 valeurs<\/strong>. Mais seulement voila essayer de comparer 2 objets en javascript<\/em> en utilisant cet op\u00e9rateur et vous aurez une petite surprise<\/a>. C’est simple, \u00e0 moins que les 2 objets fassent r\u00e9f\u00e9rence au m\u00eame objet l’op\u00e9rateur retournera syst\u00e9matiquement false<\/code>. En d’autre terme, si comme moi vous d\u00e9sirez savoir si 2 objets distinctes sont similaires<\/strong> l’op\u00e9rateur ===<\/code> ne fonctionne pas, tout comme l’op\u00e9rateur ==<\/code> d’ailleurs.
\nVu qu’aucune solution out of the box<\/em> existe en javascript<\/code>, je me suis r\u00e9solu \u00e0 cr\u00e9er une fonction qui me permettrait de r\u00e9pondre \u00e0 ma question le plus facilement possible.<\/p>\n

Pour que 2 objets soient similaires il faut que les m\u00e9thodes et les propri\u00e9t\u00e9s qu’ils contiennent soient identiques. <\/strong>Donc suivant tout b\u00eatement mon raisonnement je suis arrivait \u00e0 la fonction suivante:<\/p>\n

function isObjectsEquals(a, b) {\nvar isOK = true;\nfor (var prop in a) {\nif (a[prop] !== b[prop]) {\nisOK = false;\nbreak;\n}\n}\nreturn isOK;\n};<\/pre>\n
Ce code fonctionne mais il est trop incomplet. Disons-le clairement, je suis \u00e0 la recherche d’un code assez robuste pour pouvoir l’inclure dans ma librairie de fonctions que j’utilise dans mes projets javascript<\/em>, je recherche donc une fonction bullet proof<\/strong>. D’o\u00f9, les optimisations que je lui est apport\u00e9es.
\nMa premi\u00e8re optimisation a \u00e9t\u00e9 de v\u00e9rifier uniquement <\/em>les m\u00e9thodes r\u00e9ellement sp\u00e9cifique \u00e0 l’objet et non les m\u00e9thodes h\u00e9rit\u00e9es du fait que l’on utilise un objet. Je suis pass\u00e9 \u00e0 la fonction interm\u00e9diaire suivante :<\/p>\n
function isObjectsEquals(a, b) {\nvar isOK = true;\nfor (var prop in a) {\nif (a.hasOwnProperty(prop)) {\nif (a[prop] !== b[prop]) {\nisOK = false;\nbreak;\n}\n}\n}\nreturn isOK;\n};<\/pre>\n
On devrait toujours utiliser<\/a> hasOwnProperty<\/code> lorsque l’on boucle en javascript sur un objet, pour ceux qui ne le savent pas \ud83d\ude09 .<\/em><\/p>\n
L’optimisation suivante est en rapport avec la comparaison effectu\u00e9e \u00e0 l’int\u00e9rieur m\u00eame de ma fonction. Les plus perspicaces d’entre vous auront not\u00e9 que j’utilise encore <\/em>un op\u00e9rateur de comparaison. Et donc je n’ai fait que d\u00e9plac\u00e9 le probl\u00e8me initial. Que se passerait-il si l’une des m\u00e9thode de mon objet \u00e9tait un objet en soit ? Tout ce travail n’aurez donc servi \u00e0 rien. Pour rem\u00e9dier \u00e0 cela il faudrait d\u00e9terminer le type des m\u00e9thodes de l’objet et au cas \u00e9ch\u00e9ant proc\u00e9der \u00e0 un appel r\u00e9cursif \u00e0 ma fonction.
\nSans aller dans les d\u00e9tails, il se trouve que l’utilisation des fonctions typeof<\/code> et instanceof<\/code> est d\u00e9conseill\u00e9e<\/a>, il faut plut\u00f4t se fier \u00e0 Object.prototype.toString<\/code>, une propri\u00e9t\u00e9 interne de tout objet en javascript<\/code>, pour d\u00e9terminer \u00e0 coup s\u00fbr le type d’une variable. De fait ma fonction finale ressemble \u00e0 ceci :<\/p>\n
function isObjectsEquals(a, b) {\nvar prop, otype, isOK = true;\nfor (prop in a) {\nif (a.hasOwnProperty(prop)) {\notype = Object.prototype.toString.call(a[prop]).match(\/^[objects(.*)]$\/)[1];\nisOK\u00a0 = (!\/^(String|Number|Window)$\/.test(otype)) ? arguments.callee(a[prop], b[prop]) : (a[prop] === b[prop]);\nif (isOK !== true) {\nbreak;\n}\n}\n}\nreturn isOK;\n};<\/pre>\n
Et voila. Et comme cette fonction est toute jeune, si il y a parmi vous des volontaires pour la tester et pourquoi pas trouver des bugs pour l’am\u00e9liorer, je serais le premier ravi car pour l’instant elle fonctionne dans tous mes tests \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
Comme il est impossible de comparer des objet de mani\u00e8re natif dans javascript voici, isObjectsEquals. Cette fonction va vous permettre de comparer des objets en javascript m\u00eame lorsque ceux-ci ne font pas r\u00e9f\u00e9rence au m\u00eame objet<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[42,116,244,284,292,397,405,531,542],"class_list":["post-983","post","type-post","status-publish","format-standard","hentry","category-web","tag-argumentscallee","tag-comparaison","tag-hasownproperty","tag-instanceof","tag-javascript","tag-objet","tag-operator","tag-tostring","tag-typeof"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/983\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}