详解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 相关文章推荐
jQuery JSON的解析方式分享
Apr 05 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
如何使用Strace调试工具
2013/06/03 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
js style动态设置table高度
2014/10/21 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
vue实现弹幕功能
2019/10/25 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
sklearn的predict_proba使用说明
2020/06/28 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
求职信写作要突出重点
2014/01/01 职场文书
党日活动总结
2014/05/07 职场文书
聘用意向书
2014/07/29 职场文书
婚礼答谢礼品
2015/01/20 职场文书
亮剑精神观后感
2015/06/05 职场文书
元宵节晚会主持词
2015/07/01 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
一文搞懂MySQL索引页结构
2022/02/28 MySQL