JavaScript中的分号是可选的,加不加分号主要是个代码风格问题,但是不要一会加一会不加。通常,如果语句以“(”、“[”、“/”、“+”、“-”开头时,有可能被解释为上一行语句的一部分;此时可以在行首防御性的加上分号。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
JavaScript 中的分号是可选的,加不加分号主要是个代码风格问题。一种风格是使用分号明确结束语句,即便这些分号不是必需的;另一种风格是尽可能的不加分号,只在必要的情况才加。
注:分号可以加也可以不加,但是不要一会加一会不加。
代码中分号的作用
分号的主要作用是:作为语句的断言(EOS)用于结束一个程序语句,目的是让解析器正确解析程序。在很多 C-Style 语言里,用分号明确结束一行语句,主要是为了降低语言编译器开发的成本。但是现代编译器都足够聪明了,可以很好的处理好多行语句。很多语言都不需要明确使用分号结尾如:Go、Scala、Ruby、Python、Swift、Groovy 等等。
虽然 JavaScript 是 C-like 语言,但它是有别于 C、Java 的,在 JavaScript 中分号也是可选的,它自动分号插入机制 Auto Semicolon Insertion (ASI)。
JavaScript 自动分号插入机制
JavaScript 有着自动分号插入的机制(Automatic Semicolon Insertion),简称 ASI。在ECMA-262 - Automatic Semicolon Insertion中有关 Automatic Semicolon Insertion 的明确说明:
从左到右解析程序,当遇到一个不符合任何文法产生式的 token(offending token),那么只要满足下面条件之一就在违规 token 前面自动插入分号。
至少一个换行符(LineTerminator)分割了违规 token 和前一个 token。
违规 token 是 }
。
从左到右解析程序,tokens 输入流已经结束,当解析器无法将输入 token 流解析成单个完整 ECMAScript 程序 ,那么就在输入流的结束位置自动插入分号。
-
从左到右解析程序,遇到一个某些文法产生式允许的 token,但是它是受限操作(Restricted Productions),当至少一个换行符分割了受限的 token 和前一个 token,那么就在受限 token 前面自动插入分号。
然而,上述规则有一个附加的优先条件:如果插入分号后解析结果是空语句,或如果插入分号后它成为 for 语句头部的两个分号之一,那么不会自动插入分号。
注:以上说明翻译较为别扭可以多读几遍或阅读英文原文 ECMA-262 - Automatic Semicolon Insertion
分号自动插入的情况
简要归纳下,自动分号插入以换行为基础,解析器会尽量将新行并入当前行,当且仅当符合 ASI 规则时才会将新行视为独立的语句
主要有以下自动插入规则:
当新的一行并入当前行将构成非法语句不能正确解析时,将自动插入分号
当新行以
}
开头时,即代码块的结束位置,将自动插入分号当以
return
语句结束时,在行末自动插入分号当以
break
语句结束时,在行末自动插入分号当以
throw
语句结束时,在行末自动插入分号当以
continu
e语句结束时,在行末自动插入分号当以 ES6 的 yield 语句结尾时,在行末自动插入分号
++
、--
后缀表达式作为新行的开始,在行首自动插入分号源代码文件末尾自动插入号
如上所示,如果没加分号,运行这段代码这段代码将报错。
不能省略分号的情况
通常,如果语句以(
、[
、 /
、+
、-
开头时,就有可能被解释为上一行语句的一部分。实际中以/
、+
、-
开头的语句很少。但是以(
、[
开头的语句则很常见,通常我可以在行首防御性的加上分号。
前面,我们了解分号的自动插入,现在我们来看一些示例
let hey = 'hey' ['liu','liuxing'].forEach(console.log)
思考一秒钟上面的结果是什么?运行这段代码会抛出
Uncaught TypeError: Cannot read property 'forEach' of undefined
基于规则 1 上面代码将会被解析成如下代码
let hey = 'hey'['liu','liuxing'].forEach(console.log)
可以看出,使用[
开头的语句,前面没有分号,很可能导致出错。
再来看一个(
开头的语句的示例代码
const a = 1 const b = 2 const c = a + b (a + b).toString()
你会以为上面的代码结果是“3”吗?但是实际上它会抛出错误b is not a function
,因为根据 ASI 规则,它会被解析成如下代码:
const a = 1;const b = 2;const c = a + b(a + b).toString()
我们就不一一介绍/
, +
, -
作为语句开头的情况了,这种情况比较少,大家可以自己试试。只需要记住语句以(
、[
、 /
、+
、-
开头时,语句前需要加上分号即可!
下面再在看看使用return的情况,
(() => { return { name: 'Liu Xing' } })()
你的期待值是不是返回一个带有 name
的对象,但是它却返回了undefined
。这是 ASI 自动在return
给加上了分号。在这儿就得正确的换行以确保代码正确运行。我们可以看出除了正确的的分号,我们还需要正确合理的换行来使代码结构更为清晰。
总结
我们了解了 JavaScript 的分号自动插入机制,知道了 JavaScript 什么时候会自动加入分号,在(
、[
、 /
、+
、-
开头时需要我们准确的加上分号。Automatic Semicolon Insertion 机制为我们提供了两种选择,加还是不加分号?完全看你或你的团队的喜好了,现在我们也有prettier、Eslint 等工具来自动统一风格。
【相关推荐:javascript视频教程、编程基础视频】
以上是javascript要不要加分号的详细内容。更多信息请关注PHP中文网其他相关文章!

HTML和React的关系是前端开发的核心,它们共同构建现代Web应用的用户界面。1)HTML定义内容结构和语义,React通过组件化构建动态界面。2)React组件使用JSX语法嵌入HTML,实现智能渲染。3)组件生命周期管理HTML渲染,根据状态和属性动态更新。4)使用组件优化HTML结构,提高可维护性。5)性能优化包括避免不必要渲染,使用key属性,保持组件单一职责。

React是构建交互式前端体验的首选工具。1)React通过组件化和虚拟DOM简化UI开发。2)组件分为函数组件和类组件,函数组件更简洁,类组件提供更多生命周期方法。3)React的工作原理依赖虚拟DOM和调和算法,提高性能。4)状态管理使用useState或this.state,生命周期方法如componentDidMount用于特定逻辑。5)基本用法包括创建组件和管理状态,高级用法涉及自定义钩子和性能优化。6)常见错误包括状态更新不当和性能问题,调试技巧包括使用ReactDevTools和优

