【基础回顾】-删除数组中元素的几种方法

361 阅读4分钟

概要

7个在JavaScript中删除Array元素的方法:

  1. length属性
  2. delete关键字
  3. pop()栈方法
  4. shift()队列方法
  5. splice()操作方法
  6. prototype原型方法 7.1 forEach() 7.2 filter()迭代方法

方法一:length属性(特点:它不是只读的)

因为,它不是只读的。因此,可以通过设置这个属性来达到从数组的末尾移除项或添加新项的目的

删除
var arr = [1,2,3]; 
arr.length = 1;
console.log(arr); // [1]

添加
var arr = [1,2,3]; 
arr.length = 5;
console.log(arr); //  [1, 2, 3, empty × 2]

方法二:delete关键字

JavaScript提供了一个delete关键字用来删除(清除)数组元素

var arr = [1,2,3]; 
delete arr[1]; // true
console.log(arr); // (3) [1, empty, 3]
console.log(arr[1]);// undefined

要注意的是,使用delete删除元素之后数组长度不变,只是被删除元素被置为undefined了!

方法三:pop()栈方法

JavaScript中的Array对象提供了一个pop()栈方法用于弹出并返回数组中的最后一项,某种程度上可以当做删除用。

栈数据结构的访问规则是FILO(First In Last Out,先进后出),栈操作在栈顶添加项,从栈顶移除项,使用pop()方法,它能移除数组中的最后一项并返回该项,并且数组的长度减1。

var arr = [1,2,3]; 
var res = arr.pop();
console.log(arr, arr.length, res) // [1, 2]      2       3(此方法返回被删除的最后一项)

方法四:shift()队列方法

JavaScript中的Array对象提供了一个shift()队列方法用于弹出并返回数组中的第一项,某种程度上也可以当做删除用。

队列数据结构的访问规则是FIFO(First In First Out,先进先出),队列在列表的末端添加项,从列表的前端移除项,使用shift()方法,它能够移除数组中的第一个项并返回该项,并且数组的长度减1。

var arr = [1,2,3]; 
var res = arr.shift();
console.log(arr, arr.length, res) // [2, 3]      2       1(此方法返回被删除的第一项)

方法五:splice()操作方法

参数:(要删除元素的第一项位置的索引,删除的元素个数,增加的元素)

在JavaScript的Array对象中提供了一个splice()方法用于对数组进行特定的操作。splice()恐怕要算最强大的数组方法了,他的用法有很多种,先介绍删除数组元素的方法。在删除数组元素的时候,它可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除的项数。

他的添加元素的功能,是第三个参数是要增加的参数

var arr = [1,2,3]; 
var res = arr.splie(0,1);
console.log(arr, res) // [2, 3]  [1](此方法返回被删除的元素)

在调用了splice(0, 1)方法时,数组从第一项开始,删除了一项

方法六:prototype原型方法

可以通过在Array的原型上添加方法来达到删除的目的。

不建议修改对象的原型来添加方法。

Array.prototype.remove = function(index) {
  if(isNaN(index) || index > this.length){
    return false;
  }

  for(var i = 0, n = 0; i < this.length; i++) {
    if(this[i] != this[index]) {
      this[n++] = this[i];
    }
  }
  this.length -= 1;
};
var arr = [1,2,3]; 
var res = arr.remove(1);
console.log(arr, res) //   [1, 3]  undefined

方法七:迭代方法(常用的)

所谓的迭代方法就是用循环迭代数组元素,发现符合要删除的项则删除。用的最多的地方,可能是当数组中的元素为对象的时候,可以根据对象的某个属性(例如ID)来删除数组元素。

7.1 用最常见的ForEach循环来对比元素找到之后将其删除。

可以看到这里还要配合splice()方法去实现删除,循环只是为了找到特定的元素。另外一种思路是循环将不需要删除的元素推入到新的数组中,也能达到假性删除特定元素的目的。

var arr = [1,2,3];
var res = arr.forEach((item,index,arr)=>{
    if(item === 2){
        arr.splice(index,1)
    }
});

console.log(arr, res) // [1, 3]   undefined

7.2 用循环中的filter方法(不该表原始数据,一般用返回值)

代码很简单,找出元素不是2的项数返回给res(其实是得到了一个新的数组,并不是在原数组上进行删除操作),一定程度上也算是达到了删除特定元素的目的。

var arr = [1,2,3];
var res = arr.filter((item)=>{
    return item != 2
});

console.log(arr, res) // [1,2,3]   [1, 3]