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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
js实现录音上传功能
Nov 22 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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 magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
怎么写好自荐书
2014/03/02 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
个人承诺书格式范文
2015/04/29 职场文书
党支部综合考察意见
2015/06/01 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL