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 创建快捷方式的代码(fso)
Nov 19 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
如何用threejs实现实时多边形折射
May 07 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP排序算法类实例
2015/06/17 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
js 学习笔记(三)
2009/12/29 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python笔记(2)
2012/10/24 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python输入错误后删除的方法
2019/10/12 Python
详解Django admin高级用法
2019/11/06 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
美国电视购物:QVC
2017/02/06 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
Java模拟试题
2014/11/10 面试题
热爱祖国的演讲稿
2014/05/04 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
爱晚亭导游词
2015/02/09 职场文书
经理岗位职责范本
2015/04/15 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
MySQL root密码的重置方法
2021/04/21 MySQL
python_tkinter弹出对话框创建
2022/03/20 Python
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技