有个小伙伴问我一个问题,解决了倒是,不知道为什么会出现

Question

    $(function(){
        var arr1 = [
            {name: 'leo1', securityId: '1'},
            {name: 'leo2', securityId: '2'},
            {name: 'leo3', securityId: '3'},
            {name: 'leo4', securityId: '4'}
        ];
        var id = '1';
        function getId(arr, id) {
            var len = arr.length;
            for(var i = 0; i < len; i++) {
                if (id == arr[i].securityId) {
                    arr.splice(i,1);
                }
            }
            return arr;
        }
        getId(arr1, id);

        console.log(getId(arr1, id));            
    })

我的解决办法是在for循环里面再次循环对象

      function getId(arr, id) {
            var len = arr.length;
            for(var i = 0; i < len; i++) {
                for(var j in arr[i]){
                    if(arr[i][j]==id){
                      arr.splice(i,1)
                    }
                }
            }    
            return arr;
        }
        
        
        

想知道为什么会出现类型报错

Answer 1

for循环里边，len＝4，但是i=0的时候，arr被删除了一个元素，这个时候arr的长度变成3，而for循环最后还是会遍历到arr[3]，但是这个时候arr只有三个元素，arr[3]是第四个元素，不存在任何属性，所以报错了

Answer 2

其实只要把return的地方换一下就可以了：

$(function(){
    var arr1 = [
        {name: 'leo1', securityId: '1'},
        {name: 'leo2', securityId: '2'},
        {name: 'leo3', securityId: '3'},
        {name: 'leo4', securityId: '4'}
    ];
    var id = '1';
    function getId(arr, id) {
        var len = arr.length;
        for(var i = 0; i < len; i++) {
            if (id == arr[i].securityId) {
                arr.splice(i,1);
                // 这里 return 掉
                return arr;
            }
        }
        return arr;
    }
    getId(arr1, id);
    console.log(getId(arr1, id));
})

Answer 3

arr.splice(i,1);

你把数组修改了

Answer 4

这个属于大忌，在遍历中直接修改源数组的长度，报错是因为匹配到if的分支中把当前下标的数组元素给删除了，导致最后一位或者几位数组元素为空，所以就直接报错了。
给你来个实例：

  var arr1 = [
    { name: 'leo1', securityId: '1' },
    { name: 'leo2', securityId: '2' },
    { name: 'leo3', securityId: '3' },
    { name: 'leo4', securityId: '4' }
  ];
  var id = '1';

  let res = getId(arr1, id);
  console.log(res);

  function getId(arr, id) {
    return arr.filter((item) => id !== item.securityId);
  };

Answer 5

splice() 方法在第一次调用的时候，数组arr1 就已经改变了元素个数，再用for循环就有问题了

Answer 6

splice 方法删除了一个元素导致数据长度变化，导致后续a[i]是undefined

Answer 7

现成的 Array.prototype.filter 为何不用

Answer 8

splice换成slice

slice会创建一个新数组 但是对原来的数组没有影响，而splice会影响原来的数组