JavaScrip数组删除特定元素的几种方法总结

从js数组中删除指定元素是我们每个人都遇到的问题,网上这方面的资料也很多,但有的时间过于久远,有的内容不够全面,所以自己来整理下,这篇文章主要给大家总结介绍了关于javascrip数组删除特定元素的多种方法,需要的朋友可以参考下。

前言

可能一说到删除数组特定元素你估计不止一种方法可以实现,那么下面且来看看我总结的这几种方法,可能会对你有所帮助!话不多说了,来一起看看详细的介绍吧。

源数组

var arr = ["George", "John", "Thomas", "James", "Adrew", "Martin"];

登录后复制

伪删除

立即学习“Java免费学习笔记(深入)”;

什么是伪删除呢? 就是说将数组元素值设置为null;

arr[ arr.indexOf( 'Thomas' ) ] = null;

登录后复制

删除后的数组是这个样子的:

["George", "John", null, "James", "Adrew", "Martin"]

登录后复制

不过要注意, 这意味着数组Array也就是变量arr的长度保持不变

完全删除

是什么是完全删除呢? 这个问题你可能从字面上也能想得到就是真正的删除数组Array的元素值, 并且会改变数组的长度, 可以通过内置数组对象Array的splice方法来实现这个需求!说到splice这个方法就要说一说它的具体参数了:

Array.prototype.splice = function(start,deleteCount,items) {};

登录后复制

上面是内置对象Array的splice方法原型定义, 中文意思呢是:剪接, 其参数的意义是:

start: 起点索引值

deleteCount: 要删除的元素个数

items: 删除后替换/追加的元素
 参数不加时就表示删除元素, 并且还要结合 deleteCount 的参数值
 如果 deleteCount 为 1, items 参数位置给一个参数值, 则表示替换
 如果 deleteCount 为 1, items 参数位置给多于一个的参数值, 则表示替换及追加元素

通过splice方法删除上面 伪删除 留下的元素值 null

arr.splice( arr.indexOf( null ), 1 );

登录后复制

删除后的数组是这个样子的:

["George", "John", "James", "Adrew", "Martin"]

登录后复制登录后复制

既然说到了splice方法就顺便再说一下它的其它功能, 如 替换元素, 追加元素 等操作吧!

splice函数 – 替换元素

现在数组结构是这样的:

["George", "John", "James", "Adrew", "Martin"]

登录后复制登录后复制

想要将数组元素 James 替换为 Tom

arr.splice( arr.indexOf( 'James' ), 1, 'Tom' );

登录后复制

替换后的数组结构是这个样子的:

["George", "John", "Tom", "Adrew", "Martin"]

登录后复制登录后复制

splice函数 – 替换并追加元素

现在当前数组结构是这样的:

["George", "John", "Tom", "Adrew", "Martin"]

登录后复制登录后复制

想要将数组元素 Tom 替换为 Judy 并追加 Linda 和 Alisa

arr.splice( arr.indexOf( 'Tom' ), 1, 'Judy', 'Linda', 'Alisa' );

登录后复制

替换及追加后的数组结构是这个样子的:

["George", "John", "Judy", "Linda", "Alisa", "Adrew", "Martin"]

登录后复制登录后复制

splice函数 – 追加元素

追加元素你可以选择任意位置这取决于你的具体需求, 关键是在于 start 的取值索引位置而已!当前数组结构如下所示:

["George", "John", "Judy", "Linda", "Alisa", "Adrew", "Martin"]

登录后复制登录后复制

比如说要在 Linda 和 Alisa 之间追加 Bill 和 Blake

arr.splice( arr.indexOf( 'Linda' ) + 1, 0, 'Bill', 'Blake' );

登录后复制

追加后的数组结构是下面这个样子的:

["George", "John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew", "Martin"]

登录后复制

起点位置 arr.indexOf( ‘Linda’ ) + 1 就是在数组元素 Linda 之后了

