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和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
JS原生实现轮播图的几种方法
Mar 23 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
提问的智慧
2006/10/09 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
JS实现小米轮播图
2020/09/21 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
详解Python中的__init__和__new__
2014/03/12 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python求解水仙花数的方法
2015/05/11 Python
python使用pymysql实现操作mysql
2016/09/13 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python 动态绘制爱心的示例
2020/09/27 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
美术专业自荐信
2014/07/07 职场文书
争先创优演讲稿
2014/09/15 职场文书
春节随笔
2015/08/15 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android