详解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学习指南
Dec 01 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
JavaScript执行机制详细介绍
Dec 06 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
php自动加载的两种实现方法
2010/06/21 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
javascript String 对象
2008/04/25 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python实现将内容分行输出
2015/11/05 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
入党自我鉴定范文
2013/10/04 职场文书
给同事的道歉信
2014/01/11 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
工作评语大全
2014/04/26 职场文书
教师考核表个人总结
2015/02/12 职场文书
导游词之天津古文化街
2019/11/09 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