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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
ES6函数和数组用法实例分析
May 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
php 设计模式之 单例模式
2008/12/19 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
激活 ActiveX 控件
2006/10/09 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python多线程和队列操作实例
2015/06/21 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python实现flappy bird游戏
2018/12/24 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
超简单的Python HTTP服务
2019/07/22 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
学python安装的软件总结
2019/10/12 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
自我评价怎么写好呢?
2013/12/05 职场文书
工厂会计员职责
2014/02/06 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
2015大学迎新标语
2015/07/16 职场文书