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 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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&java(三)
2006/10/09 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
解析strtr函数的效率问题
2013/06/26 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
jQuery事件用法详解
2016/10/06 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python气泡提示与标签的实现
2020/04/01 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
企业标语口号
2014/06/10 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
出售房屋协议书范本
2014/10/06 职场文书
自查自纠工作总结
2014/10/15 职场文书
大学生毕业个人总结
2015/02/15 职场文书
公司岗位说明书
2015/10/08 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python