详解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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
AngularJS自动表单验证
Feb 01 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
vue组件与复用详解
Apr 08 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
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
PHP版自动生成文章摘要
2008/07/23 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
javascript天然的迭代器
2010/10/29 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
javascript时间函数大全
2014/06/30 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python爬虫超时的处理的实例
2018/12/19 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python分类测试代码实例汇总
2020/07/23 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
通讯稿格式及范文
2015/07/22 职场文书
大学学生会竞选稿
2015/11/19 职场文书
四则混合运算教学反思
2016/02/23 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL