filter 和 forEach 区别

展示推荐频道列表

实现过程：

• 获取所有频道
• 基于所有频道和我的频道计算获取剩余的推荐频道

1.获取所有频道列表

封装接口，请求数据

2.处理展示推荐频道

思路：所有频道 - 用户频道 = 推荐频道

1、封装计算属性筛选数据（forEach方法）

  computed: {
    recommendChannels () {
      const channels = []
      this.allChannels.forEach(channel => {
        const ret = this.myChannels.find(myChannel => {
          return myChannel.id === channel.id
        })
        // 如果我的频道中不包括该频道项，则收集到推荐频道中
        if (!ret) {
          channels.push(channel)
        }
      })
      return channels
    }
  }

• 遍历所有频道
• 对每一个频道都判断：该频道是否属于我的频道
• 如果不属于我的频道，则收集起来
• 直到遍历结束，剩下来就是那些剩余的推荐频道

filter方法

  computed: {
    recommendChannels () {
      // 数组的 filter 方法：遍历数组，把符合条件的元素存储到新数组中
      return this.allChannels.filter(channel => {
        // 数组的 find 方法也是遍历数组，把符合条件的第一个元素返回
        return !this.myChannels.find(myChannel => {
          return myChannel.id === channel.id
        })
      })
    }

2、模板绑定

            <van-grid-item
            class="grid-item"
            v-for="(channel,index) in recommendChannels"
            :key="index"
            icon="plus"
            :text="channel.name" />
            </van-grid>

filter 和 forEach 区别

forEach和filter都是JavaScript数组的方法，它们都用来遍历数组，但它们的目的和行为不同。

forEach方法用来遍历数组中的每个元素，并对每个元素执行一个回调函数。它不会改变原始数组，也不会返回任何值。它只是简单地遍历数组，并对每个元素执行指定的操作。
例如：

const arr = [1, 2, 3];
arr.forEach(function(item) {
  console.log(item);
});
// 输出 1 2 3
filter方法也用来遍历数组中的每个元素，但它的目的是根据指定的条件过滤数组。它会创建一个新数组，其中包含所有满足条件的元素。
例如：

const arr = [1, 2, 3];
const result = arr.filter(function(item) {
  return item > 1;
});
console.log(result); // 输出 [2, 3]
总之，forEach和filter都是用来遍历数组的方法，但它们的目的和行为不同。forEach用来简单地遍历数组并对每个元素执行指定的操作，而filter则用来根据指定的条件过滤数组。