JS計算兩個數(shù)組的交集、差集、并集、補集(多種實現(xiàn)方式)
方法一:最普遍的做法
使用 ES5 語法來實現(xiàn)雖然會麻煩些,但兼容性最好,不用考慮瀏覽器 JavaScript 版本。也不用引入其他第三方庫。
1,直接使用 filter、concat 來計算
var a = [1,2,3,4,5] var b = [2,4,6,8,10] //交集 var c = a.filter(function(v){ return b.indexOf(v) > -1 }) //差集 var d = a.filter(function(v){ return b.indexOf(v) == -1 }) //補集 var e = a.filter(function(v){ return !(b.indexOf(v) > -1) }) .concat(b.filter(function(v){ return !(a.indexOf(v) > -1)})) //并集 var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)})); console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); console.log("a與b的交集:", c); console.log("a與b的差集:", d); console.log("a與b的補集:", e); console.log("a與b的并集:", f);
2,對 Array 進行擴展
(1)為方便使用,我們可以對數(shù)組功能進行擴展,增加一些常用的方法。
//數(shù)組功能擴展 //數(shù)組迭代函數(shù) Array.prototype.each = function(fn){ fn = fn || Function.K; var a = []; var args = Array.prototype.slice.call(arguments, 1); for(var i = 0; i < this.length; i++){ var res = fn.apply(this,[this[i],i].concat(args)); if(res != null) a.push(res); } return a; }; //數(shù)組是否包含指定元素 Array.prototype.contains = function(suArr){ for(var i = 0; i < this.length; i ++){ if(this[i] == suArr){ return true; } } return false; } //不重復元素構成的數(shù)組 Array.prototype.uniquelize = function(){ var ra = new Array(); for(var i = 0; i < this.length; i ++){ if(!ra.contains(this[i])){ ra.push(this[i]); } } return ra; }; //兩個數(shù)組的交集 Array.intersect = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? o : null}); }; //兩個數(shù)組的差集 Array.minus = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? null : o}); }; //兩個數(shù)組的補集 Array.complement = function(a, b){ return Array.minus(Array.union(a, b),Array.intersect(a, b)); }; //兩個數(shù)組并集 Array.union = function(a, b){ return a.concat(b).uniquelize(); };
(2)使用樣例
var a = [1,2,3,4,5] var b = [2,4,6,8,10] console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); console.log("a與b的交集:", Array.intersect(a, b)); console.log("a與b的差集:", Array.minus(a, b)); console.log("a與b的補集:", Array.complement(a, b)); console.log("a與b的并集:", Array.union(a, b));
方法二:使用 ES6 語法實現(xiàn)
1,實現(xiàn)原理
而在 ES6 中我們可以借助擴展運算符(...)以及 Set 的特性實現(xiàn)相關計算,代碼也會更加簡單些。
2,樣例代碼
var a = [1,2,3,4,5] var b = [2,4,6,8,10] console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); var sa = new Set(a); var sb = new Set(b); // 交集 let intersect = a.filter(x => sb.has(x)); // 差集 let minus = a.filter(x => !sb.has(x)); // 補集 let complement = [...a.filter(x => !sb.has(x)), ...b.filter(x => !sa.has(x))]; // 并集 let unionSet = Array.from(new Set([...a, ...b])); console.log("a與b的交集:", intersect); console.log("a與b的差集:", minus); console.log("a與b的補集:", complement); console.log("a與b的并集:", unionSet);
方法三:使用 jQuery 實現(xiàn)
如果項目中有引入 jQuery,那么實現(xiàn)起來也很簡單。
var a = [1,2,3,4,5] var b = [2,4,6,8,10] console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); // 交集 let intersect = $(a).filter(b).toArray(); // 差集 let minus = $(a).not(b).toArray(); // 補集 let complement = $(a).not(b).toArray().concat($(b).not(a).toArray()); // 并集 let unionSet = $.unique(a.concat(b)); console.log("a與b的交集:", intersect); console.log("a與b的差集:", minus); console.log("a與b的補集:", complement); console.log("a與b的并集:", unionSet);
1,直接使用 filter、concat 來計算
var a = [1,2,3,4,5] var b = [2,4,6,8,10] //交集 var c = a.filter(function(v){ return b.indexOf(v) > -1 }) //差集 var d = a.filter(function(v){ return b.indexOf(v) == -1 }) //補集 var e = a.filter(function(v){ return !(b.indexOf(v) > -1) }) .concat(b.filter(function(v){ return !(a.indexOf(v) > -1)})) //并集 var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)})); console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); console.log("a與b的交集:", c); console.log("a與b的差集:", d); console.log("a與b的補集:", e); console.log("a與b的并集:", f);
運行結果如下:
2,對 Array 進行擴展
(1)為方便使用,我們可以對數(shù)組功能進行擴展,增加一些常用的方法。
//數(shù)組功能擴展 //數(shù)組迭代函數(shù) Array.prototype.each = function(fn){ fn = fn || Function.K; var a = []; var args = Array.prototype.slice.call(arguments, 1); for(var i = 0; i < this.length; i++){ var res = fn.apply(this,[this[i],i].concat(args)); if(res != null) a.push(res); } return a; }; //數(shù)組是否包含指定元素 Array.prototype.contains = function(suArr){ for(var i = 0; i < this.length; i ++){ if(this[i] == suArr){ return true; } } return false; } //不重復元素構成的數(shù)組 Array.prototype.uniquelize = function(){ var ra = new Array(); for(var i = 0; i < this.length; i ++){ if(!ra.contains(this[i])){ ra.push(this[i]); } } return ra; }; //兩個數(shù)組的交集 Array.intersect = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? o : null}); }; //兩個數(shù)組的差集 Array.minus = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? null : o}); }; //兩個數(shù)組的補集 Array.complement = function(a, b){ return Array.minus(Array.union(a, b),Array.intersect(a, b)); }; //兩個數(shù)組并集 Array.union = function(a, b){ return a.concat(b).uniquelize(); };
(2)使用樣例
var a = [1,2,3,4,5] var b = [2,4,6,8,10] console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); console.log("a與b的交集:", Array.intersect(a, b)); console.log("a與b的差集:", Array.minus(a, b)); console.log("a與b的補集:", Array.complement(a, b)); console.log("a與b的并集:", Array.union(a, b));
(3)運行結果同上面一樣。
方法二:使用 ES6 語法實現(xiàn)
1,實現(xiàn)原理
而在 ES6 中我們可以借助擴展運算符(...)以及 Set 的特性實現(xiàn)相關計算,代碼也會更加簡單些。
2,樣例代碼
var a = [1,2,3,4,5] var b = [2,4,6,8,10] console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); var sa = new Set(a); var sb = new Set(b); // 交集 let intersect = a.filter(x => sb.has(x)); // 差集 let minus = a.filter(x => !sb.has(x)); // 補集 let complement = [...a.filter(x => !sb.has(x)), ...b.filter(x => !sa.has(x))]; // 并集 let unionSet = Array.from(new Set([...a, ...b])); console.log("a與b的交集:", intersect); console.log("a與b的差集:", minus); console.log("a與b的補集:", complement); console.log("a與b的并集:", unionSet);
運行結果還是一樣:
方法三:使用 jQuery 實現(xiàn)
如果項目中有引入 jQuery,那么實現(xiàn)起來也很簡單。
var a = [1,2,3,4,5] var b = [2,4,6,8,10] console.log("數(shù)組a:", a); console.log("數(shù)組b:", b); // 交集 let intersect = $(a).filter(b).toArray(); // 差集 let minus = $(a).not(b).toArray(); // 補集 let complement = $(a).not(b).toArray().concat($(b).not(a).toArray()); // 并集 let unionSet = $.unique(a.concat(b)); console.log("a與b的交集:", intersect); console.log("a與b的差集:", minus); console.log("a與b的補集:", complement); console.log("a與b的并集:", unionSet);
運行結果還是一樣:
總結
以上所述是小編給大家介紹的JS計算兩個數(shù)組的交集、差集、并集、補集(多種實現(xiàn)方式),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關文章
淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)硪黄獪\談Javascript中的函數(shù)、this以及原型。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10JavaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例
下面小編就為大家?guī)硪黄狫avaScript鼠標事件,點擊鼠標右鍵,彈出div的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08javascript實現(xiàn)鎖定網(wǎng)頁、密碼解鎖效果(類似系統(tǒng)屏幕保護效果)
這篇文章主要介紹了javascript實現(xiàn)鎖定網(wǎng)頁、密碼解鎖效果,跟Windows系統(tǒng)的屏幕保護效果類似,需要的朋友可以參考下2014-08-08