JS计算两个数组的交集、差集、并集、补集(多种实现方式)

 更新时间:2019年05月21日 11:55:26   作者:Y.S.  
本文通过多种实现方式给大家介绍了JS计算两个数组的交集、差集、并集、补集 的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

方法一:最普遍的做法

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 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("数组a:", a);
console.log("数组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)为方便使用,我们可以对数组功能进行扩展,增加一些常用的方法。

//数组功能扩展
//数组迭代函数
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;
};
//数组是否包含指定元素
Array.prototype.contains = function(suArr){
 for(var i = 0; i < this.length; i ++){
 if(this[i] == suArr){
 return true;
 }
 }
 return false;
}
//不重复元素构成的数组
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;
};
//两个数组的交集
Array.intersect = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? o : null});
};
//两个数组的差集
Array.minus = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? null : o});
};
//两个数组的补集
Array.complement = function(a, b){
 return Array.minus(Array.union(a, b),Array.intersect(a, b));
};
//两个数组并集
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("数组a:", a);
console.log("数组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 语法实现

1,实现原理

而在 ES6 中我们可以借助扩展运算符(...)以及 Set 的特性实现相关计算,代码也会更加简单些。

2,样例代码

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a:", a);
console.log("数组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 实现

如果项目中有引入 jQuery,那么实现起来也很简单。

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a:", a);
console.log("数组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("数组a:", a);
console.log("数组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)为方便使用,我们可以对数组功能进行扩展,增加一些常用的方法。

//数组功能扩展
//数组迭代函数
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;
};
//数组是否包含指定元素
Array.prototype.contains = function(suArr){
 for(var i = 0; i < this.length; i ++){
 if(this[i] == suArr){
 return true;
 }
 }
 return false;
}
//不重复元素构成的数组
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;
};
//两个数组的交集
Array.intersect = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? o : null});
};
//两个数组的差集
Array.minus = function(a, b){
 return a.uniquelize().each(function(o){return b.contains(o) ? null : o});
};
//两个数组的补集
Array.complement = function(a, b){
 return Array.minus(Array.union(a, b),Array.intersect(a, b));
};
//两个数组并集
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("数组a:", a);
console.log("数组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 语法实现

1,实现原理

而在 ES6 中我们可以借助扩展运算符(...)以及 Set 的特性实现相关计算,代码也会更加简单些。

2,样例代码

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a:", a);
console.log("数组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 实现

如果项目中有引入 jQuery,那么实现起来也很简单。

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
console.log("数组a:", a);
console.log("数组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计算两个数组的交集、差集、并集、补集(多种实现方式),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 基于js实现投票的实例代码

    基于js实现投票的实例代码

    这篇文章主要介绍了基于js实现投票的实例代码,三种投票表现效果,个人比较喜欢柱状投票图,具有立体感,感兴趣的朋友可以参考下
    2015-08-08
  • 使用js画图之正弦曲线

    使用js画图之正弦曲线

    这篇文章主要介绍了使用js绘制几何图形的方法的系列文章,本文主要讲诉正弦曲线的绘制方法,需要的朋友可以参考下
    2015-01-01
  • js 上下左右键控制焦点(示例代码)

    js 上下左右键控制焦点(示例代码)

    这篇文章主要是对js上下左右键控制焦点的示例代码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript中String.prototype用法实例

    JavaScript中String.prototype用法实例

    这篇文章主要介绍了JavaScript中String.prototype用法,实例分析了prototype的功能及使用技巧,需要的朋友可以参考下
    2015-05-05
  • js实现简单点赞操作

    js实现简单点赞操作

    这篇文章主要为大家详细介绍了js实现简单点赞操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript Dom 绑定事件操作实例详解

    JavaScript Dom 绑定事件操作实例详解

    这篇文章主要介绍了JavaScript Dom 绑定事件操作,结合实例形式详细分析了JavaScript实现dom绑定事件的相关实现方法与操作注意事项,需要的朋友可以参考下
    2019-10-10
  • React操作真实DOM实现动态吸底部的示例

    React操作真实DOM实现动态吸底部的示例

    本篇文章主要介绍了React操作真实DOM实现动态吸底部的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS 文件传参及处理技巧分析

    JS 文件传参及处理技巧分析

    其实为js文件传参是很久就接触过的一个问题,只是一直没有放在心上,今天在无忧看到又有人问这个问题,今日总结一下。
    2010-05-05
  • 前端面试知识点锦集(JavaScript篇)

    前端面试知识点锦集(JavaScript篇)

    这篇文章主要为大家分享了前端面试知识点锦集JavaScript篇,细致的给出了每个js面试知识点的答案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS模拟并美化的表单控件完整实例

    JS模拟并美化的表单控件完整实例

    这篇文章主要介绍了JS模拟并美化的表单控件实现方法,涉及javascript结合css样式美化表单的功能,非常美观实用,需要的朋友可以参考下
    2015-08-08

最新评论