[javascript]Javascript中如何从数组中删除指定的元素？

问题描述

比如当前有一个数字类型的数组。我们知道在 javascript中，数组的操作包括 .push()函数，那么 javascript有没有一个函数，可以删除数组中的某个指定的元素呢？

方案一

在javascript中，没有直接的函数来删除指定的元素，非常我们创建自己的函数。
首先获取要删除元素的索引：

        
登录后复制
        

            
        
     
var array = [2, 5, 9];
var index = array.indexOf(5);

然后使用splice函数来删除元素:

        
登录后复制
        

            
        
     
if (index > -1) {
    array.splice(index, 1);
}

注意：不是所有浏览器都支持 indexOf函数的，如果需要支持所有的 indexOf函数，可以尝试使用 polyfill 组件。

        
登录后复制
        

            
        
     
Array.prototype.indexOf || (Array.prototype.indexOf = function(d, e) {
    var a;
    if (null == this) throw new TypeError('"this" is null or not defined');
    var c = Object(this),
        b = c.length >>> 0;
    if (0 === b) return -1;
    a = +e || 0;
    Infinity === Math.abs(a) && (a = 0);
    if (a >= b) return -1;
    for (a = Math.max(0 <= a ? a : b - Math.abs(a), 0); a < b;) {
        if (a in c && c[a] === d) return a;
        a++
    }
    return -1
});

方案二

使用 array.filter(...)函数：
传统的javascript方法：

        
登录后复制
        

            
        
     
var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) { 
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

ES2015方法：

        
登录后复制
        

            
        
     
let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

删除多个元素:

        
登录后复制
        

            
        
     
let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

方案三

        
登录后复制
        

            
        
     
function remove(arr, item) {
      for(var i = arr.length; i--;) {
          if(arr[i] === item) {
              arr.splice(i, 1);
          }
      }
  }

方案四

        
登录后复制
        

            
        
     
Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}
//Call like
[1, 2, 3, 4].remByVal(3);

        
登录后复制
        

            
        
     
Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}

var rooms = ['hello', 'something']

rooms = rooms.remByVal('hello')

console.log(rooms)

方案五

        
登录后复制
        

            
        
     
function move(arr, val) {
  var j = 0;
  for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i] !== val) {
      arr[j++] = arr[i];
    }
  }
  arr.length = j;
}

方案六

        
登录后复制
        

            
        
     
var helper = {

    // Remove and return the first occurrence     

    removeOne: function(array, predicate) {
        for (var i = 0; i < array.length; i++) {
            if (predicate(array[i])) {
                return array.splice(i, 1);
            }
        }
    },

    // Remove and return all occurrences  

    remove: function(array, predicate) {
        var removed = [];

        for (var i = 0; i < array.length;) {

            if (predicate(array[i])) {
                removed.push(array.splice(i, 1));
                continue;
            }

            i++;                
        }

        return removed;
    }
};

调用方法：

        
登录后复制
        

            
        
     
var removed = helper.removeOne(arr, row => row.id === 5 );

var removed = helper.remove(arr, row => row.name.startsWith('BMW'));