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 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 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
一个比较简单的PHP 分页分组类
2009/12/10 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python restful框架接口开发实现
2020/04/13 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
一些Solaris面试题
2015/12/22 面试题
平民服装店创业计划书
2014/01/17 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
主持人大赛开场白
2015/05/29 职场文书
SQL Server中使用表变量和临时表
2022/05/20 SQL Server