场景:使用 includes 和 some 方法来禁用选项

在 Vue.js 项目中，我们经常需要根据某些条件禁用 el-select 组件中的选项。本文将讨论在 el-select 中使用 includes 和 some 方法来实现这一功能，并比较这两种方法的优缺点。

完整代码示例

首先，来看一个完整的代码示例：

<el-select filterable value-key="id" v-model="formData.newDeptList" multiple>
  <el-option
    v-for="(selection, i) in deptList"
    :key="selection.id"
    :disabled="actorSelectedData.includes(selection.id) 或者使用 actorSelectedData.some(actor => actor.id === selection.id)"
    :label="selection.displayName"
    :value="selection"
  ></el-option>
</el-select>

两种实现方式的区别

actorSelectedData.includes(selection.id)

描述: 这种方式检查 actorSelectedData 数组中是否直接包含 selection.id。

前提: actorSelectedData 必须是一个包含所有 id 的数组。

优点: 简单、直接，如果 actorSelectedData 只是一个 id 的数组，这种方式更高效。

缺点: 只能用于 actorSelectedData 是纯 id 数组的情况。

actorSelectedData.some(actor => actor.id === selection.id)

描述: 这种方式检查 actorSelectedData 数组中是否存在某个对象，该对象的 id 属性等于 selection.id。

前提: actorSelectedData 必须是一个包含对象的数组，每个对象都有一个 id 属性。

优点: 灵活，可以用于包含更多数据的对象数组。

缺点: 相比 includes 方法稍微复杂一些，性能稍微差一些，但在大多数应用中可以忽略不计。

哪个更好？

选择哪种方式取决于 actorSelectedData 的数据结构：

• 如果 actorSelectedData 是一个包含 id 的纯数组:

  actorSelectedData = [1, 2, 3, 4];
  

  使用 includes 方法更好：

  :disabled="actorSelectedData.includes(selection.id)"
  

• 如果 actorSelectedData 是一个包含对象的数组，每个对象有一个 id 属性：

  actorSelectedData = [{ id: 1, name: 'Dept A' }, { id: 2, name: 'Dept B' }];
  

  使用 some 方法更好：

  :disabled="actorSelectedData.some(actor => actor.id === selection.id)"
  

这两种方法各有优劣，关键在于数据结构的选择和具体应用场景的需求。在一般情况下，建议根据数据结构选择更适合的方法。