JS删除数组里的某个元素方法


Posted in Javascript onFebruary 03, 2018

删除数组指定的某个元素

js删除数组中某一项或几项的几种方法 https://3water.com/article/154737.htm

首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为:

Array.prototype.indexOf = function(val) { 
for (var i = 0; i < this.length; i++) { 
if (this[i] == val) return i; 
} 
return -1; 
};

然后使用通过得到这个元素的索引,使用js数组自己固有的函数去删除这个元素:

代码为:

Array.prototype.remove = function(val) { 
var index = this.indexOf(val); 
if (index > -1) { 
this.splice(index, 1); 
} 
};

这样就构造了这样一个函数,比如我有有一个数组:

var emp = ['abs','dsf','sdf','fd']

假如我们要删除其中的 'fd' ,就可以使用:

emp.remove('fd');

删除的数组的某一项

splice(index,len,[item]) 注释:该方法会改变原始数组。

splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值

index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空

如:arr = ['a','b','c','d']

删除

//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变) 
var arr = ['a','b','c','d']; 
arr.splice(1,1); 
console.log(arr); 
//['a','c','d']; 
 
 
//删除起始下标为1,长度为2的一个值(len设置2) 
var arr2 = ['a','b','c','d'] 
arr2.splice(1,2); 
console.log(arr2); 
//['a','d']

替换

//替换起始下标为1,长度为1的一个值为‘ttt',len设置的1 
var arr = ['a','b','c','d']; 
arr.splice(1,1,'ttt'); 
console.log(arr); 
//['a','ttt','c','d'] 
 
 
var arr2 = ['a','b','c','d']; 
arr2.splice(1,2,'ttt'); 
console.log(arr2); 
//['a','ttt','d'] 替换起始下标为1,长度为2的两个值为‘ttt',len设置的1

添加 ---- len设置为0,item为添加的值

var arr = ['a','b','c','d']; 
arr.splice(1,0,'ttt'); 
console.log(arr); 
//['a','ttt','b','c','d'] 表示在下标为1处添加一项'ttt'

delete方法删除掉数组中的元素后,会把该下标出的值置为undefined,数组的长度不会变

var arr = ['a','b','c','d']; 
delete arr[1]; 
arr; 
//["a", undefined × 1, "c", "d"] 中间出现两个逗号,数组长度不变,有一项为undefined

以上这篇JS删除数组里的某个元素方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
node内置调试方法总结
Feb 22 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
JS实现百度搜索接口及链接功能实例代码
Feb 02 #Javascript
原生JS实现的双色球功能示例
Feb 02 #Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
微信小程序实现列表下拉刷新上拉加载
Jul 29 #Javascript
微信小程序数字滚动插件使用详解
Feb 02 #Javascript
JS中的BOM应用
Feb 02 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
简单理解Python中的装饰器
2015/07/31 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python实现超市扫码仪计费
2018/05/30 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
以下的初始化有什么区别
2013/12/16 面试题
Javascript如何发送一个Ajax请求
2015/01/26 面试题
简历中自我评价分享
2013/10/09 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
2014国培学习感言
2014/03/05 职场文书
《忆江南》教学反思
2014/04/07 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL