群里闲聊,聊到了这个问题,有大佬回答,特此记录学习;
先说一下问题:
![](https://images2018.cnblogs.com/blog/1091124/201804/1091124-20180424175245699-926150212.png)
两种方式:一种是使用ES6的写法,逼格高大上:
let a=[1,2,3,4], b=[1,2,3,5,4,6],
c = [...a, ...b],
d = new Set(c),
e = Array.from(d),
f = [...e.filter(_=>!a.includes(_)),...e.filter(_=>!b.includes(_))];
console.log(f);//[5, 6]
我知道ES6已经流行开了,但对我来说还是某些查了资料才看明白,菜啊!
首先,其中的 "..." ,三个点也就是省略号是是ES对数组新添加的方法,学名叫做扩展运算符,他的主要作用有复制数组、合并数组、与解构赋值结合、字符串转数组、实现了 Iterator 接口的对象、Map 和 Set 结构,Generator 函数(点击查看阮一峰老师的讲解),
这里用到的就是数组的合并,将其合并为一个数组。
然后,d的作用,转化为一个set,set是ES6提供的一种数据结构,这里主要用到是它不包含重复元素的特点,这样转化成了一个没有重复元素的数据结构(不敢说成集合和数组),数组去重so easy!
再然后,e变量作用简单明了,把d的这种类数组数据结构转化为数组,数组中包含的仍是两个数组的并集
再然后,f变量里面东西就多点了,首先是includes方法。看名称应该知道是包含的意思,这个就是a包含这个元素则返回true,否则返回false,数组的filter方法在接受到includes函数的结果取反之后,就筛选除了e中不包含a的元素,再加上e中不包含b的元素,重新组成一个数组,这个数组就是最后的结果;
我尝试用韦恩图(就是交集、并集、取反那一堆)的方式解释出来,但是数学太渣了,没办法,你们谁数学好的可以私我发过来。。。
第二种方法:(接地气,兼容性好,支持IE8)
function diff(arr1,arr2){
var a = [];
var b = [];
for(var i=0;i<arr2.length;i++){
a[arr2[i]]=true;
}
for(var i=0;i<arr1.length;i++){
if(!a[arr1[i]]){
b.push(arr1[i]);
}
}
console.log(b)
}
let aa = ["a","b"],bb=["a"];
diff(aa,bb);//"b"
这个方法一看就明白,简单易懂,并且也是较为稳定的方法,这个不会的就自行谷歌吧。。
<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">