当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS分号 惹的坑

JS分号 惹的坑

2018年03月07日  | 移动技术网IT编程  | 我要评论
JS中会自动清除句子和句子之间的空格以及tab缩进， 这样就可以允许用户编写的代码更加随性和更加可读， 在该行代码解析的时候如果该行代码可以解析， 就会在该行代码最后自动填写分号，如果该行代码无法解析就会把该行代码和下一句代码合并， 直到代码可以解析； Js中如果一个语句以 ( [ / + - 开头 ...

　　JS中会自动清除句子和句子之间的空格以及tab缩进， 这样就可以允许用户编写的代码更加随性和更加可读， 在该行代码解析的时候如果该行代码可以解析， 就会在该行代码最后自动填写分号，如果该行代码无法解析就会把该行代码和下一句代码合并， 直到代码可以解析；

　　Js中如果一个语句以  (  [ / + -  开头，就有可能与上一句合在一起解析

　　也因为js会自动添加 “;” , 写js不注意就养成了不好的习惯， 代码有时候没事， 跑起来却出了错；

　　比如，少了一个分号就报错了；

运行下面代码

var a
y = 1+a
(a+y).toString();

 

　　我们期望他这么走：

运行下面代码

var a
y = 1+a;
(a+y).toString();

 

　　实际上是这样的：

运行下面代码

var a
y = 1+a(a+y).toString();

 

 

 

　　比如,这个也是因为少了一个分号

运行下面代码

var a = 0
[a,2,3].forEach(function(){})

 

　　我们期望他这么走的：

运行下面代码

var a = 0;
[a,2,3].forEach(function(){})

　　实际上是这样的：

运行下面代码

var a = [a,2,3].forEach(function(){})

 

 

　　也因为js的自动添加分号机制，有下面的问题， 虽然很少人这么写：

运行下面代码

x = 0;
y = 0;
x
++
y;

　　我们期望的是这样的：

运行下面代码

x = 0;
y = 0;
x++;
y;

　　实际上是这样的:

运行下面代码

x = 0;
y = 0;
x;
++y;

 


　　js并不是所有的换行都添加分号， 只有缺少了分号无法执行的时候才添加分号，如：

运行下面代码

var a
b
=
3
console.log(b);

 

 

 

 

　　也因为js的自动添加分号机制；

运行下面代码

function(){}() 这句话会变成这样：
function(){};
();

　　如果期望他正常执行，();

运行下面代码

复制代码
// 下面2个括弧()都会立即执行
(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的

// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的
// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
// 不过，请注意下一章节的内容解释

var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();

// 如果你不在意返回值，或者不怕难以阅读
// 你甚至可以在function前面加一元操作符号

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率
// http://twitter.com/kuvos/status/18209252090847232

new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()
复制代码

 　　

　　如果有返回值， 比如return， break ， continue的代码后面也不能换行， 导致维护的时候出了问题都无从找起；

运行下面代码

复制代码
//如果这么写，实际上return的是空值;
+function(){
    return 
    {a:1}
}();

//这个才是对的
+function(){
    return  {a:1}
}()

 

 

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
推荐阅读
Jsp+Servlet实现简单登录注册查询 Jsp+Servlet实现简单登录注册查询
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能 vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Vue实现前端页面缓存、分页记忆、性能最大化之终结篇！ Vue实现前端页面缓存、分页记忆、性能最大化之终结篇！
bootstrap table 多选框分页保留示例代码 bootstrap table 多选框分页保留示例代码
大家感兴趣的文章
移动技术网