>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21230 个阅读者 刷新本主题
 * 贴子主题:  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面向对象编程-->Java常用类(下)
  JavaWeb开发-->自定义JSP标签(Ⅱ)
  JSP与Hibernate开发-->立即检索和延迟检索策略
  Java网络编程-->XML数据处理
  精通Spring-->CSS过渡和动画
  Vue3开发-->Vue Router路由管理器
  前端Vue单页面应用性能优化
  Vue3.0里为什么要用 Proxy API 替代 defineProperty API ? ...
  Vue 项目从 Vue CLI 2 升级到 Vue CLI 4
  Vue2.0与Vue3.0主要区别总结
  Vue项目PWA化
  CSS的style样式的三种用法
  Vue CLI内网安装(禁止运行vue指令解决方案)
  Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗? -
  vue+file-saver+jszip实现批量导出图片
  理解前后端分离的概念
  一个AJAX入门范例
  jQuery与AJAX的整合简介
  HTML标签的全局属性
  HTML支持的多媒体(Media)
  JavaScript prototype(原型对象)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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