JavaScript新手求助：跨代码块访问url变量出现ReferenceError问题

你的核心问题是变量未声明导致的作用域错误，以及对JavaScript作用域规则理解不足，以下是具体问题和修复方案：

核心问题点 #

1. 隐式全局变量：直接赋值value = e[key]、url = value.url时未用let/const声明，导致变量成为全局变量（非严格模式下），或直接抛出ReferenceError（严格模式下）。
2. 作用域隔离：find回调函数内部的变量默认无法在外部访问，你试图在回调内赋值url后外部使用，逻辑不成立。
3. 无效的遍历逻辑：第二段代码中find的else{return}会导致遍历第一个不匹配的元素就终止，无法找到目标元素。

修复后的代码示例 #

第一段代码修复 #

const myJson = { "images":[
    {"scissors": {"url":"images/icon-scissors.svg"}},
    {"paper": {"url":"images/icon-paper.svg"}},
    {"rock": {"url":"images/icon-rock.svg"}}
]};

// 提前在需要的作用域声明变量
let url = '';
let value = null;
// 假设e是myJson.images中的目标元素（比如randChoice）
for(let key in e){
    value = e[key];
    url = value.url;   
}

if(randChoice.scissors){
    // 直接使用外层作用域的url，无需重新声明
    console.log(url); // 原代码的url[0]是取字符串首字符，若不是需求可删除
}

第二段代码修复 #

const myJson = { "images":[
    {"scissors": {"url":"images/icon-scissors.svg"}},
    {"paper": {"url":"images/icon-paper.svg"}},
    {"rock": {"url":"images/icon-rock.svg"}}
]};

// 先通过find找到匹配的元素，回调仅负责判断匹配
const selectedElem = myJson.images.find(elem => {
    // 快速获取每个元素的唯一键名
    const elemKey = Object.keys(elem)[0];
    return elemKey === triggerType;
});

// 找到元素后再处理url和DOM赋值
if(selectedElem) {
    const url = selectedElem[triggerType].url;
    selectedChoiceImg.src = url;
    // 若需要在其他代码块访问url，可将let url声明在当前块的外层
}

关键注意事项 #

• 强制声明变量：所有变量必须用let/const声明，禁止隐式赋值（严格模式下开启'use strict';可快速排查这类问题）。
• 理解块级作用域：let/const声明的变量仅在当前{}块内有效，如需跨块访问，需在更高层级的作用域声明。
• 优化JSON遍历：你的JSON结构中每个数组元素仅含一个键，用Object.keys(elem)[0]可直接获取键名，避免冗余循环。

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