详解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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
js实现拖拽功能
Mar 01 Javascript
vue2路由基本用法实例分析
Mar 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
分享PHP header函数使用教程
2013/09/05 PHP
php递归创建目录的方法
2015/02/02 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
node跨域请求方法小结
2017/08/25 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python实现TCP文件传输
2020/03/20 Python
python try...finally...的实现方法
2020/11/25 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
客服部工作职责范本
2014/02/14 职场文书
新员工试用期自我评价
2015/03/10 职场文书
外科护士长工作总结
2015/08/12 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
处理canvas绘制图片模糊问题
2022/05/11 Javascript