forEach和map循环遍历的区别以及 includes在循环中的实际案例

一. includes在循环中的实际使用

    state.tenantList.forEach(item => {
      if (state.tenantIds.includes(item.id)) {
        params = { tenantInfos: [{ tenantId: item.id, tenantName: item.username }], types: checkedInfo.filterTypes, categoryIds: checkedInfo.filterCategoryIds, productIds: checkedInfo.filterProductIds }
      }
    }) 

以上代码中的问题是，在循环 state.tenantList 的过程中，只有当 state.tenantIds 包含当前 item.id 时，才会对 params 进行赋值，并且此时会覆盖前面已经赋值给 params 的值。

因此，最终 params 只会保留最后一次循环中的赋值结果。

解决： 如果需要将所有符合条件的 item 都加入到 params 中，需要使用数组来存储多个 tenantInfo，并在循环中往数组中添加每次的值。而不是一个简单的对象。如下所示：

let tenantInfos = []
state.tenantList.forEach(item => {
  if (state.tenantIds.includes(item.id)) {
    tenantInfos.push({ tenantId: item.id, tenantName: item.username })
  }
})
params = { tenantInfos: tenantInfos, types: checkedInfo.filterTypes, categoryIds: checkedInfo.filterCategoryIds, productIds: checkedInfo.filterProductIds }

二. forEach和map的区别以及使用场景

在JavaScript中，forEach和map都是用于遍历数组的方法。它们的主要区别是：

1. forEach方法不返回任何值，而是对原始数组进行原地修改。而map方法会返回一个新的数组，其中包含了对原始数组的所有操作。
2. 在使用forEach方法时，无法链式调用其他方法，如filter()、reduce()等。而map方法可以链式调用其他方法，使得处理数组更为方便。
3. forEach方法不支持修改原数组的长度，而map方法允许修改原数组的长度。

综上所述，如果你想对原始数组进行原地修改，使用forEach方法。如果你想创建并返回一个新的数组，并且使用连续操作，例如filter()、reduce()等，使用map方法。

forEach通常用于遍历数组或集合，对每一个元素进行操作，可以简化代码量。
map通常用于将一个数组中的每个元素映射到另一个数组中，可以通过自定义函数来实现映射规则。

三. el-option的value属性实例

el-select的v-model选中项的值是el-option的value属性的值。

当选中一个el-option时，el-select会将该el-option的value属性的值作为选中项的值传递给v-model。如果el-option没有设置value属性，则会将其文本内容作为默认的值。

     <el-select v-model="tenantIds" :placeholder="t('placeholder.selectTenant')" filterable clearable
        v-hasRole="['ROOT', 'ADMIN']" ref="select">
        <!-- value是选中项值所展示的内容（可以是字符串，也可以是对象） :value="item.id" -->
        <el-option v-for="item in tenantList" :key="item.id" :label="item.username" :value="item" />
      </el-select>

1.:value=“item.id”-------此时打印所选中项tenantIds的值是对象的id属性

const selectedTenant = state.tenantList.find(item => item.id === state.tenantIds);

这里要先通过id来判断拿到所选中的项

2.:value=“item”-------此时打印所选中项tenantIds的值是一个对象
这里不用判断，可直接拿到选中项里的东西