删除元素个数参数这里设置的是 0 这个是追加元素的关键, 也就是说不删除元素

‘Bill’, ‘Blake’ 这个呢就是内置对象Array的splice方法的最后一个参数 items 它表示0个是和多个, 根据 deleteCount 参数值不同表示的含义也会不同, 这里 deleteCount 参数是 0 并且 items 又有两个值来表示这个参数, 所示说就是追加元素值 ‘Bill’, ‘Blake’

以上说的是删除数组中特定的元素, 那删除第一个元素和最后一个元素那实现在是太简单了, 这里简单提一下就是了

删除数组中第一个元素

arr.shift();

登录后复制

删除后的数组是这个样子的:

["John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew", "Martin"]

登录后复制

删除数组中最后一个元素

arr.pop();

登录后复制

删除后的数组是这个样子的:

["John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew"]

登录后复制

以上就是本篇文章的所有内容,希望对大家学习JavaScript提供到帮助!!

相关推荐:

JavaScript模块模式详解

javaScript封装的各种写法

JavaScript观察者模式实例详解

以上就是JavaScrip数组删除特定元素的几种方法总结的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2789024.html

(0)
上一篇 2025年3月8日 18:37:16
下一篇 2025年3月6日 07:00:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 两种vue获取DOM元素并设置属性的方法

    本文主要为大家带来一篇vue获取dom元素并设置属性的两种实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再docum…

    编程技术 2025年3月8日
    200
  • layer子层给父层页面元素赋值实例讲解

    本文主要为大家带来一篇layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 父层: jsp中: //页面上添加一个隐藏的输入框待用…

    编程技术 2025年3月8日
    200
  • JS删除数组里的某个元素实例代码

    本文主要为大家分享一篇js删除数组里的某个元素方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 删除数组指定的某个元素 首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,…

    编程技术 2025年3月8日
    200
  • javaScript动态添加Li元素

    本文主要为大家分享一篇javascript动态添加li元素的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 html代码块 **javaScript动态添加Li元素** ul li{list-sty…

    编程技术 2025年3月8日
    200
  • angularjs数组判断某个元素实例代码

    本文主要和大家分享angularjs数组判断是否含有某个元素的实例,也就是in_array函数,判断数组中是否含有某个元素。 Array.prototype.in_array = function(e) { for(i=0;i<thi…

    编程技术 2025年3月8日
    200
  • 怎样使用伪元素first-letter让文字首字母大写

    这次给大家带来怎样使用伪元素first-letter让文字首字母大写,使用伪元素first-letter让文字首字母大写的注意事项有哪些,下面就是实战案例,一起来看一下。 nbsp;HTML PUBLIC “-//W3C//DTD HTML…

    编程技术 2025年3月8日
    200
  • js如何删除数组里的某个元素

    js如何删除数组里的某个元素,本文主要和大家分享js删除数组里的某个元素的方法实例。 首先可以给js的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = functi…

    编程技术 2025年3月8日
    200
  • js操作元素属性操作元素样式详解

    本文主要和大家分享js操作元素属性操作元素样式详解,希望能帮助到大家。 js操作元素属性 nbsp;html>                Title     *{margin:0;padding:0;} body,ul,li,ol…

    编程技术 2025年3月8日
    200
  • vue.js如何获取当前元素的文字信息

    本文主要和大家分享一篇vue.js获得当前元素的文字信息方法,具有很好的参考价值,希望能帮助到大家。 1、获得当前点击的内容 登录后复制      1. 关于公众号使用问题       当我点击这个li标签的时候,我想要获得span里面的文…

    编程技术 2025年3月8日
    200
  • vue如何获取当前点击的元素并传值

    本文主要为大家分享一篇vue获取当前点击的元素并传值的实例,具有很好的参考价值,希望能帮助到大家。 html: 登录后复制 js: zan(e){  var target=event.target;  var dataid=e;//(pl.…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论