什么是短路表达式?

短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。这是这两个操作符的一个重要属性。

一个最简单的例子:

  1. foo = foo||bar;

这行代码是什么意思?答案:

  1. //如果foo存在,值不变,否则把bar的值赋给foo
  2. if(!foo)
  3. foo = bar;

在javascript的逻辑运算中,0、""、null、false、undefined、NaN都会判定为false,而其他都为true。所以在上式的foo = foo||bar;中,||先计算第一个运算数,如果可以被转换成true,也就是表示foo已经存在有值,那么返回左边这个表达式的值,否则计算第二个运算数bar。

另外,即使||运算符的运算数不是布尔值,仍然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值。

当然,使用如下做法会更加严谨:

  1. if(foo) //不够严谨
  2.  
  3. if(!!foo) //更为严谨,!!可将其他类型的值转换为boolean类型

可以测试一下:

  1. var foo;
  2. var number = 1;
  3. var string = "string";
  4. var obj = {};
  5. var arr = [];
  6.  
  7. console.log(typeof(foo)); // undefined
  8. console.log(typeof(number));  //number
  9. console.log(typeof(string));  //string
  10. console.log(typeof(obj));  //object  
  11. console.log(typeof(arr));  //object
  12.  
  13. console.log(typeof(!!foo)); // boolean
  14. console.log(typeof(!!number));  //boolean
  15. console.log(typeof(!!string));  //boolean
  16. console.log(typeof(!!obj));  //boolean
  17. console.log(typeof(!!arr));  //boolean

利用这一点可以很好的符合,优化javascript工程一文中提到的,使脚本少运行或者不运行,以达到优化javascript的目的。但是需要注意的是,这样写帮我们精简了代码的同时,也带来了代码可读性的降低的缺点。所以比较好的做好是添加是适当的注释。

更多优化方法可以参看我上一篇blog:前端工程优化:javascript的优化小结

Javascript优化细节:短路表达式的更多相关文章

  1. JavaScript优化细节(一)

    1.置空Closure(闭包)引起的Memory leak滞留的Object和domain 2.用fragment实现append大量元素 var f= document.createDocument ...

  2. Javascript短路表达式

    短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短 ...

  3. Javascript 优化项目代码技巧之语言基础(二)

        上一篇随笔介绍了如何正确判断对象类型.避免变量污染,特殊值(null.undefined.NaN)的使用,以及其他Javascript中常用关键字与方法的优化,这篇随笔将着重介绍Javascr ...

  4. 深入理解javascript:揭秘命名函数表达式

    这是一篇转自汤姆大叔的文章:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 前言 网上还没用发现有人对命名函数表达式进去重复深 ...

  5. <a>标签的SEO优化细节

    <a>标签的SEO优化细节 如果需要在新窗口中打开链接,我们使用的方法是在a上加上taget=“_blank”,但很多人不知道这是不符合w3c的规范的,在使用严格的DOCTYPE(xhtm ...

  6. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  7. JavaScript中的函数表达式

    在JavaScript中,函数是个非常重要的对象,函数通常有三种表现形式:函数声明,函数表达式和函数构造器创建的函数. 本文中主要看看函数表达式及其相关的知识点. 函数表达式 首先,看看函数表达式的表 ...

  8. 前端性能优化(三)——传统 JavaScript 优化的误区

    注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...

  9. Javascript 优化

    Javascript 优化 作者:@gzdaijie本文为作者原创,转载请注明出处:http://www.cnblogs.com/gzdaijie/p/5324489.html 目录 1.全局变量污染 ...

随机推荐

  1. ASCII和16进制对照表

    十六进制代码 MCS 字符或缩写 DEC 多国字符名 ASCII 控制字符 1 00 NUL 空字符 01 SOH 标题起始 (Ctrl/A) 02 STX 文本起始 (Ctrl/B) 03 ETX ...

  2. Torch Problems: require some packages doesn't work

    I've recently got a problem. require 'cutorch' doesn't work. But it was ok yesterday, although I hav ...

  3. phpcms 服务器安全认证错误

    本人将图片的js.images.css路径转移到CDN上了,上传附件的时候就出现了 “服务器安全认证错误”的提示.   找到文件 D:\wamp\www\phpcms\phpcms\modules\a ...

  4. 在React 组件中使用Echarts

    在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的E ...

  5. EF联合查询,如何设置条件过滤从表数据

    最近在使用EF进行联合查询过程中,遇到了一件不开心的事情. 已禁用懒加载 var post = await _repository.GetMyPostById(blogId, postId).AsNo ...

  6. sysbench 压力测试

    200 ? "200px" : this.width)!important;} --> 介绍 sysbench是一个模块化.跨平台.多线程基准测试工具,主要用于测试不同系统参 ...

  7. gulp使用小结(一)

    这篇文章不会介绍 gulp 的起源.发展:不会去一个个讲解 gulp API:也不想出现大段大段的 gulpfile.js 代码:更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用 ...

  8. 允许Sublime编辑器在Ubuntu上输入中文

    Sublime Text是一款功能非常强大的轻量级代码编辑器,有关功能介绍和使用可以看我另一篇文章的描述http://www.cnblogs.com/jaxu/p/5037547.html 不过,在U ...

  9. cookie自动登录的实现

         cookie自动登录是指把用户登录的信息按期限(自定)保存在客户端,当用户请求登录时判断客户端用没有cookie对象,有的话填充值,否则登录界面的输入框为空,不进行填充.      登录界面 ...

  10. xamarin UWP自定义圆角按钮

    uwp自带的button本身不支持圆角属性,所以要通过自定义控件实现. 通过设置Button的Background=“{x:Null}”设置为Null使背景为空,再设置Button.Content中的 ...