React是一个用于构建用户界面的JavaScript库,其核心是组件化和状态管理。1)通过组件化和状态管理简化UI开发。2)工作原理包括调和和渲染,优化可通过React.memo和useMemo实现。3)基本用法是创建并渲染组件,高级用法包括使用Hooks和ContextAPI。4)常见错误如状态更新不当,可使用ReactDevTools调试。5)性能优化包括使用React.memo、虚拟化列表和CodeSplitting,保持代码可读性和可维护性是最佳实践。

React通过JSX与HTML结合,提升用户体验。1)JSX嵌入HTML,使开发更直观。2)虚拟DOM机制优化性能,减少DOM操作。3)组件化管理UI,提高可维护性。4)状态管理和事件处理增强交互性。

React组件可以通过函数或类定义,封装UI逻辑并通过props接受输入数据。1)定义组件:使用函数或类,返回React元素。2)渲染组件:React调用render方法或执行函数组件。3)复用组件:通过props传递数据,构建复杂UI。组件的生命周期方法允许在不同阶段执行逻辑,提升开发效率和代码可维护性。

React严格模式是一种开发工具,可通过激活其他检查和警告来突出反应应用中的潜在问题。它有助于识别遗产代码,不安全的生命周期和副作用,鼓励现代反应实践。

本文讨论了React的对帐过程,详细介绍了它如何有效地更新DOM。关键步骤包括触发对帐,创建虚拟DOM,使用扩散算法以及应用最小的DOM更新。它还覆盖了经家


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Atom编辑器mac版下载
最流行的的开源编辑器

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。