javascript删除数组元素的几个方法

javascript删除数组元素的几个方法javascript 删除数组元素的 7 个方法文章目录一 length 属性二 delete 关键字三 pop 栈方法四 shift 队列方法五 splice 操作方法六 迭代方法七 prototype 原型方法我在写代码中 碰到了要在 forEach 中找到符合条件的数据进行删除 但是由于每次匹配到符合条件的数据后使用 splice 它不能完全实现我想要的效果 因为使用 splice 会改变数组长度 也会导致数组指针指向错误 所有导致有些符合要求的数据没有删除掉 所有我查找了一些删除数组元素的方法 发现 filt

javascript删除数组元素的7个方法

我在写代码中,碰到了要在forEach中找到符合条件的数据进行删除,但是由于每次匹配到符合条件的数据后使用splice,它不能完全实现我想要的效果,因为使用splice会改变数组长度,也会导致数组指针指向错误,所有导致有些符合要求的数据没有删除掉。所有我查找了一些删除数组元素的方法,发现filter完全可以解决我的需求,在此和大家分享一下这些方法,希望对大家有用。

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(colors); // [undefined, "blue", "grey", "green"] 

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

三、pop()栈方法

var colors = ["red", "blue", "grey"]; var color = colors.pop(); console.log(color); // "grey" console.log(colors.length); // 2 

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

四、shift()队列方法

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对象都可以使用该方法。尽管可以这么做,但是不推荐在产品化的程序中修改原生对象的原型。道理很简单,如果只是某个实现中缺少某个方法,就在原生对象的原型中添加这个方法,那么当在另一个支持该方法的实现中运行代码时,就可能导致命名冲突。而且这样做可能会意外地导致原生方法被重写。

转载:https://www.cnblogs.com/yanggb/p/11464821.html


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/204820.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午7:27
下一篇 2026年3月19日 下午7:27


相关推荐

  • 培根密码解密脚本

    培根密码解密脚本官方吐槽 疫情复发难受 什么时候是个头 usr bin envpython3 coding utf 8 Author later futureimport input 请输入密文 count 0msg flag 培根加密百度百科解密原理是大小写都行的例如 A a aaaaa 这种 dicts aaaaa a aaaab b aaaba c aaabb d aabaa e

    2026年3月16日
    1
  • undef的用法

    undef的用法程序示例 修改已经宏定义的符号常量的值 include nbsp lt stdio h gt int nbsp main nbsp void nbsp define nbsp MAX nbsp 200 nbsp nbsp nbsp nbsp printf MAX nbsp d n MAX undef nbsp MAX define nbsp MAX nbsp 300 nbsp nbsp nbsp nbsp printf MAX nbsp d n MAX nbsp nbsp nbsp nbsp return nbsp 0 undef undef 是在后

    2026年3月18日
    2
  • Vue(12)组件的组织结构和组件注册「建议收藏」

    Vue(12)组件的组织结构和组件注册「建议收藏」组件的组织通常一个应用会以一棵嵌套的组件树的形式来组织:例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。为了能在模板中使用,这些组件必须先注册以便

    2022年7月31日
    7
  • 需求分析说明书SRS

    需求分析说明书SRS软件需求分析说明书 1 引言 1 1 编写目的本文档的目的是详细地介绍停车场管理系统所包含的需求 以便客户能够确认产品的确切需求以及开发人员能够根据需求设计编码 以下叙述将结合文字描述 流程图来描述停车场管理系统的功能 性能 运行环境 1 2 系统概述使用停车场管理系统 在停车场的出入口设置一套出入口管理设备 使停车场形成一个相对封闭的场所 用户进出停车场只需将注册个人信息并扫描二维码 系统即能瞬时完成检验 记录 核算 收费等工作 挡车道闸自动启闭 方便快捷地进行着停车场的管理 对出口管理员来讲

    2026年3月17日
    2
  • int转换为char数组 java_int转换char的正确姿势

    int转换为char数组 java_int转换char的正确姿势一 背景在一个项目中 我需要修改一个全部由数字 0 9 组成的字符串的特定位置的特定数字 我采用的方式是先将字符串转换成字符数组 然后利用数组的位置来修改对应位置的值 代码开发完成之后 发现有乱码出现 经过排查发现 我将数字 0 9 转换成字符的姿势不对 现记下一笔 以加深印象 二 错误的使用方式如下代码所示 直接将 int 类型的数字直接转换成了 char 类型的数据 就会出现如 图 1 所示的

    2026年3月26日
    2
  • proteus仿真之DS1302+LCD1602显示试验[通俗易懂]

    proteus仿真:DS1302LCD1602显示试验

    2022年4月6日
    50

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号