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

问题代码

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

预期正确输出

decrease - 1 increase + 1
1

实际输出结果

increase + 1 undefined undefined undefined
1

原因探究

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

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

被语法解释器解释成

[value1_1, value1_2, value1_3] = myhandle(1, 2)[1, 2, 3] = [4, 5, 6]
1

上面这行代码并不会报错，并且会将末尾的 [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
1
2
3
4
5
6

发现是因为 js 的语法解释器支持比较强的跨行数组索引语法，使得不加分号情况下可能会出现出人意料的情况。
一般开发的项目中，会通过插件配置自动添加在行尾添加分号来规避上面的问题。但是如果单纯写 js 代码
到 node 中运行就可能需要注意分号的问题。

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

我和朋友讨论是要看你的项目有没有配置了 js 代码压缩，如果配置了压缩代码，那么说明你的项目代码最终
也是会在行尾帮你加上分号后再压缩（没分号怎么压缩代码）。

结论

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