如何不使用if语句实现图片src属性的切换？

希望通过点击按钮修改img标签的src属性，目前用if-else在两张图片间切换，想找到更专业的实现方式。现有代码如下：

现有JS代码 #

let smile = true  
let test = () => {
   if (smile == true) {
     document.getElementById("image").src = "https://images.freeimages.com/images/large-previews/adb/fruit-in-a-bowl-1637721.jpg";
      smile = false
    } 
 else {
     document.getElementById("image").src = "https://images.freeimages.com/images/large-previews/a33/fresh-red-ripe-strawberries-1641723.jpg";
     smile = true
    }
}

现有HTML代码 #

<img id="image" src="https://images.freeimages.com/images/large-previews/a33/fresh-red-ripe-strawberries-1641723.jpg" width="160" height="120">
<button type="button" onclick="test()">change!</button>

替代方案 #

方案1：数组索引切换法 #

将图片地址存入数组，通过翻转索引实现切换，逻辑简洁且易于扩展（后续加图片只需在数组中添加）：

// 存储所有需要切换的图片地址
const imageUrls = [
  "https://images.freeimages.com/images/large-previews/a33/fresh-red-ripe-strawberries-1641723.jpg",
  "https://images.freeimages.com/images/large-previews/adb/fruit-in-a-bowl-1637721.jpg"
];
let currentIndex = 0;
// 提前获取DOM元素，避免重复查询
const imgElement = document.getElementById("image");

const test = () => {
  // 切换索引：0→1，1→0
  currentIndex = 1 - currentIndex;
  imgElement.src = imageUrls[currentIndex];
};

方案2：三元表达式简化状态切换 #

保留布尔状态变量，用三元表达式替代if-else，让代码更紧凑：

let showStrawberry = true;
const imgElement = document.getElementById("image");

const test = () => {
  imgElement.src = showStrawberry
    ? "https://images.freeimages.com/images/large-previews/adb/fruit-in-a-bowl-1637721.jpg"
    : "https://images.freeimages.com/images/large-previews/a33/fresh-red-ripe-strawberries-1641723.jpg";
  // 翻转状态
  showStrawberry = !showStrawberry;
};

方案3：基于DOM自身状态切换 #

不需要额外状态变量，直接通过当前图片的src判断目标地址：

const imgElement = document.getElementById("image");
// 定义常量存储图片地址，提升可读性
const SRC_STRAWBERRY = "https://images.freeimages.com/images/large-previews/a33/fresh-red-ripe-strawberries-1641723.jpg";
const SRC_FRUIT_BOWL = "https://images.freeimages.com/images/large-previews/adb/fruit-in-a-bowl-1637721.jpg";

const test = () => {
  imgElement.src = imgElement.src === SRC_STRAWBERRY 
    ? SRC_FRUIT_BOWL 
    : SRC_STRAWBERRY;
};

额外优化建议 #

• 提前缓存DOM元素：初始化时获取一次img元素，避免每次点击都执行document.getElementById，提升性能。
• 使用const声明常量：图片地址、DOM元素等不会改变的变量，用const代替let，让代码更严谨。
• 解耦事件绑定：避免HTML内联onclick，改用addEventListener绑定事件，示例：

  document.querySelector("button").addEventListener("click", test);
  

  这样HTML和JS逻辑分离，更易于维护。

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