如何在jQuery中将变量从内层循环传递到外层循环？

在使用jQuery嵌套循环时，尝试将内层循环的变量传递到外层时出现以下错误：

addorder:524 Uncaught ReferenceError: productPrice is not defined

原AJAX成功回调代码 #

success: function(data) {

    // تبدیل اطلاعات قیمت و موتور ها به جیسون
    const objofproduct = JSON.parse(data.products);
    const objofprice = JSON.parse(data.prices);
    console.log(objofprice[0].productCode);;
    // صفر لحاظ کردن متغیر فرضی
    var i = 0;
    
    // لوپ تولید آیتم هر شهر
    jQuery.each(objofproduct, function(){
        
        var e = 0;
        jQuery.each(objofprice, function() {
            console.log(objofprice[e].id);
            if(objofprice[e].productCode == objofproduct[i].productCode) {
                var productPrice = [objofprice[e].basePrice];
                console.log(productPrice[0]);
                var z = z + 1;
            } else {
                console.log('برای محصول قیمت تعریف نشده است');
                var z = z + 1;
            };
        });
        console.log(productPrice[0]);
        // تعریف کد اچ تی ام ال قابل تکرار در صفحه
        var productitem = "<div class='mymotor grid grid-cols-3 p-4 my-4 rounded-lg border-2 hover:bg-slate-100'> <div class='col-span-1 pl-4'><img class='w-full rounded-lg hover:shadow' src='"+objofproduct[i].imageUrl+"'/></div><div class='descriptionbig m-3 col-span-2 grid grid-cols-1 flex h-min'><div class='name pb-6 col-span-1 ltr w-full flex items-center h-fit font-semibold antialiased'><div class='w-2/3 flex justify-end'>"+objofproduct[i].brandName+" "+objofproduct[i].modelName+" "+objofproduct[i].tipName+"</div><div class='w-1/3 productcode font-light text-sm flex justify-start'>"+objofproduct[i].productCode+"</div></div><div class='text-lg'><b>» رنگ:</b> "+objofproduct[i].colorName+" <br> <b>» توضیحات:</b> "+objofproduct[i].description+"<br>"+productPrice[0]+"</div></div></div>";
        // تعیین ساختار مادر ایکس و کدی که باید هر بار اضافه شود
        $("#productx").append(productitem);
        // افزودن یک عدد به متغیر فرضی
        i = i + 1 ;
    })
    // پایان لوپ آیتم هر شهر

},
// پایان موفقیت

问题原因 #

1. 作用域限制：productPrice是在内层循环的if代码块中用var声明的，作用域仅局限于该代码块，外层循环无法访问。
2. 未初始化风险：如果内层循环中没有任何一次满足匹配条件，productPrice根本不会被定义，外层访问时必然抛出引用错误。
3. 额外问题：z变量未提前声明，会被隐式提升为全局变量，不符合代码规范。

解决方案 #

1. 提前在外层声明变量 #

在外层循环开头定义productPrice并设置默认值，确保外层始终能访问到该变量。

2. 优化内层循环逻辑 #

找到匹配价格后用return false跳出内层循环，避免不必要的遍历。

3. 修复z变量的声明问题 #

修改后的代码示例 #

success: function(data) {
    // تبدیل اطلاعات قیمت و موتور ها به جیسون
    const objofproduct = JSON.parse(data.products);
    const objofprice = JSON.parse(data.prices);
    console.log(objofprice[0].productCode);
    
    // 初始化z变量
    var z = 0;
    var i = 0;
    
    // لوپ تولید آیتم هر شهر
    jQuery.each(objofproduct, function(){
        // 在外层循环开头声明productPrice并设置默认值
        let productPrice = ['برای محصول قیمت تعریف نشده است'];
        let e = 0;
        
        jQuery.each(objofprice, function() {
            console.log(objofprice[e].id);
            if(objofprice[e].productCode == objofproduct[i].productCode) {
                // 赋值匹配到的价格
                productPrice = [objofprice[e].basePrice];
                console.log(productPrice[0]);
                z++;
                // 找到匹配项后跳出内层循环
                return false;
            } else {
                console.log('برای محصول قیمت تعریف نشده است');
                z++;
            }
            e++;
        });
        
        console.log(productPrice[0]);
        // تعریف کد اچ تی ام ال قابل تکرار در صفحه
        var productitem = "<div class='mymotor grid grid-cols-3 p-4 my-4 rounded-lg border-2 hover:bg-slate-100'> <div class='col-span-1 pl-4'><img class='w-full rounded-lg hover:shadow' src='"+objofproduct[i].imageUrl+"'/></div><div class='descriptionbig m-3 col-span-2 grid grid-cols-1 flex h-min'><div class='name pb-6 col-span-1 ltr w-full flex items-center h-fit font-semibold antialiased'><div class='w-2/3 flex justify-end'>"+objofproduct[i].brandName+" "+objofproduct[i].modelName+" "+objofproduct[i].tipName+"</div><div class='w-1/3 productcode font-light text-sm flex justify-start'>"+objofproduct[i].productCode+"</div></div><div class='text-lg'><b>» رنگ:</b> "+objofproduct[i].colorName+" <br> <b>» توضیحات:</b> "+objofproduct[i].description+"<br>"+productPrice[0]+"</div></div></div>";
        
        $("#productx").append(productitem);
        i++;
    })
},

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