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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
js调用刷新界面的几种方式
May 03 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php定界符
2014/06/19 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
JavaScript多线程详解
2015/08/12 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
python框架flask表单实现详解
2019/11/04 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python em算法的实现
2020/10/03 Python
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
女娲补天教学反思
2014/02/05 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
博士生求职信
2014/07/06 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
教师听课学习心得体会
2016/01/15 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
python 常用的异步框架汇总整理
2021/06/18 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB