问题代码
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);
预期正确输出
decrease - 1 increase + 1
实际输出结果
increase + 1 undefined undefined undefined
原因探究
由于没有在适当的行尾加上分号,导致下面的代码被误读:
[value1_1, value1_2, value1_3] = myhandle(1, 2)
[value2_1, value2_2, value2_3] = myhandle(3, 2)
被语法解释器解释成
[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) 的返回值。
可以通过尝试下面的代码:
let hello = [2131, 234]
console.log(hello
[0]
)
// 输出 2131
发现是因为 js 的语法解释器支持比较强的跨行数组索引语法,使得不加分号情况下可能会出现出人意料的情况。
一般开发的项目中,会通过插件配置自动添加在行尾添加分号来规避上面的问题。但是如果单纯写 js 代码
到 node 中运行就可能需要注意分号的问题。
有时项目配置的是保存时自动移除分号,又需要写出上面的赋值语句怎么办?
我和朋友讨论是要看你的项目有没有配置了 js 代码压缩,如果配置了压缩代码,那么说明你的项目代码最终
也是会在行尾帮你加上分号后再压缩(没分号怎么压缩代码)。文章来源:https://www.toymoban.com/news/detail-723047.html
结论
写 js 代码一定要注意行尾分号问题,如果用的语句组合比较复杂,那么最好在行尾加上分号增强代码可读性。文章来源地址https://www.toymoban.com/news/detail-723047.html
到了这里,关于ES6 数组解构时不加分号引发的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!