>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 15804 个阅读者 刷新本主题
 * 贴子主题:  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开发-->在Web应用中访问Web服务
  JSP与Hibernate开发-->第一个helloapp应用
  Java网络编程-->通过JavaMail API收发邮件
  精通Spring-->Vue CLI脚手架工具
  Vue3开发-->Vue Router路由管理器
  10个 Web 开发人员的常用的 Chrome 扩展程序
  聊聊Nodejs中的模块化和事件循环
  10个开发者经常问的JavaScript面试题(附答案解析)
  Promise对象的then()和catch()方法
  axios 发 post 请求,后端接收不到参数的解决方案
  Vue CLI内网安装(禁止运行vue指令解决方案)
  HTML DOM Radio 单选按钮对象
  JavaScript的Screen 对象
  JavaScript的History 对象
  CSS padding(填充)
  CSS margin(外边距)
  CSS 列表样式(ul)
  JavaScript prototype(原型对象)
  JavaScript 函数参数
  JavaScript中的 this关键字
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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