摘要:深度比較兩個對象寫在前面近日遇到的一個需求需要比較兩個對象,對象的屬性類型相同,屬性的值相同,就認為是兩個對象是相同的,唯恐自己寫的方法不夠精煉,因此找到了解決辦法,特此記下。
深度比較兩個javaScript對象 1、寫在前面
近日遇到的一個需求需要比較兩個對象,對象的屬性類型相同,屬性的值相同,就認為是兩個對象是相同的,唯恐自己寫的方法不夠精煉,因此google找到了解決辦法,特此記下。 方法出處:http://stackoverflow.com/questions/1068834/object-comparison-in-javascript2、方法一:Object.toJSON()或 JSON.stringify()
此方法簡單,適用于當兩個對象的屬性順序相同的時候。
var user1 = {name : "nerd", org: "dev"}; var user2 = {name : "nerd", org: "dev"}; var eq = user1 == user2; alert(eq); // gives false // var eq1 = Object.toJSON(user1) == Object.toJSON(user2); var eq1 = JSON.stringify(user1) === JSON.stringify(user2) alert(eq1); // gives true3、方法二、深度比較兩個對象(推薦)
深度比較兩個對象,當對象的屬性類型相同且屬性的值相同(對象的順序可以不一樣),兩個對象就相等。
function deepCompare(x, y) { var i, l, leftChain, rightChain; function compare2Objects(x, y) { var p; // remember that NaN === NaN returns false // and isNaN(undefined) returns true if (isNaN(x) && isNaN(y) && typeof x === "number" && typeof y === "number") { return true; } // Compare primitives and functions. // Check if both arguments link to the same object. // Especially useful on the step where we compare prototypes if (x === y) { return true; } // Works in case when functions are created in constructor. // Comparing dates is a common scenario. Another built-ins? // We can even handle functions passed across iframes if ((typeof x === "function" && typeof y === "function") || (x instanceof Date && y instanceof Date) || (x instanceof RegExp && y instanceof RegExp) || (x instanceof String && y instanceof String) || (x instanceof Number && y instanceof Number)) { return x.toString() === y.toString(); } // At last checking prototypes as good as we can if (!(x instanceof Object && y instanceof Object)) { return false; } if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) { return false; } if (x.constructor !== y.constructor) { return false; } if (x.prototype !== y.prototype) { return false; } // Check for infinitive linking loops if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) { return false; } // Quick checking of one object being a subset of another. // todo: cache the structure of arguments[0] for performance for (p in y) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } } for (p in x) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } switch (typeof(x[p])) { case "object": case "function": leftChain.push(x); rightChain.push(y); if (!compare2Objects(x[p], y[p])) { return false; } leftChain.pop(); rightChain.pop(); break; default: if (x[p] !== y[p]) { return false; } break; } } return true; } if (arguments.length < 1) { return true; //Die silently? Don"t know how to handle such case, please help... // throw "Need two or more arguments to compare"; } for (i = 1, l = arguments.length; i < l; i++) { leftChain = []; //Todo: this can be cached rightChain = []; if (!compare2Objects(arguments[0], arguments[i])) { return false; } } return true; }
可以把方法compare2Objects修改成自己想要的條件,比如說不限制屬性的類型,只要屬性的值相等就認為兩個object相等。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/81322.html
摘要:虛擬原理流程簡單概括有三點用模擬樹,并渲染這個樹比較新老樹,得到比較的差異對象把差異對象應用到渲染的樹。下面是流程圖下面我們用代碼一步步去實現一個流程圖用模擬樹并渲染到頁面上其實虛擬,就是用對象結構的一種映射,下面我們一步步實現這個過程。 背景 大家都知道,在網頁中瀏覽器資源開銷最大便是DOM節點了,DOM很慢并且非常龐大,網頁性能問題大多數都是有JavaScript修改DOM所引起的...
摘要:本文所實現的完整代碼存放在。這就是所謂的算法。兩個樹的完全的算法是一個時間復雜度為的問題。如果有差異的話就記錄到一個對象里面。如和的不同,會被所替代。這牽涉到兩個列表的對比算法,需要另外起一個小節來討論。 作者:戴嘉華 轉載請注明出處并保留原文鏈接( https://github.com/livoras/blog/issues/13 )和作者信息。 目錄: 1 前言 2 對前端應用狀...
摘要:另外,由于篇幅有限,本篇的重點在于二叉樹的常見算法以及實現。常見的二叉樹實現代碼之前寫過相關的文章,是關于如何創建及遍歷二叉樹的,這里不再贅述。同時我們注意到,在二叉樹深度比較大的時候,我們光是比較左右是不夠的。 本篇為復習過程中遇到過的總結,同時也給準備面試的同學一份參考。另外,由于篇幅有限,本篇的重點在于二叉樹的常見算法以及實現。 常見的二叉樹實現代碼 之前寫過相關的文章,是關于如...
摘要:對象詳解對象深度剖析,深度理解對象這算是醞釀很久的一篇文章了。用空構造函數設置類名每個對象都共享相同屬性每個對象共享一個方法版本,省內存。 js對象詳解(JavaScript對象深度剖析,深度理解js對象) 這算是醞釀很久的一篇文章了。 JavaScript作為一個基于對象(沒有類的概念)的語言,從入門到精通到放棄一直會被對象這個問題圍繞。 平時發的文章基本都是開發中遇到的問題和對...
摘要:忍者級別的函數操作對于什么是匿名函數,這里就不做過多介紹了。我們需要知道的是,對于而言,匿名函數是一個很重要且具有邏輯性的特性。通常,匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸 遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加 這一次,徹底弄懂 JavaScript 執行機制 本文的目的就是要保證你徹底弄懂javascript的執行機制,如果...
閱讀 1514·2021-10-11 10:59
閱讀 1888·2021-09-09 11:36
閱讀 1408·2019-08-30 15:55
閱讀 1333·2019-08-29 11:20
閱讀 3068·2019-08-26 13:39
閱讀 1473·2019-08-26 13:37
閱讀 1966·2019-08-26 12:11
閱讀 1330·2019-08-23 14:28