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 代码一定要注意行尾分号问题，如果用的语句组合比较复杂，那么最好在行尾加上分号增强代码可读性。