如何用JavaScript空值合并运算符优化图片默认图设置逻辑？

你当前的写法问题在于：在??运算符右侧直接执行image.src = './assets/default.jpg'，这会把赋值语句的结果（也就是字符串./assets/default.jpg）赋值给image_filename，既没正确设置默认图片，还错误修改了文件名字段，完全偏离需求。

下面提供两种简洁的正确写法，根据你的实际场景选择：

方案一：数据驱动设置默认图（推荐） #

如果set_image函数的image_data_url是用来渲染图片的数据源，直接给它设置默认路径即可，后续渲染图片时直接使用这个字段作为src：

set_image({
  image_data_url: items.image_data_url ?? './assets/default.jpg',
  image_filename: items.image_filename ?? "No Image",
});

逻辑说明：当items.image_data_url为undefined、null或空值时，??会取右侧的默认路径，图片渲染逻辑只需要读取image_data_url就能自动显示默认图，无需额外操作DOM。

方案二：手动设置DOM元素的src #

如果必须直接操作image元素的src，把逻辑放在对象外部，用简洁的条件判断：

// 简洁短路写法：无有效图片源时设置默认图
!items.image_data_url && (image.src = './assets/default.jpg');

set_image({
  image_data_url: items.image_data_url ?? "",
  image_filename: items.image_filename ?? "No Image",
});

或者用更直观的if判断：

if (!items.image_data_url) {
  image.src = './assets/default.jpg';
}

set_image({
  image_data_url: items.image_data_url ?? "",
  image_filename: items.image_filename ?? "No Image",
});

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