关于?.在移动端内核为谷歌内核浏览器中的报错

199 阅读1分钟

发现问题

今天在写业务代码中,需要实现一个翻转功能,然后在pc端模拟移动端发现并未报错,之后尝试用手机端进行测试,一般浏览器并无异常,直到用uc浏览器和谷歌浏览器进行尝试,发现并未翻转

尝试找出问题

由于pc模拟的移动端并未报错,所以只能用window自带的error事件,并将error进行JSON.styingify(),下面是举一个简单的例子

<body>
    <script>
        window.addEventListener("error", e => {
            document.querySelector(".error").innerHTML = JSON.stringify(e) 
        })
    </script>
    <div class="box"></div>
    <div class="error"></div>
    <script>
        let str = '222222222222'
        let leng1 = str?.length
        document.querySelector(".box").innerHTML = leng1 + 'box'
    </script>
</body>

正常浏览器页面显示12box,uc浏览器页面展示报错:{"isTrust":true},之后修改stringify():

document.querySelector(".error").innerHTML = JSON.stringify(e, ["message", "arguments", "type", "name"]) + "----------------" + e.message

页面显示报错: {"message":"Uncaught SyntaxError: Unexpected token '.'","type":"error"}----------------Uncaught SyntaxError: Unexpected token '.'

看到SyntaxError 查看js代码 唯一可能的就是 ?. 这个问题.

尝试解决问题

尝试修改 let leng1 = str?.length,改为

let leng1 = str ? str.length : undefined

之后发现报错没了....

查询原因

查了一圈,是uc浏览器不支持这个链式询问?.在构建AST的时候,词法分析无法识别 . 所以如果想让在uc浏览器运行的话需要打包成es2015(也就是es6)