ES6 数组解构时不加分号引发的问题

问题代码

js 复制代码
let value1 = 0
let value2 = 0
let value1_1 = '', value1_2 = '', value1_3 = '', value2_1, value2_2, value2_3

function myhandle(cur, pre) {
    let s = '', c = '', r = ''
    if (parseInt(cur) - parseInt(pre) < 0) {
        s = '-'
        c = 'decrease'
        r = Math.abs(parseInt(cur) - parseInt(pre))
    } else if (parseInt(cur) - parseInt(pre) === 0) {
        s = ''
        c = ''
        r = "不增不减"
    } else {
        s = '+'
        c = 'increase'
        r = parseInt(cur) - parseInt(pre)
    }

    return [c, s, r]
}

[value1_1, value1_2, value1_3] = myhandle(1, 2)
[value2_1, value2_2, value2_3] = myhandle(3, 2)

console.log(value1_1, value1_2, value1_3, value2_1, value2_2, value2_3);

预期正确输出

js 复制代码
decrease - 1 increase + 1

实际输出结果

js 复制代码
increase + 1 undefined undefined undefined

原因探究

由于没有在适当的行尾加上分号,导致下面的代码被误读:

js 复制代码
[value1_1, value1_2, value1_3] = myhandle(1, 2)
[value2_1, value2_2, value2_3] = myhandle(3, 2)

被语法解释器解释成

js 复制代码
[value1_1, value1_2, value1_3] = myhandle(1, 2)[1, 2, 3] = [4, 5, 6]

上面这行代码并不会报错,并且会将末尾的 [4, 5, 6] 赋值给 [value1_1, value1_2, value1_3]

这样就引发了直接打印 [value1_1, value1_2, value1_3] 的结果不等于 myhandle(1, 2) 的返回值。

可以通过尝试下面的代码:

js 复制代码
let hello = [2131, 234]
console.log(hello
[0]
)

// 输出 2131

发现是因为 js 的语法解释器支持比较强的跨行数组索引语法,使得不加分号情况下可能会出现出人意料的情况。

一般开发的项目中,会通过插件配置自动添加在行尾添加分号来规避上面的问题。但是如果单纯写 js 代码

到 node 中运行就可能需要注意分号的问题。

有时项目配置的是保存时自动移除分号,又需要写出上面的赋值语句怎么办?

我和朋友讨论是要看你的项目有没有配置了 js 代码压缩,如果配置了压缩代码,那么说明你的项目代码最终

也是会在行尾帮你加上分号后再压缩(没分号怎么压缩代码)。

结论

写 js 代码一定要注意行尾分号问题,如果用的语句组合比较复杂,那么最好在行尾加上分号增强代码可读性。

相关推荐
熊出没6 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN6 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠12 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户990450177800920 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家23 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端