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从头学起第二讲
Jul 04 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 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程序员的技术瓶颈分析
2011/07/17 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python缩进和冒号详解
2016/06/01 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
团队精神的演讲稿
2014/05/14 职场文书
高一军训的心得体会
2014/09/01 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
回复函范文
2015/07/14 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书