详解js删除数组中的指定元素


Posted in Javascript onOctober 31, 2018

本篇文章将会给大家介绍两种删除数组中的指定元素的方式,分别为:

1、单独定义一个的函数,通过函数来删除指定数组元素。

2、为Array对象定义了一个removeByValue的方法,在调用方法来删除指定数组元素,调用非常简单的。

下面我们通过简单的代码示例来简单介绍这两种删除数组指定元素的方式。

1、定义单独的函数removeByValue来进行元素删除

代码示例:删除数组somearray里的"tue"元素

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 
 <body>
  <div class="demo">
   <p>数组:mon, tue, wed, thur</p>
   <p class="p"></p>
 
  </div>
 
 </body>
 
 <script type="text/javascript">
  function removeByValue(arr, val) {
   for(var i = 0; i < arr.length; i++) {
    if(arr[i] == val) {
     arr.splice(i, 1);
     break;
    }
   }
  }
  var somearray = ["mon", "tue", "wed", "thur"]
  removeByValue(somearray, "tue");
  //somearray will now have "mon", "wed", "thur"
 
  document.write("<p>新数组:" + somearray + "</p>");
 </script>
 
</html>

效果图:

详解js删除数组中的指定元素

2、定义并调用数组的removeByValue方法来删除指定元素

代码示例:删除数组somearray里的"wed"元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div class="demo">
      <p>数组:mon, tue, wed, thur</p>
      <p>删除指定元素"tue"后:</p>
    </div>
  </body>
  <script type="text/javascript">
    Array.prototype.removeByValue = function(val) {
      for(var i = 0; i < this.length; i++) {
        if(this[i] == val) {
          this.splice(i, 1);
          break;
        }
      }
    }
    var somearray = ["mon", "tue", "wed", "thur"]
    somearray.removeByValue("wed");
    //somearray will now have "mon", "wed", "thur"
 
    document.write("<p>新数组:" + somearray + "</p>");
  </script>
 
</html>

效果图:

详解js删除数组中的指定元素

总结:以上就是本篇文章所介绍的js删除数组指定元素的两种方式,大家可以自己动手试试,加深理解,希望能对大家的学习有所帮助。

Javascript 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
深入理解node.js之path模块
May 03 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 #Javascript
Vue项目History模式404问题解决方法
Oct 31 #Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 #Javascript
vue组件中的样式属性scoped实例详解
Oct 30 #Javascript
node上的redis调用优化示例详解
Oct 30 #Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 #Javascript
Vue.js 父子组件通信的十种方式
Oct 30 #Javascript
You might like
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python PyTorch预训练示例
2018/02/11 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
django 微信网页授权登陆的实现
2019/07/30 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python如何实现远程方法调用
2020/08/07 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
中式餐厅创业计划书范文
2014/01/23 职场文书
会议欢迎词
2015/01/23 职场文书
项目战略合作意向书
2015/05/08 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python