lodash intersectionWith通过比较器取数组交集

lodash intersectionWith通过比较器取数组交集,和intersection及intersectionWith不同,可以理解成intersection的升级版intersectionBy的简化版。

intersectionWith方法

var res=_.intersectionWith(arr1,arr2,..., [comparator]);
参数
arr: 需要处理的数组,可以传n个数组取交集。
comparator: 比较器
返回值
res: 返回第一个数组与其他数组有交集的元素,如果没有交集返回 []

intersectionWith例子

//******例子1 两个数组******
var arr1 = [{ 'x': 2, 'y': 3 }, { 'x': 6, 'y': 7 }];
var arr2= [{ 'x': 8, 'y': 9 }, { 'x': 2, 'y': 3 }];
 
var res=_.intersectionWith(arr1, arr2, _.isEqual);
//res等于{ 'x': 2, 'y': 3 }


//******例子2 三个数组******
var arr1 = [{ 'x': 2, 'y': 3 }, { 'x': 6, 'y': 7 }];
var arr2= [{ 'x': 8, 'y': 9 }, { 'x': 2, 'y': 3 }];
var arr3= [{ 'x': 18, 'y': 19 }, { 'x': 2, 'y': 3 }];

var res=_.intersectionWith(arr1, arr2,arr3, _.isEqual);
//res等于{ 'x': 2, 'y': 3 }

//******例子3 多个匹配结果只会从第一个数组中选出******
var arr1 = [{ 'x': 2, 'y': 3 }, { 'x': 6, 'y': 7 }];
var arr2= [{'y': 5 }, { 'y':7 }]; 
var res=_.intersectionWith(arr1, arr2,(a,b) => a.y == b.y);
//res等于[{"x":6,"y":7}]

在线试一试

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>lodash intersectionWith例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/lodash/lodash.min.js"></script>
    <script src="https://www.itxst.com/package/jquery-3.5.1/jquery.min.js"></script>
</head>
<body style="padding:10px;">
    <div class="btn" onclick="ck1()">例子1</div> 
    <div class="btn" onclick="ck2()">例子2</div> 
    <div id="result">点击按钮试一试</div>
    <script>
     function ck1() {
      var arr1 = [{ 'x': 2, 'y': 3 }, { 'x': 6, 'y': 7 }];
      var arr2= [{ 'x': 2, 'y': 9 }, { 'x': 2, 'y': 3 }, { 'x': 6, 'y': 7 }]; 
      var res=_.intersectionWith(arr1, arr2, _.isEqual);
      $("#result").html(JSON.stringify(res));
     }
     function ck2() {
      var arr1 = [{ 'x': 2, 'y': 3 }, { 'x': 6, 'y': 7 }];
      var arr2= [{ 'x': 8, 'y': 9 }, { 'x': 2, 'y': 3 }];
      var arr3= [{ 'x': 18, 'y': 19 }, { 'x': 2, 'y': 3 }];


      var res=_.intersectionWith(arr1, arr2,arr3,_.isEqual);
       $("#result").html(JSON.stringify(res));
     } 
    </script>
    <style>
        .btn {
            border: solid 1px #ddd;
            background-color: #eee;
            border-radius: 5px;
            padding: 5px 12px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            margin-right: 8px;
        }

       .btn:active {
                border: solid 1px #cac9c9;
                background-color: #cac9c9;
        }
    </style>
</body>
</html>