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

分号引发的问题"/>

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

问题代码

let value1 = 0
let value2 = 0
let value1_1 = '', value1_2 = '', value1_3 = '', value2_1, value2_2, value2_3function 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 代码压缩，如果配置了压缩代码，那么说明你的项目代码最终
也是会在行尾帮你加上分号后再压缩（没分号怎么压缩代码）。

结论

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