lodash pullAllBy通过迭代函数删除数组中的指定元素

lodash pullAllBy根据迭代函数从数组中删除数组中的指定元素,与differenceBy函数不同pullAllBy方法会改变原数组而differenceBy不会。

pullAllBy方法

var res=_.pullAllBy(arr, removeArr, [迭代函数]);
参数
arr: 需要处理的数组。
removeArr: 需要移除元素的数组。
返回值
res:移除后的新数组,注意arr的值也会被改变

pullAllBy例子

//例子1
var arr = [{ 'x': 11 }, { 'x': 21 }, { 'x': 36,y:22 }, { 'x': 11 }];
var res=_.pullAllBy(arr, [{ 'x': 11 }, { 'x': 36 }], 'x');
// arr和res都等于 [{ 'x': 21 }]
//上面的方法等同于下面
 var res=_.pullAllBy(arr, [{ 'x': 11 }, { 'x': 36 }], function(a){
       return a.x;  
  });
  
//例子2,我们自定义一个迭代方法试试看
var arr = [{ 'x': 11 }, { 'x': 21 }, { 'x': 22,y:22 }, { 'x': 11 }];
var res=_.pullAllBy(arr, [{ 'x': 11 }], function(a){
        var cp=a.x%11;
        console.log(cp);
           return cp;  
      });
//arr和res都等于[{"x":21}]

在线试一试

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>lodash pullAllBy例子</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()">自定义迭代方法例子</div>  
    <div id="result">点击按钮试一试</div>
    <script>
     function ck1() {
      var arr = [{ 'x': 11 }, { 'x': 21 }, { 'x': 36,y:22 }, { 'x': 11 }];
      var res=_.pullAllBy(arr, [{ 'x': 11 }, { 'x': 36 }], 'x');
      $("#result").html(JSON.stringify(res));
     } 
     
     function ck2() {
      var arr = [{ 'x': 11 }, { 'x': 21 }, { 'x': 22,y:22 }, { 'x': 11 }];
      var res=_.pullAllBy(arr, [{ 'x': 11 }], function(a){
      var cp=a.x%11;
        console.log(cp);
         return cp;  
        });
      $("#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>