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


Posted in Javascript onMay 21, 2019

方法一:最普遍的做法

使用 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);

运行结果如下:

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

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)运行结果同上面一样。

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

方法二:使用 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);

运行结果还是一样:

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

方法三:使用 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计算两个数组的交集、差集、并集、补集(多种实现方式),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
vue路由守卫+登录态管理实例分析
May 21 #Javascript
vue实现跨域的方法分析
May 21 #Javascript
vue动态绑定class的几种常用方式小结
May 21 #Javascript
express启用https使用小记
May 21 #Javascript
使用express获取微信小程序二维码小记
May 21 #Javascript
小程序server请求微信服务器超时的解决方法
May 21 #Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
PHP 和 HTML
2006/10/09 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php异常处理使用示例
2014/02/25 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
浅谈Vue.js
2017/03/02 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
flask入门之表单的实现
2018/07/18 Python
Python字符串的一些操作方法总结
2019/06/10 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python修改文件内容的3种方法详解
2019/11/15 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
《永远的白衣战士》教学反思
2014/04/25 职场文书
软件项目开发计划书
2014/05/01 职场文书
超市创意活动方案
2014/08/15 职场文书
相亲活动方案
2014/08/26 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python