如何将map返回的数组转换为可比较的值，实现卡片ID与数据ID匹配校验

• 你的匹配逻辑错误：直接把存储所有ID的数组和单个卡片ID做全等判断，数组和单个值永远不可能相等，所以不会触发匹配逻辑
• 数据类型不匹配：通过dataset.id获取到的卡片ID是字符串类型，你cabins数组里存储的ID是数字类型，就算后续做单个值的全等比较，类型不一致也会匹配失败

有两种常用实现方式，按需选择即可：

方式1：判断ID是否存在（仅需要验证ID合法性的场景） #

将ID数组的生成逻辑移到点击事件外避免重复计算，点击时先把卡片ID转成数字，再用Array.includes()判断ID是否在合法列表中：

// 提前生成所有合法ID的数组，仅需执行一次
const validIds = cabins.map(item => item.id)
const cardbody = document.querySelectorAll('.card')

cardbody.forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    // 字符串ID转数字，保持和数据中ID类型一致
    const currentCardId = Number(e.currentTarget.dataset.id)
    if (validIds.includes(currentCardId)) {
      console.log('red')
      // 匹配成功的后续逻辑写在这里
    }
  })
})

方式2：直接获取匹配的数据对象（需要用到对应卡片完整数据的场景，更推荐） #

不需要额外生成ID数组，直接用Array.find()查找ID匹配的对象，拿到对象后可以直接用于后续逻辑：

const cardbody = document.querySelectorAll('.card')

cardbody.forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    const currentCardId = Number(e.currentTarget.dataset.id)
    // 查找ID匹配的 cabin 数据
    const matchedCabin = cabins.find(item => item.id === currentCardId)
    // matchedCabin 为非空值时代表匹配成功
    if (matchedCabin) {
      console.log('red')
      // 后续可直接使用matchedCabin读取对应卡片的所有字段数据
      console.log(matchedCabin)
    }
  })
})

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