JS删除数组指定值常用方法详解


Posted in Javascript onJune 04, 2020

一. 删除数组中所有指定值

先看一种危险的方式:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function() {
        var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
        console.log(`原始数组:${arr}`);
        arr.forEach((item, i) => {
          if (item == 3) {
            arr.splice(i, 1); // 从下标 i 开始, 删除 1 个元素
          }
        })
        console.log(`删除之后的数组:${arr}`);
      }
    </script>
  </body>
</html>

输出结果:

JS删除数组指定值常用方法详解

输出的结果中,只删除了一个3,这是因为splice方法删除数组一个指定值之后,数组发生改变,后续的值向前挪动一个位置,在接下来的循环遍历中,后面的3的下标由原本的5变成了4,这就导致删除操作之后,接着找下标为5的值的时候,找不到后面的值3了,而从值为4的元素接着遍历,当要删除的值不确实是1个的时候,这种遍历删除是危险的方式;

1. 如果使用splice方法循环遍历的方式删除指定值,一种保险的方式是逆向遍历:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function() {
        var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
        console.log(`原始数组:${arr}`);
        for (let i = arr.length - 1; i > -1; i--) {
          if (arr[i] == 3) {
            arr.splice(i, 1);
          }
        }
        console.log(`删除之后的数组:${arr}`);
      }
    </script>
  </body>
</html>

输出结果:

JS删除数组指定值常用方法详解

2. 使用filter方法过滤掉指定值:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function() {
        var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
        arr = arr.filter(item => item != 3); // 过滤掉值不为3,返回新数组
        console.log(`filter方法操作之后的数组:${arr}`);
      }
    </script>
  </body>
</html>

输出结果:

JS删除数组指定值常用方法详解

注意: filter方法不改变原数组,只是返回一个新数组;

二. 删除指定一个值

如果确定要删除的值只有一个,除了遍历查找删除之后,还可以使用some方法:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function() {
        var arr = [1, 2, 3, 4, 5];
        arr.some((item, i) => {
          if (item == 2) {
            arr.splice(i, 1);
            return true
          }
        })
        console.log(`删除之后的数组:${arr}`);
      }
    </script>
  </body>
</html>

输出结果:

JS删除数组指定值常用方法详解

注意: some方法找到符合条件的值手动返回true之后,不再接着遍历(如果将some替换成forEach,return是不起作用的);

除此之外,还可以使用findIndex方法:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function() {
        var arr = [1, 2, 3, 4, 5];
        console.log(`原始数组:${arr}`);
        var a = arr.findIndex(item => item == 3);
        arr.splice(a, 1);
        console.log(`删除之后的数组:${arr}`);
      }
    </script>
  </body>
</html>

输出结果:

JS删除数组指定值常用方法详解

注意: findIndex只找到第一个符合条件的下标,找不到就返回 -1;

详情查看MDN中关于数组的介绍:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
详解javascript函数的参数
Nov 10 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 #Javascript
Paypal支付不完全指北
Jun 04 #Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 #Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 #Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 #Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 #Javascript
微信小程序实现watch监听
Jun 04 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python 录制系统声音的示例
2020/12/21 Python
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
学生手册家长评语
2014/02/10 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
广播体操比赛主持词
2015/06/29 职场文书
高中生物教学反思
2016/02/20 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python