React.js 如何判断键值对对象中是否存在指定存储值

判断逻辑失效的本质是JavaScript in 操作符的原生设计语义：该操作符仅用于校验「指定名称的键是否存在于目标对象（含其原型链）上」，完全不会读取、校验键对应的存储值。

结合你的示例代码来看：

answer = {1: "a", 2: "a", 3: "c", 4: "c"}
if ("c" in answer) {
  console.log("true");
}

这里的判断逻辑实际是在检查"对象里有没有字符串为'c'的键"，和键对应的值是什么没有任何关联。因为示例对象的键只有1、2、3、4，根本不存在名为"c"的键，所以这个判断永远不会命中；反过来如果写3 in answer就会返回true，因为3确实是对象的有效键。

要校验对象的存储值里是否存在目标内容，需要先提取所有值再做匹配，常见实现方式：

• 现代JS简洁实现：用Object.values()提取对象所有值生成数组，再通过数组的includes()方法做存在性校验

  const answer = {1: "a", 2: "a", 3: "c", 4: "c"};
  // 判断值集合中是否包含"c"
  const hasTargetValue = Object.values(answer).includes("c");
  if (hasTargetValue) {
    console.log("true");
  }
  

• 低兼容场景实现：如果需要支持不兼容现代API的老旧运行环境，可以通过for...in遍历对象，跳过原型链属性后逐键校验值：

  const answer = {1: "a", 2: "a", 3: "c", 4: "c"};
  let hasTargetValue = false;
  for (const key in answer) {
    // 仅检查对象自身的属性，排除原型链继承来的键值
    if (Object.prototype.hasOwnProperty.call(answer, key) && answer[key] === "c") {
      hasTargetValue = true;
      // 命中后直接跳出循环，减少不必要的遍历开销
      break;
    }
  }
  if (hasTargetValue) {
    console.log("true");
  }
  

• 拓展实现：如果需要拿到所有值匹配的键名，可以配合Object.keys()+filter方法筛选结果：

  // 最终得到值等于"c"的键集合 ['3', '4']
  const matchedKeyList = Object.keys(answer).filter(key => answer[key] === "c");
  

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