JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集(多種實(shí)現(xiàn)方式)
方法一:最普遍的做法
使用 ES5 語法來實(shí)現(xiàn)雖然會(huì)麻煩些,但兼容性最好,不用考慮瀏覽器 JavaScript 版本。也不用引入其他第三方庫。
1,直接使用 filter、concat 來計(jì)算
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 }) //補(bǔ)集 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的補(bǔ)集:", e); console.log("a與b的并集:", f);
2,對(duì) Array 進(jìn)行擴(kuò)展
(1)為方便使用,我們可以對(duì)數(shù)組功能進(jìn)行擴(kuò)展,增加一些常用的方法。
//數(shù)組功能擴(kuò)展 //數(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; } //不重復(fù)元素構(gòu)成的數(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; }; //兩個(gè)數(shù)組的交集 Array.intersect = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? o : null}); }; //兩個(gè)數(shù)組的差集 Array.minus = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? null : o}); }; //兩個(gè)數(shù)組的補(bǔ)集 Array.complement = function(a, b){ return Array.minus(Array.union(a, b),Array.intersect(a, b)); }; //兩個(gè)數(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的補(bǔ)集:", Array.complement(a, b)); console.log("a與b的并集:", Array.union(a, b));
方法二:使用 ES6 語法實(shí)現(xiàn)
1,實(shí)現(xiàn)原理
而在 ES6 中我們可以借助擴(kuò)展運(yùn)算符(...)以及 Set 的特性實(shí)現(xiàn)相關(guān)計(jì)算,代碼也會(huì)更加簡(jiǎ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)); // 補(bǔ)集 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的補(bǔ)集:", complement); console.log("a與b的并集:", unionSet);
方法三:使用 jQuery 實(shí)現(xiàn)
如果項(xiàng)目中有引入 jQuery,那么實(shí)現(xiàn)起來也很簡(jiǎ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(); // 補(bǔ)集 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的補(bǔ)集:", complement); console.log("a與b的并集:", unionSet);
1,直接使用 filter、concat 來計(jì)算
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 }) //補(bǔ)集 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的補(bǔ)集:", e); console.log("a與b的并集:", f);
運(yùn)行結(jié)果如下:
2,對(duì) Array 進(jìn)行擴(kuò)展
(1)為方便使用,我們可以對(duì)數(shù)組功能進(jìn)行擴(kuò)展,增加一些常用的方法。
//數(shù)組功能擴(kuò)展 //數(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; } //不重復(fù)元素構(gòu)成的數(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; }; //兩個(gè)數(shù)組的交集 Array.intersect = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? o : null}); }; //兩個(gè)數(shù)組的差集 Array.minus = function(a, b){ return a.uniquelize().each(function(o){return b.contains(o) ? null : o}); }; //兩個(gè)數(shù)組的補(bǔ)集 Array.complement = function(a, b){ return Array.minus(Array.union(a, b),Array.intersect(a, b)); }; //兩個(gè)數(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的補(bǔ)集:", Array.complement(a, b)); console.log("a與b的并集:", Array.union(a, b));
(3)運(yùn)行結(jié)果同上面一樣。
方法二:使用 ES6 語法實(shí)現(xiàn)
1,實(shí)現(xiàn)原理
而在 ES6 中我們可以借助擴(kuò)展運(yùn)算符(...)以及 Set 的特性實(shí)現(xiàn)相關(guān)計(jì)算,代碼也會(huì)更加簡(jiǎ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)); // 補(bǔ)集 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的補(bǔ)集:", complement); console.log("a與b的并集:", unionSet);
運(yùn)行結(jié)果還是一樣:
方法三:使用 jQuery 實(shí)現(xiàn)
如果項(xiàng)目中有引入 jQuery,那么實(shí)現(xiàn)起來也很簡(jiǎ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(); // 補(bǔ)集 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的補(bǔ)集:", complement); console.log("a與b的并集:", unionSet);
運(yùn)行結(jié)果還是一樣:
總結(jié)
以上所述是小編給大家介紹的JS計(jì)算兩個(gè)數(shù)組的交集、差集、并集、補(bǔ)集(多種實(shí)現(xiàn)方式),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)硪黄獪\談Javascript中的函數(shù)、this以及原型。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10js跳轉(zhuǎn)到指定url的方法與實(shí)際使用
這篇文章主要給大家介紹了關(guān)于js跳轉(zhuǎn)到指定url的方法與實(shí)際使用的相關(guān)資料,要實(shí)現(xiàn)JavaScript跳轉(zhuǎn)到指定URL,可以使用window.location對(duì)象來實(shí)現(xiàn),需要的朋友可以參考下2023-09-09uni-app使用swiper實(shí)現(xiàn)輪播圖的方法
做音樂播放器小程序時(shí),因?yàn)閟wiper的問題耽誤不少時(shí)間,所以下面這篇文章主要給大家介紹了關(guān)于uni-app使用swiper實(shí)現(xiàn)輪播圖的相關(guān)資料,需要的朋友可以參考下2022-11-11js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例
下面小編就為大家分享一篇js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫avaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)iframe高度自適應(yīng)的實(shí)現(xiàn)技巧,并給出了項(xiàng)目示例供大家參考,需要的朋友可以參考下2017-01-01javascript實(shí)現(xiàn)鎖定網(wǎng)頁、密碼解鎖效果(類似系統(tǒng)屏幕保護(hù)效果)
這篇文章主要介紹了javascript實(shí)現(xiàn)鎖定網(wǎng)頁、密碼解鎖效果,跟Windows系統(tǒng)的屏幕保護(hù)效果類似,需要的朋友可以參考下2014-08-08