详解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 数组详解
Oct 10 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 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日期时间函数的高级应用技巧
2009/05/16 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
原生js二级联动效果
2017/06/20 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
亲子活动总结
2014/04/26 职场文书
物资采购方案
2014/06/12 职场文书
施工安全汇报材料
2014/08/17 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python