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


Posted in Javascript onSeptember 06, 2017

前言

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

源数组

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

伪删除

什么是伪删除呢? 就是说将数组元素值设置为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"]

总结

以上就是JavaScrip数组删除特定元素个人所总结的一些方法,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果您还要其它的一些好的方法, 或有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
Mootools 1.2教程 函数
Sep 15 Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
js实现微信聊天效果
Aug 09 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
JavaScript学习笔记之函数记忆
Sep 06 #Javascript
node.js实现的装饰者模式示例
Sep 06 #Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 #Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 #Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 #Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 #Javascript
You might like
PHP可变函数的使用详解
2013/06/14 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
可输入的下拉框
2006/06/19 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
概述BootStrap中role="form"及role作用角色
2016/12/08 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Angular实现响应式表单
2017/08/04 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python生成随机MAC地址
2015/03/10 Python
python实现按任意键继续执行程序
2016/12/30 Python
简单实现python进度条脚本
2017/12/18 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
Python序列化pickle模块使用详解
2020/03/05 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
同学会邀请书大全
2014/01/12 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
介绍长城的导游词
2015/01/30 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers