分号导致的问题-知识专区-汉码未来

当前位置：前端开发 > 分号导致的问题

admin · 更新于 2021-08-06

在 JavaScript 中分号是可选的，解释器会自动对分号进行补全。

如果选择不写分号，需要注意一些使用上的问题。

不写分号，相当于将插入分号的权利递交给解释器，对于某些情况，可能会出现非预期的效果：

函数返回值换行

var fn = function() {
  return
    '我怎么没被返回呢??'}console.log(fn()) // 输出：undefined代码块
1
2
3
4
5
6

由于 return 已经是可以被作为完整的语句，所以解释器会自动在 return 后插入一个分号，上面这段代码在被处理后可能是这样的：

var fn = function() {
  return;
    '我怎么没被返回呢??';};console.log(fn());代码块
1
2
3
4
5
6

所以输出的是 undefined。

某个变量或者属性突然被当作函数调用

var number = 10var result = 1 + number(function() {
  console.log(1)})()// 报错 number is not a function代码块
1
2
3
4
5
6
7
8
9

这种情况，解释器会以为是要调用 number，但 number 是个数值，并不是一个函数，所以报错了，这段代码被处理后，可能是这样的：

var number = 10;var result = 1 + number(function() {
  console.log(1);})();代码块
1
2
3
4
5

碰到这个问题的大部分场景都是写自执行的匿名函数，所以通常不写分号的情况下，要养成在自执行匿名函数前写一个分号的习惯：

var number = 10var result = 1 + number;(function() {
  console.log(1)})()代码块
1
2
3
4
5
6
7

数据被当作数组成员或对象成员进行访问

var number = 1var result = 1 + number[1, 2, 3].forEach(function(item) {
  result += item})// 报错：Cannot read property 'forEach' of undefined代码块
1
2
3
4
5
6
7
8
9

这个报错原因和上一个点类似，也是 number 被误当作有成员的对象或者数组了，上面代码被处理后可能是这样的：

var number = 1;var result = 1 + number[1, 2, 3].forEach(function(item) {
  result += item;});代码块
1
2
3
4
5

显然 number[3] 是取不到东西的。

其他还有许许多多情况，场景与之都类似，所以在不写分号的时候一定要注意，条件允许的情况下借助 eslint 来帮助检查代码。

汉码未来

JavaScript 入门教程

函数返回值换行

某个变量或者属性突然被当作函数调用

数据被当作数组成员或对象成员进行访问

为什么选择汉码未来

线下面授

五人小班

技术强大

内推就业