>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 24748 个阅读者 刷新本主题
 * 贴子主题:  JS 循环删除数组 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2021-02-04 05:56:05     消息  查看  搜索  好友  邮件  复制  引用

    

问题

  在码代码的过程中,经常会遇到在循环中移除指定元素的需求。按照常规的思路,直接一个for循环,然后在循环里面来个if判断,在判断中删除掉指定元素即可。但是实际情况往往不会像预想的那样顺利运行.
  • 原因:当删除掉了一个元素后,数组的长度发生的变化,造成了程序的异常。
        // 如果数组2中的数据再数组1中存在,则删除此数据
    let arr1 = [
      { id: 1, name: '鸡腿堡' },
      { id: 2, name: '鳕鱼堡' },
      { id: 3, name: '香辣鸡翅' },
      { id: 4, name: '百世可乐' },
      { id: 5, name: '汉堡' },
      { id: 6, name: '可口可乐' }
    ];
    let arr2 = [
      { id: 7, name: '百世可乐' },
      { id: 8, name: '可口可乐' },
      { id: 9, name: '鸡腿堡' },
      { id: 10, name: '麻辣鸡翅' },
      { id: 11, name: '鸡腿堡' },
      { id: 12, name: '红烧鸡翅' },
    ];

             点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小

循环删除后的数据.png

解决方法

1.删除成功后数组下标减1    

        for (let i = 0; i < arr2.length; i++) {
      for (let j = 0; j < arr1.length; j++) {
        if (arr2[i] && arr2[i].name === arr1[j].name) {
          // 删除元素后改变i的值
          arr2.splice(i--, 1);
        }
      }
    }

  2.从数组后向前遍历,从而避免数组删除后长度改变问题    

        for (let i = arr2.length - 1; i >= 0; i--) {
      for (let j = 0; j < arr1.length; j++) {
        if (arr2[i].name === arr1[j].name) {
          arr2.splice(i, 1);
        }
      }
    }

  3.使用while(k--),k为数组下标    

      let k = arr2.length;
    while (k--) {
      for (let i = 0; i < arr1.length; i++) {
        if(arr2[k].name === arr1[i].name) {
          arr2.splice(k, 1);
        }
      }
    }

  4.设置一个flag,根据flag进行判断下标是否应该自加    

     for (let i = 0, flag = true; i < arr2.length; flag ? i++ : i) {
      for (let j = 0; j < arr1.length; j++) {
        if (arr2[i].name === arr1[j].name) {
          arr2.splice(i, 1);
          flag = false;
          break;
        } else {
          flag = true;
        }
      }
    }

    console.log(arr1);
    console.log(arr2);

----------------------------
原文链接:https://www.jianshu.com/p/61e66b8baae8

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2021-02-04 23:55:39 重新编辑]
  Java面向对象编程-->Swing组件(下)
  JavaWeb开发-->访问数据库(Ⅰ)
  JSP与Hibernate开发-->第一个helloapp应用
  Java网络编程-->基于UDP的数据报和套接字
  精通Spring-->Vue组件开发基础
  Vue3开发-->计算属性和数据监听
  好消息:《精通Vue.js:Web前端开发技术详解》出版了!
  JavaScript输出格式化日期和时间
  vue中监听object数据变化的基本原理
  vue+file-saver+jszip实现批量导出图片
  史上最全的web前端面试题汇总及答案
  jQuery 添加元素
  JavaScript的HTML DOM Parameter 对象
  JavaScript中的HTML DOM Label 对象
  JavaScript Error(错误) 对象
  HTML5 语义元素
  JavaScript 测试 jQuery
  JavaScript 的代码规范
  Android 广播接收器(Broadcast Receivers)
  用JavaScript制作弹出页面
  一文读懂前端技术演进:盘点Web前端20年的技术变迁史
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。