javascript删除数组元素的七个方法示例

前言

在JavaScript中,除了Object之外,Array类型(数组)恐怕就是最常用的类型了。与其他语言的数组相比,JavaScript中的Array非常灵活。这种灵活性有利有弊,好处是其富有创造性,可以提供各种灵活的解决方案;坏处是容易脑子不够用,因为事实上,它太灵活了,灵活到无法控制的抓狂。

前面调侃了几句,回归正题,这里要总结7个在JavaScript中删除Array元素的方法,分别是利用length属性、delete关键字、pop()栈方法、shift()队列方法、splice()操作方法、forEach()或filter()迭代方法和prototype原型方法。

length属性

JavaScript中Array的length属性非常有特点一一它不是只读的。因此,可以通过设置这个属性来达到从数组的末尾移除项或添加新项的目的。

var colors = ["red", "blue", "grey"]; // 创建一个包含3个字符串的数组
colors.length = 2;

console.log(colors[2]); // undefined

delete关键字

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

var colors = ["red", "blue", "grey", "green"];
delete colors[0];

console.log(arr); // [undefined, "blue", "grey", "green"]

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

pop()栈方法

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

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

var colors = ["red", "blue", "grey"];
var color = colors.pop();

console.log(color); // "grey"
console.log(colors.length); // 2

可以看出,在调用pop()方法时,数组返回最后一项,即”grey”,数组的元素也仅剩两项。

shift()队列方法

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

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

var colors = ["red", "blue", "grey"];
var color = colors.shift();

console.log(color); // "red"
console.log(colors.length); // 2

可以看出,在调用shift()方法时,数组返回第一项,即”red”,数组的元素也仅剩两项。

splice()操作方法

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

var colors = ["red", "blue", "grey"];
var color = colors.splice(0, 1);

console.log(color); // "red"
console.log(colors); // ["blue", "grey"]

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

迭代方法

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

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

var colors = ["red", "blue", "grey"];

colors.forEach(function(item, index, arr) {
  if(item === "red") {
    arr.splice(index, 1);
  }
});

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

第二种我们用循环中的filter方法。

var colors = ["red", "blue", "grey"];

colors = colors.filter(function(item) {
  return item != "red"
});

console.log(colors); // ["blue", "grey"]

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

prototype原型方法

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

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

  for(var i = 0, n = 0; i < this.length; i++) {
    if(this[i] != this[dx]) {
      this[n++] = this[i];
    }
  }
  this.length -= 1;
};

var colors = ["red", "blue", "grey"];
colors.remove(1);
console.log(colors); // ["red", "grey"]

这种方法其实就是自己实现一个删除的逻辑,然后把删除方法添加给了Array的原型对象,则在此环境中的所有Array对象都可以使用该方法。尽管可以这么做,但是不推荐在产品化的程序中修改原生对象的原型。道理很简单,如果只是某个实现中缺少某个方法,就在原生对象的原型中添加这个方法,那么当在另一个支持该方法的实现中运行代码时,就可能导致命名冲突。而且这样做可能会意外地导致原生方法被重写。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Javascript根据指定下标或对象删除数组元素

    将一下代码放在全局js文件中: Js代码 复制代码 代码如下: /** *删除数组指定下标或指定对象 */ Array.prototype.remove=function(obj){ for(var i =0;i <this.length;i++){ var temp = this[i]; if(!isNaN(obj)){ temp=i; } if(temp == obj){ for(var j = i;j <this.length;j++){ this[j]=this[j+1]; } thi

  • JavaScript从数组中删除指定值元素的方法

    本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个removeByValue的方法,调用非常简单 定义函数removeByValue进行元素删除 function removeByValue(arr, val) { for(var i=0; i<arr.length; i++) { if(arr[i] == val) { arr.splice(i,

  • js删除数组元素、清空数组的简单方法(必看)

    一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置. 三,js 删除数组几种方法 var arr=['a','b','c

  • 体验js中splice()的强大(插入、删除或替换数组的元素)

    处理数组的方法很多,javascript splice()算是最强大的了,它可以用于插入.删除或替换数组的元素.下面来一一介绍! 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(其实位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 看下

  • js在数组中删除重复的元素自保留一个(两种实现思路)

    例如:var student = ['qiang','ming','tao','li','liang','you','qiang','tao']; 第一种思路是:遍历要删除的数组arr, 把元素分别放入另一个数组tmp中,在判断该元素在arr中不存在才允许放入tmp中 用到两个函数:for ...in 和 indexOf() <script type="text/javascript"> var student = ['qiang','ming','tao','li','l

  • 基于JavaScript实现移除(删除)数组中指定元素

    在Array对象中有给定的函数可以删除数组中指定的元素,虽然非常好用,但是总感觉看不到摸不着的比较别扭,下面就分享一个自定义的删除数组指定索引值元素的函数,希望给大家一个全新的思路. 代码实例如下: var array=[]; array[0]="我们一"; array[1]="我们二"; array[2]="我们三"; array[3]="我们四"; array[4]="我们五"; function re

  • JavaScript数组Array对象增加和删除元素方法总结

    本文实例总结了JavaScript数组Array对象增加和删除元素方法.分享给大家供大家参考.具体分析如下: pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 undefined. shift 方法 移除数组中的第一个元素并返回该元素. arrayObj.shift( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 shift 方法可移除数组中的第一

  • 解析javascript 数组以及json元素的添加删除

    javasscript删除数组的3种方法1,用shift()方法shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5] 2,用pop()方法pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert

  • JS删除数组里的某个元素方法

    删除数组指定的某个元素 首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; 然后使用通过得到这个元素的索引,使用js数组自己固有的函数去删除这个元素: 代码为: Array.prototype.remove

  • js删除Array数组中指定元素的两种方法

    本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=

随机推荐