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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
TypeScript 中接口详解
Jun 19 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
angular4中引入echarts的方法示例
Jan 29 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
JS获取父节点方法
2009/08/20 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
2019年Java面试必问之经典试题
2012/09/12 面试题
五年级音乐教学反思
2014/02/06 职场文书
纠风工作实施方案
2014/03/15 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
租车协议书范本2014
2014/11/17 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
春节慰问信范文
2015/02/15 职场文书
城南旧事读书笔记
2015/06/29 职场文书
python实现简单反弹球游戏
2021/04/12 Python