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 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
JS实现的几个常用算法
Nov 12 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
解决Layui数据表格显示无数据提示的问题
Nov 14 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
js获取页面description的方法
2015/05/21 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Vue函数式组件的应用实例详解
2019/08/30 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
详解Numpy中的广播原则/机制
2018/09/20 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python高级特性简介
2020/08/13 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
税务会计岗位职责
2014/02/18 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
教师节表彰会主持词
2015/07/06 职场文书
自荐信大全
2019/03/21 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS