>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21229 个阅读者 刷新本主题
 * 贴子主题:  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面向对象编程-->集合(下)
  JavaWeb开发-->JSP中使用JavaBean(Ⅱ)
  JSP与Hibernate开发-->域对象在持久化层的四种状态
  Java网络编程-->用Axis发布Web服务
  精通Spring-->绑定CSS样式
  Vue3开发-->虚拟DOM和render()函数
  vue3-Composition-API的用法
  基于vue-element-admin 的权限管理
  07、手把手教Vue--路由「Vue-router」 - TigerChain
  CSS的style样式的三种用法
  JS对树形数据的遍历和过滤,
  jQuery 删除元素
  JavaScript中的HTML DOM Label 对象
  JavaScript的History 对象
  JavaScript Date 对象
  jQuery UI 如何使用部件库
  CSS 单位
  响应式 Web 设计:网格视图
  JavaScript 正则表达式
  JavaScript 正则表达式
  JavaScript 对象 的创建和使用
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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