JavaScript 中的分号自动插入

prtyaa
prtyaa 2023-12-26 17:54:29 67635
分类专栏： 资讯

  • 许多编程语言都有语句结束的概念。不过，用哪个符号结束以及结束语句的规则在各个语言之间存在差异。

    对于 JavaScript 来说，它在这方面要求非常宽松。在 JavaScript 中语句结束符是分号，不过也可以不写。它是怎么做到的？JavaScript 编译器是如何知道何时该结束一条语句呢？

    它是通过一套简单的规则和自动分号插入机制(Automatic Semicolon Insertion，简写为 ASI)实现的。我们先看一下分号的规则，然后了解一下 ASI 的机制。

    分号的规则

    分号用于标记一条语句的结束。

    // Variable Declaration
const myVar = 5;
// Invoking a function
myFunction();

    块语句的末尾应该有一个分号。

    // function definition
function myFunction() {
  // function logic
}
// A conditional `if` block
if (myCondition) {
  // conditional logic
}
// loop constructs
while (myCondition) {
  // conditional logic
}

    分号的特殊案例。

    const myFunction = function() {};

    上面的代码是一个函数表达式，所以需要一个分号。

    自动分号插入(Automatic Semicolon Insertion)

    这是 Javascript 中的一种机制，它遵循一些规则，编译器会尝试把源代码分解成语句。默认情况下，ASI 总是打开的。有时候自动分号插入机制很有用，但偶尔会遇到 ASI 改变语义引起的棘手问题。

    ASI 规则

    1. 遇到行结束符时，会插入一个分号。

    // 实际的源码
const myVar = 5
// ASI 之后
const myVar = 5;

    2.遇到句法不允许的 ‘}’ 时插入一个分号。

    { 1
2 } 3

// ASI 后变成了

{ 1
;2 ;} 3;

    3.遇到一个 restricted production 后跟行结束符时，自动插入一个分号。

    这些 restricted production 包括：++, --, continue, break, return, throw, yield 和 module 关键字。解析器遇到这些关键字后跟一个行结束符时，会在关键字后面插入一个分号。

    // 实际的源码
for (let i = 0; i < 5; i++) {
  if (myCondition) {
    continue
  }
}
// ASI 后
for (let i = 0; i < 5; i++) {
  if (myCondition) {
    continue;
  }
}

    但是需要注意 return 关键字：

    return
a + b

// ASI 后变成了

return;
a + b;

    上述代码会在 return 语句后面插入一个分号，它会返回 undefined。return 后面的语句无法被访问。为了避免这个问题，可以把上述2条语句写在同一行。

    依赖 ASI 可能导致的意外问题

    如果我们不在代码中写分号，而是依赖 ASI，会偶尔遇到语义完全改变的情况。

    意外的函数调用

    // 实际的源码
const myResult = myVar1 + myVar2
(myVar3 + myVar4).toString()
// 期待的输出
const myResult = myVar1 + myVar2;
(myVar3 + myVar4).toString();
// ASI 后实际的输出
const myResult = myVar1 + myVar2(myVar3 + myVar4).toString()

    意外的属性访问

    // 实际的源码
const myResult = myFunction()
['ul', 'ol'].map(x => x + 1)
// 期望的输出
const myResult = myFunction();
['ul', 'ol'].map(x => x + 1)
// ASI 后实际的输出
const myResult = myFunction()[("ul", "ol")].map(x => x + 1);

    结语

    现在很多人选择忽略分号，让代码看起来更简洁。不过我建议始终明确写上分号，以避免引起潜在的问题。

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30948
赞同 0
评论 0 条

相关文章

  • 需要开通VIP以后页面内容才能复制怎么办？控制台禁用javascript即可 2023-12-26 67027 浏览

    问题描述有些网页上的内容我们不能直接复制，如果想要复制的话，就要充钱成为VIP以后，才能复制，比如“某某文库”...那么本文记录一下解决方案的步骤...图示如下：仰望vip大佬...解决方案如下：第一步，打开控制台，点击右上角的小齿轮图标按钮首先F12打开控制台或右击-->检查打开控制台第二步，禁用javascript即可然后就可以了复制了，不会受到任何阻碍...总结打开控制台-->点击右上角小齿

  • javascript与ECMAScript有什么关系？ 2023-12-26 68565 浏览

    ECMAScript是javascript的规格，javascript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。javascript的创造者是Netscape公司，将javascript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布文件的第一版(ECMA-262)，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。该标准从一开

  • javascript的generator 2023-12-26 63589 浏览

    1、generator是可以用来控制迭代器的函数，它主要的方法有以下三个：generator.prototype.next()返回一个由yield表达式生成的值generator.prototype.return()返回给定的值，并结束生成器generator.prototype.throw()向生成器抛出一个错误2、基本使用常规的遍历，会一次性遍历输出所有的值，但是使用了generator生成器

  • javascript的事件委托 2023-12-26 67691 浏览

    事件处理程序过多会导致页面的整体运行性能，解决的方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如：对li的click事件会冒泡到ul上，所以只需要将点击事件绑定在ul上即可。考虑性能问题，用完点击事件后，可以用removeEventListener解除绑定事件。注：addEventListener第三个参数，false表示在冒泡阶段调用事件处理程

  • javascript的跨域方法 2023-12-26 65330 浏览

    一、为什么会产生跨域同源策略是对XHR(XMLHttpRequest)的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。试图访问上述之外的资源，都会引发安全错误，除非采用被认可的跨域解决方案。二、跨域的解决方案CORS(Cross-OriginResourceSharing,跨域资源共享)图像pingJSONPwebsockets：全双工、双向通信postMessage1

  • javascript的apply、call 和 bind 2023-12-26 68277 浏览

    1、每个函数都包含有非继承而来的方法：call()、apply()。它们的作用都是在特定的作用域中调用函数，即设置函数体内this对象的值。传递参数扩充函数赖以运行的作用域2、apply()apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中第二个参数可以是Array的实例，也可以是arguments对象。例如：在这个例子中，callSum1()执行sum()函数时

  • javascript 浮点数值：0.1 + 0.2 不等于 0.3 2023-12-26 66819 浏览

    1、浮点数值所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。例如：constfloatNum=0.1;2、浮点数值的保存保存浮点数值需要的内存空间是保存整数值的2倍，因此ECMAScript会不失时机的将浮点数值转换为整数值。例如：constfloatNum1=1.;//小数点后面没有数字，解析为1constfloatNum2=1.0;//整数——解析为13、e/E

  • javascript 实现的轮播图（原理及实现） 2023-12-26 67206 浏览

    //兼容模式获取样式（不仅仅是内联样式）functiongetStyle(obj,name){//兼容模式获取样式（不仅仅是内联样式）if(window.getComputedStyle){returngetComputedStyle(obj,null)[name];}else{returnobj.currentStyle[name];}}轮播图处理：（功能实现但是比较粗糙，后续优化）

  • javascript 匿名函数 IIFE 闭包 2023-12-26 65708 浏览

    javascript中匿名函数、IIFE（ImmediatelyInvokedFunctionExpression）、闭包都是只页面加载就自己调用的匿名函数：(function(){alert("func");})();此中写法的作用在于：1、立即执行2、不污染外部命名空间3、隐藏内部的功能实现（js模块）例如下面就是js的模块示例：

    • 关注我们

      信创开放社区公众号二维码

      扫一扫关注公众号

      信创开放社区交流群

      添加我为好友，拉您入交流群！

    添加我为好友，拉您入交流群！

    请使用微信扫一扫!