JavaScript_ JS数组求并集，交集和差集 (ES7/ES6/ES5)

JavaScript_ JS数组求并集，交集和差集 (ES7/ES6/ES5)

参考文章：https://excaliburhan.com/post/js-set-operation.html

需求场景

最近，自己项目中有一些数组操作，涉及到一些数学集的运算，趁着完成后总结一下。

简化问题之后，现有两数组a = [1, 2, 3]，b = [2, 4, 5]，求a，b数组的并集，交集和差集。

先介绍下交集并集,差集的基本概念

集合的分类: 
并集：以属于A或属于B的元素为元素的集合成为A与B的并（集） 记作A∪B（或B∪A），读作“A并B”（或“B并A”），即A∪B={x|x∈A,或x∈B}
交集：以属于A且属于B的元素为元素的集合成为A与B的交（集） 记作A∩B（或B∩A），读作“A交B”（或“B交A”），即A∩B={x|x∈A,且x∈B}
差集：以属于A而不属于B的元素为元素的集合成为A与B的差（集）记作A-B（或B∩A），读作“A减B”，即A-B={x∣x∈A,且x∉B}

 

方法选择

JS在ES6，ES7之后，新增了一些数组方法，如果能够使用，那是极好的，毕竟自己写封装函数还是比较辛苦的。

ES7

ES7新增了一个Array.prototype.includes的数组方法，用于返回一个数组是否包含指定元素，结合filter方法。

var boolean = array.includes(searchElement[, fromIndex])

js

1. // 并集

2. let union = a.concat(b.filter(v => !a.includes(v))) // [1,2,3,4,5]

3. // 交集

4. let intersection = a.filter(v => b.includes(v)) // [2]

5. // 差集

6. let difference = a.concat(b).filter(v => a.includes(v) && !b.includes(v)) // [1,3]

 

ES6

ES6中新增的一个Array.from方法，用于将类数组对象和可遍历对象转化为数组。只要类数组有length长度，基本都可以转化为数组。结合Set结构实现数学集求解。

Array.from(arrayLike[, mapFn[, thisArg]])

js

1. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>

2. <script>

3. let a = [1, 2, 3]

4. console.log(a)

5.  

6. let b = [2, 4, 5]

7.  

8. let aSet = new Set(a)

9. let bSet = new Set(b)

10.  

11. // 并集

12. let union = Array.from(new Set(a.concat(b))) // [1,2,3,4,5]

13. console.log(union)

14.  

15. // 交集

16. let intersection = Array.from(new Set(a.filter(v => bSet.has(v)))// [2]

17. )

18.  

19. // 差集

20. let differenceNew = Array.from(new Set(a.concat(b).filter(v => aSet.has(v) && !bSet.has(v))) [1,3]

21. )

22. console.log(differenceNew)

23. </script>

 

 

ES5

ES5可以利用filter和indexOf进行数学集操作，但是，由于indexOf方法中NaN永远返回-1，所以需要进行兼容处理。

• 不考虑NaN(数组中不含NaN)

1. var a = [1,2,3];

2. var b = [2,4,5];

3.  

4. // 并集

5. var union = a.concat(b.filter(function(v) {

6. return a.indexOf(v) === -1})) // [1,2,3,4,5]

7.  

8. // 交集

9. var intersection = a.filter(function(v){ return b.indexOf(v) > -1 }) // [2]

10.  

11. // 差集

12. var difference = a.filter(function(v){ return b.indexOf(v) === -1 })// [1,3]

13.  

14. console.log(union)

15. console.log(intersection)

16. console.log(difference)

 

js

• 考虑NaN

1. var a = [1, 2, 3, NaN];

2. var b = [2, 4, 5];

3.  

4. var aHasNaN = a.some(function (v) {

5. return isNaN(v)

6. })

7. var bHasNaN = b.some(function (v) {

8. return isNaN(v)

9. })

10.  

11. // 并集

12. var union = a.concat(b.filter(function (v) {

13. return a.indexOf(v) === -1 && !isNaN(v)

14. })).concat(!aHasNaN & bHasNaN ? [NaN] : []) // [1,2,3,4,5,NaN]

15.  

16. // 交集

17. var intersection = a.filter(function (v) {

18. return b.indexOf(v) > -1

19. }).concat(aHasNaN & bHasNaN ? [NaN] : []) // [2]

20.  

21. // 差集

22. var difference = a.filter(function (v) {

23. return b.indexOf(v) === -1 && !isNaN(v)

24. }).concat(aHasNaN && !bHasNaN ? [NaN] : [])//1,3,NaN

25.  

26. console.log(union)

27. console.log(intersection)

28. console.log(difference)

 

 

js

结语

由于JS语言的特殊性，NaN在数组的数学集操作中有不少问题，好在ES6和ES7中，新的数组方法解决了部分情况。单从简洁性来看，ES7的方法最简洁明了。

就是不知道新的标准要猴年马月才能被各大浏览器兼容，目前还是使用Babel比较靠谱。

本文链接：https://excaliburhan.com/post/js-set-operation.html

-- EOF --