UDN-企业互联网技术人气社区

板块导航

浏览  : 503
回复  : 3

[实例] JavaScript短路原理精简代码

[复制链接]
山外青山的头像 楼主
发表于 2015-9-7 16:16:50 | 显示全部楼层 |阅读模式
本帖最后由 山外青山 于 2015-9-7 16:16 编辑

     js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。

     在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true.

     ||先计算第一个运算数,如果可以被转换成true,则返回左边这个表达式的值,否则计算第二个运算数。即使||运算符的运算数不是布尔值,任然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值。  
     利用它对非布尔型的值会将其返回的特性:对非布尔型的运算数使用||,用于选取一组备选值中的第一个定义了的并且非空的值(第一个为非false的值)

例:
  1. var max = max_width || obj.max_width || 500 ;
复制代码

     var attr = attr || "";这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值,在给函数的参数定义一个默认值的时比较有用。

&&,它先计算第一个表达式,若为假,就不会去处理第二个表达;否则继续处理后继表达式。从左到右选取表达式的第一个为非true的表达式的值,如果一直未找到则返回最后一个表达式的值。

例:(其中的味道还需要细心琢磨)

  1. 2 && 's1' && '123' && 'sss' 表达式的值等于 'sss'
  2. 2 && 's1' && '' && 'sss' 表达式的值等于 ''
  3. 2 && 's1' && NaN && 'sss'表达式的值等于 NaN

  4. if(a >=5){
  5. alert("你好");
  6. }
复制代码

可以简成:
  1. a >= 5 && alert("你好");
复制代码

typeof 5和typeof !!5的区别,这是一种更严谨的写法,!!的作用是把一个其他类型的变量转成的bool类型。例如, if(!!attr) => if(attr)

JS中的startWith功能的巧妙实现,alert(!'asdf'.indexOf('s')) =》 !0 = true

总结一句话,&&取最后值,||取第一满足的值,这种代码书写方式高效便捷,但可读性差,大家可以按照自己的习惯灵活使用。

发表于 2015-9-7 23:15:08 | 显示全部楼层
太有启发啦!谢谢楼楼!
使用道具 举报

回复

发表于 2015-9-22 09:05:40 来自手机 | 显示全部楼层
无论是不是沙发都得回复下
使用道具 举报

回复

发表于 2015-9-25 02:13:30 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部