JS/TS中是否有更优方法按属性查找数组指定对象的索引

JavaScript 数组原生提供了Array.prototype.findIndex()内置方法，完全可以实现你要的查找目标项索引的效果，不需要手动写forEach循环遍历。

用法说明 #

findIndex会按顺序遍历数组，返回第一个满足你自定义判断条件的元素的索引，遍历到匹配项就会终止，不会走完整个数组，性能比全量遍历的forEach更好；如果全数组都没有匹配项，会返回-1，方便你做异常兜底。

代码改造示例 #

把你原来写的forEach遍历逻辑替换成findIndex即可，其他逻辑不用动：

const openExerciseListModal = (index:number) =>{
  const selectedValue = selectedItems[index];
  // 替换原forEach逻辑
  const matchIndex = items.findIndex(element => element.value === selectedValue);
  if (matchIndex !== -1) {
    alert(matchIndex)
  }
  savedExercises = [...selectedExercise]
  setExerciseListModalVisible(() => !isExerciseListModalVisible)
}

效果验证 #

针对你给出的示例数组结构：

[{ label: "Monday", value: "Monday" },{ label: "Tuesday", value: "Tuesday" }]

• 选中Monday时，匹配到的索引为0，完全符合你的预期
• 选中Tuesday时，匹配到的索引为1
• 如果选中的value不在数组里，会返回-1，你可以按需加提示逻辑，比原有写法更严谨

注意：如果你业务里存在多个元素value相同的情况，findIndex只会返回第一个匹配项的索引；你原来写的forEach逻辑会依次弹出所有匹配项的索引，这种场景下如果要保留原有表现，还是需要用循环写法。从你给出的数组示例看value和选项文本一一对应，属于值唯一的场景，用findIndex是最优选择。

内容的提问来源于stack exchange，提问作者Bonhart