if语句失效报undefined错误，访问pathName[2]属性失败如何解决？

问题成因 #

• 核心是执行时序问题：pathName 全局声明时未赋初始值，仅在 window.load 事件回调中完成赋值。而滚动监听的绑定在脚本加载阶段就会执行，如果在页面所有资源加载完成（触发load事件）之前用户滚动了页面，此时 pathName 还是初始的 undefined，访问 undefined[2] 就会触发该报错。
• 其次存在语法错误：你贴的两段事件绑定代码都漏了回调函数的闭合右括号，会导致代码执行异常，load 回调可能无法正常触发，pathName 永远不会被赋值。
• 补充说明：如果 pathName 已被正确赋值，只是数组长度不足3，访问 pathName[2] 只会返回 undefined，不会抛出报错，因此报错核心原因就是 pathName 本身为 undefined。

修复方案 #

可按需选择以下任意一种方案：

1. 直接提前赋值pathName（最推荐）
   window.location.pathname 在DOM解析完成后就可以正常读取，不需要等待页面所有资源加载完成，直接把赋值逻辑移到全局作用域即可：

// 直接在全局赋值，不需要放在load回调里
const pathName = window.location.pathname.split('/');
$(window).on('load', function () {
    if($('.owl-item').length<5){
        // 原有逻辑
    }
});

2. 增加兜底判断
   在滚动监听的判断逻辑里先校验pathName是否存在，避免访问undefined的属性：

$(window).scroll(function (evt) {
    // 可选链写法兼容性不够的话可以改成 if(pathName && pathName[2] === undefined)
    if(pathName?.[2] === undefined)
    {
        // 业务逻辑代码
    }else{
        // 业务逻辑代码
    }
});

3. 滚动事件绑定移到load回调内
   如果确实需要等待load事件完成后才执行滚动相关逻辑，可以把滚动监听的绑定放到load回调里，确保pathName赋值完成后才会触发滚动判断：

let pathName;
$(window).on('load', function () {
    if($('.owl-item').length<5){
        // 原有逻辑
    }
    pathName= window.location.pathname.split('/');
    // 在这里绑定滚动监听
    $(window).scroll(function (evt) {
        if(pathName[2]===undefined)
        {
            // 业务逻辑代码
        }else{
            // 业务逻辑代码
        }
    });
});

最后记得补全所有事件绑定的闭合括号，避免语法错误。

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