数组操作高级技巧小记js

最新推荐文章于 2025-11-08 08:53:20 发布

原创最新推荐文章于 2025-11-08 08:53:20 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #array

这篇博客讲述了如何从全部频道列表中筛选出未被包含在个人订阅频道列表中的项。通过使用JavaScript的Array.prototype.filter()和Array.prototype.find()方法，实现了高效的数据过滤。优化后的代码利用了find方法的特性，避免了多余的循环，提高了代码的简洁性和效率。

数据结构


// 我的频道
myChannel = [{"id":0,"name":"推荐"},{"id":11,"name":"后端"},{"id":12,"name":"linux"},{"id":13,"name":"人工智能"},{"id":17,"name":"前端"},{"id":18,"name":"python"},{"id":7,"name":"数据库"}]
// 所有频道
allChannel = [{"id":2,"name":"开发者资讯"},{"id":3,"name":"ios"},{"id":4,"name":"c++"},{"id":5,"name":"android"},{"id":6,"name":"css"},{"id":8,"name":"区块链"},{"id":9,"name":"go"},{"id":10,"name":"产品"},{"id":11,"name":"后端"},{"id":12,"name":"linux"},{"id":13,"name":"人工智能"},{"id":14,"name":"php"},{"id":15,"name":"javascript"},{"id":16,"name":"架构"},{"id":17,"name":"前端"},{"id":18,"name":"python"},{"id":19,"name":"java"},{"id":20,"name":"算法"},{"id":21,"name":"面试"},{"id":22,"name":"科技动态"},{"id":23,"name":"js"},{"id":24,"name":"设计"},{"id":25,"name":"数码产品"},{"id":1,"name":"html"},{"id":7,"name":"数据库"},{"id":26,"name":"软件测试"},{"id":27,"name":"测试开发"},{"id":31,"name":"test4"},{"id":32,"name":"test18"},{"id":41,"name":"test17"}]

后者包含前者

数据处理要求

将所有频道的数据刨除我的频道的数据获得新的数据，filterChannel = allChannel - myChannel

我写的处理方案

 computed: {
    filterChannels() {
      return this.allChannels.filter((val) => {
         for(var i = 0; i < this.myChannel.length; i++) {
             if (val.id === this.myChannel[i].id) {
                    return false
                }
           }
           return true
        })
      })
    }
  },

处理方案并不娴熟对array内置的方法没有特别敏感这里使用Array.prototype.find()会更好

优化后的方案

 computed: {
    filterChannels() {
      // 数组的内置Api
      return this.allChannels.filter((val) => {
        return !this.myChannels.find((item) => {
          return val.id === item.id
        })
      })
    }
  },

因为find这个方法他返回的不是Boolean值，如果没找到该元素返回的是undefined，找到了则返回的是改元素的值，如果返回值没有0这种值的话我想这种处理方法有最简洁的代码