章节索引 :

分号导致的问题

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

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

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

函数返回值换行

var fn = function() {
  return
    '我怎么没被返回呢??'
}

console.log(fn()) // 输出:undefined

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

var fn = function() {
  return;
    '我怎么没被返回呢??';
};

console.log(fn());

所以输出的是 undefined

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

var number = 10

var result = 1 + number

(function() {
  console.log(1)
})()

// 报错 number is not a function

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

var number = 10;

var result = 1 + number(function() {
  console.log(1);
})();

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

var number = 10

var result = 1 + number

;(function() {
  console.log(1)
})()

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

var number = 1

var result = 1 + number

[1, 2, 3].forEach(function(item) {
  result += item
})

// 报错:Cannot read property 'forEach' of undefined

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

var number = 1;

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

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


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

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源