web

JS 不写分号踩了坑，但也可以不踩坑

前言

“所有直觉性的 “当然应该加分号” 都是保守的、未经深入思考的草率结论。” —— 尤雨溪。

重新认识分号在代码中的作用，为什么要写分号？又为什么可以没有分号？

踩的坑

写一个方法将秒数转为“xx天xx时xx分xx秒”的形式

const ONEDAYSECOND = 24 * 60 * 60
const ONEHOURSECOND = 60 * 60
const ONEMINUTESECOND = 60

function getQuotientandRemainder(dividend,divisor){
const remainder = dividend % divisor
const quotient = (dividend - remainder) / divisor
return [quotient,remainder]

}

function formatSeconds(time){
let restTime,day,hour,minute

	restTime = time

	[day,restTime] = getQuotientandRemainder(restTime,ONEDAYSECOND)

	[hour,restTime] = getQuotientandRemainder(restTime,ONEHOURSECOND)

	[minute,restTime] = getQuotientandRemainder(restTime,ONEMINUTESECOND)
return day + '天' + hour + '时' + minute + '分' + restTime + '秒'

}
console.log(formatSeconds(time)) // undefined天undefined时undefined分NaN,NaN秒

按照这段代码执行完后，day、hour、minute这些变量得到的都是 undefined，而 restTime 则好像得到一个数组。

问题就在于 13、14、15、16 行之间没有添加分号，导致解析时，没有将这三行解析成三条语句，而是解析成一条语句。最终的表达式就是这样的：

restTime = time[day,restTime] = getQuotientandRemainder(restTime,ONEDAYSECOND)[hour,restTime] = getQuotientandRemainder(restTime,ONEHOURSECOND)[minute,restTime] = getQuotientandRemainder(restTime,ONEMINUTESECOND)

那执行的过程相当于给 restTime 进行赋值，表达式从左往右执行，最终表达式的值为右值。最右边的值就是 getQuotientandRemainder(restTime,ONEMINUTESECOND)，由于在计算过程中 restTime 还没有被赋值，一直是 undefined，所以经过 getQuotientandRemainder 计算后得到的数组对象每个成员都是 NaN，最终赋值给 restTime 就是这样一个数组。

分号什么时候会“自动”出现

有时候好像不写分号也不会出问题，比如这种情况：

let a,b,c

a = 1

b = 2

c = 3
console.log(a,b,c) // 1 2 3

这是因为，JS 进行代码解析的时候，能够识别出语句的结束位置并“自动添加分号“，从而能够解析出“正确”的抽象语法树，最终执行的结果也就是我们所期待的。

JS 有一个语法特性叫做 ASI (Automatic Semicolon Insertion)，就是上面说到的”自动添加分号”的东西，它有一定的插入规则，在满足时会为代码自动添加分号进行断句，在我们不写分号的时候，需要了解这个规则，才能不踩坑。（当然这里说的加分号并不是真正的加分号，只是一种解析规则，用分号来代表语句间的界限）

ASI 规则

JS 只有在出现换行符的时候才会考虑是否添加分号，并且会尽量“少”添加分号，也就是尽量将多行语句合成一行，仅在必要时添加分号。

1. 行与行之间合并不符合语法时，插入分号

比如上面那个自动添加分号的例子，就是合并多行时会出现语法错误。

a = 1b = 2 这里 1b 是不合法的，因此会加入分号使其合法，变为 a = 1; b = 2

2. 在规定[no LineTerminator here]处，插入分号

这种情况很有针对性，针对一些特定的关键字，如 return continue break throw async yield，规定在这些关键字后不能有换行符，如果在这些关键字后有了换行符，JS 会自动在这些关键字后加上分号。
看下面这个例子🌰：

function a(){
return
123

}
console.log(a()) // undefined

function b(){
return 123

}
console.log(b()) // 123

在函数a中，return 后直接换行了，那么 return 和 123 就会被分成两条语句，所以其实 123 根本不会被执行到，而 return 也是啥也没返回。

3. ++、--这类运算符，若在一行开头，则在行首插入分号

++ 和 -- 既可以在变量前，也可以在变量后，如果它们在行首，当多行进行合并时，会产生歧义，到底是上一行变量的运算，还是下一行变量的运算，因此需要加入分号，处理为下一行变量的运算。

a

++

b
// 添加分号后

a

++b

如果你的预期是：

a++ 

b

那么就会踩坑了。

4. 在文件末尾发现语法无法构成合法语句时，会插入分号

这条和 1 有些类似

不写分号时需要注意⚠️

上面的 ASI 规则中，JS 都是为了正确运行代码，必须按照这些规则来分析代码。而它不会做多余的事，并且在遵循“尽量合并多行语句”的原则下，它会将没有语法问题的多行语句都合并起来。这可能违背了你的逻辑，你想让每行独立执行，而不是合成一句。开头贴出的例子，就是这样踩坑的，我并不想一次次连续的对数组进行取值🌚。

因此我们要写出明确的语句，可以被合并的语句，明确是多条语句时需要加上分号。

(如果你的项目中使用了某些规范，它不想让你用分号，别担心，它只是不想让你在行尾用分号，格式化时它会帮你把分号移到行首）像这样：

// before lint

restTime = time;

[day, restTime] = getQuotientandRemainder(restTime, ONEDAYSECOND);

[hour, restTime] = getQuotientandRemainder(restTime, ONEHOURSECOND);

[minute, restTime] = getQuotientandRemainder(restTime, ONEMINUTESECOND);

// after lint

restTime = time

;[day, restTime] = getQuotientandRemainder(restTime, ONEDAYSECOND)

;[hour, restTime] = getQuotientandRemainder(restTime, ONEHOURSECOND)

;[minute, restTime] = getQuotientandRemainder(restTime, ONEMINUTESECOND)

参考

作者：用户9787521254131
来源：juejin.cn/post/7269645636210458635

0

2024-02-08

0 个评论

要回复文章请先登录或注册