JavaScript如何从二维数组中同时获取并展示标题与描述？

问题表现 #

使用二维数组存储图片配置信息时，无法同时展示对应条目标题、描述内容，通过索引取值仅能拿到单个标识字段，无法获取同条目下全部关联信息。
原有问题代码如下：

var imgCount = 0;
var imgContent = [
 ["imgOption1", "BOM", "Lorem ipsum dolor sit amet."],
 ["imgOption2", "DOM", "Nullam fringilla imperdiet eleifend"],
 ["imgOption3", "JavaScript", "Cras dapibus ipsum a consequat tincidunt"]
];
function previewImg(imgSrc){
 document.getElementById("imgViewer").src = imgSrc.src;
 alert(imgContent[imgCount][0]= imgSrc.id);
}

预期效果为触发预览时，同时展示对应条目的图片选项标识、标题、描述，例如imgOption1 BOM Lorem ipsum dolor sit amet.，实际运行仅弹出单条标识内容。

问题原因 #

• 逻辑写错：alert内是赋值表达式imgContent[imgCount][0]= imgSrc.id，会直接覆盖原有数组内存储的标识值，且赋值表达式的返回值就是等号右侧的imgSrc.id，自然只会弹出单个id内容。
• 取值不全：仅读取了二级索引[0]的标识字段，完全没有读取索引[1]存的标题、索引[2]存的描述字段。
• 索引写死：固定用全局变量imgCount作为一级索引取配置，没有和当前触发预览的图片做匹配，切换图片时极易取错配置。

修复代码 #

var imgContent = [
 ["imgOption1", "BOM", "Lorem ipsum dolor sit amet."],
 ["imgOption2", "DOM", "Nullam fringilla imperdiet eleifend"],
 ["imgOption3", "JavaScript", "Cras dapibus ipsum a consequat tincidunt"]
];
function previewImg(imgSrc){
  // 更新预览图地址
  document.getElementById("imgViewer").src = imgSrc.src;
  // 根据当前图片id匹配对应配置条目
  const currentConfig = imgContent.find(item => item[0] === imgSrc.id);
  if (!currentConfig) return;
  // 拼接三个字段完整展示
  alert(`${currentConfig[0]} ${currentConfig[1]} ${currentConfig[2]}`);
}

修复说明 #

修复后触发预览逻辑时，会先匹配当前图片对应的完整配置项，再拼接三个字段的内容统一展示，完全符合预期输出效果。如果需要保留原有imgCount计数逻辑，在匹配到配置项后增加imgCount = imgContent.indexOf(currentConfig)即可同步更新计数。

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