如何通过值从JavaScript对象中反向获取对应键？

嘿，这个需求太常见啦！点击图片显示对应的水果名称，本质就是从对象的值反向查找对应的键，给你两种实用的方案，结合你的现有代码来实现：

方案1：通用反向查找函数（适合偶尔查找场景） #

写一个复用性强的函数，每次需要查找时遍历对象的键，匹配到对应值就返回键：

function getKeyByValue(obj, targetValue) {
  // 遍历对象的所有键，找到第一个值匹配的键
  return Object.keys(obj).find(key => obj[key] === targetValue);
}

结合你的代码使用示例：

const fruits = { 
  "apple": "fruits/apple.png", 
  "banana": "fruits/banana.png", 
  "watermelon": "fruits/watermelon.jpg" 
};

// 假设你拿到了图片的src
const clickedImgSrc = "fruits/banana.png";
const fruitName = getKeyByValue(fruits, clickedImgSrc);
console.log(fruitName); // 输出 "banana"

方案2：预构建反向映射（推荐，高频查找更高效） #

如果你的图片点击操作很频繁，提前把对象的键值对反转，构建一个路径→名称的映射表，之后每次查找都是O(1)的速度，性能更好：

const fruits = { 
  "apple": "fruits/apple.png", 
  "banana": "fruits/banana.png", 
  "watermelon": "fruits/watermelon.jpg" 
};

// 用Object.fromEntries和Object.entries快速构建反向映射
const reverseFruitsMap = Object.fromEntries(
  Object.entries(fruits).map(([fruitName, imgPath]) => [imgPath, fruitName])
);

// 此时reverseFruitsMap的结构是：
// { "fruits/apple.png": "apple", "fruits/banana.png": "banana", ... }

结合你的DOM代码实现点击逻辑 #

把上面的映射和图片点击事件结合，完整代码如下：

const fruits = { 
  "apple": "fruits/apple.png", 
  "banana": "fruits/banana.png", 
  "watermelon": "fruits/watermelon.jpg" 
};

// 预构建反向映射
const reverseFruitsMap = Object.fromEntries(
  Object.entries(fruits).map(([fruitName, imgPath]) => [imgPath, fruitName])
);

// 获取所有图片容器
const imgHolder = document.querySelectorAll("#imageholder");

// 给每个容器里的图片绑定点击事件
imgHolder.forEach(holder => {
  const img = holder.querySelector('img');
  if (img) {
    img.addEventListener('click', () => {
      // 获取图片的src属性
      const imgSrc = img.getAttribute('src');
      // 从反向映射里直接拿对应的水果名称
      const fruitName = reverseFruitsMap[imgSrc];
      
      if (fruitName) {
        // 这里替换成你需要的显示逻辑，比如弹窗、修改页面文本等
        alert(`你点击的水果是：${fruitName}`);
      } else {
        console.warn(`未找到对应图片 "${imgSrc}" 的水果名称`);
      }
    });
  }
});

注意事项 #

• 如果你的对象里存在多个键对应同一个值的情况，方案2的反向映射会保留最后一个匹配的键；方案1会返回第一个匹配的键，根据你的实际场景选择即可。
• 确保图片的src和对象里的路径完全一致（包括相对路径、大小写），否则会匹配失败。

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