关于window.console&&console.log(123)的思考

一、JS的且运算
记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了。要理解这个,首先得明白三个知识点
第一:短路原则
这个大家都非常清楚的了,在做且运算的时候,“同真才真,一假则假”,比如
true&&true==true
true&&false==false
false&&false==false
false&&true==false

第二:JS逻辑运算中哪些为false哪些是true
在JS中,0、""、‘‘、null、false、undefined、NaN的布尔值都是为false,其余为true---请注意我说的是“布尔值”

console.log(false==false) //true
console.log(0==false) //true
console.log(""==false) //true
console.log(‘‘==false) //true
console.log(NaN==false) //false
console.log(null==false) //false
console.log(undefined==false) //false

但是如果经过boolean转换
console.log(Boolean(false)===false);
console.log(Boolean(0)===false) ;
console.log(Boolean("")===false);
console.log(Boolean(‘‘)===false);
console.log(Boolean(NaN)===false) ;
console.log(Boolean(null)===false) ;
console.log(Boolean(undefined)===false) ;
他们终于愉快的为false了

接着测试其他的:
console.log(Boolean([])===true);
console.log(Boolean({})===true);
console.log(Boolean({})===true);
console.log(Boolean(‘0‘)===true);
console.log(Boolean("0")===true);
console.log(Boolean(Function)===true);
console.log(Boolean(Object)===true);
以及非常少见的Infinity。console.log(Boolean(Infinity)===true);

第三:JS的且运算符(&&)的运算规则
理解了第一和第二,才能真正理解JS的运算规则,为什么这么说?
首先,JS的且运算是遵循短路原则的,
其次,&&两边的表达式最终是转换为布尔值,也就是说无论是{},[],"",NaN,undefined和null等等,毫无例外的取其布尔值,也就是取其Boolean()的值再进行对比。
接着,JS的且运算符特殊在于,它返回的是表达式的值,而不是表达式的布尔值

综合来讲,有表达式A1,A2,......An(n>=2),当进行且运算的时候,A1&&A2&&......&&An,从A1开始,
1.如果Boolean(Ai)===true,则执行Boolean(A(i+1)),(i>=1,i+1<=n)
1.1 如果Boolean(A(i+1))===false,返回A(i+1)的值
1.2 如果i+1=n返回A(i+1)的值
1.3 如果Boolean(A(i+1))===true,则重复执行步骤1
2.如果Boolean(Ai)===false,不执行Boolean(A(i+1)),(i>=1),返回Ai的值

举例如下
var a=1&&2 //返回2
var a=0&&2 //返回0
var a=1&&"test" //返回"test"
var a=""&&1 //返回""
var a=1&&undefined //返回undefined
var a=1&&null //返回null
var a=1&&[]&&"test"//返回"test"
var a=1&&[]&&undefined//返回undefined
why?
上面三个点已经涉及到了,比如var a=1&&undefined 其背后的逻辑如下
1.第一个表达式,1,不是布尔值,因此转换为布尔值Boolean(1)
2.Boolean(1)===true,因此执行下一个表达式undefined
3.undefined不是布尔值,因此转换为布尔值Boolean(undefined),Boolean(undefined)===false
4.运算符两边比较true!==false
3.返回布尔值为false的表达式的值,此例是undefined,赋值给a

再看另外一个例子,var a=[]&&"test"
1.第一个表达式,[],不是布尔值,因此转换为布尔值Boolean([])
2.Boolean([])===true,因此执行下一个表达式"test"
3."test"不是布尔值,因此转换为布尔值Boolean("test"),Boolean("test")===true
4.运算符两边比较true===true
3.因为整个求值的结果为true,那么则返回最后一个布尔值为true的表达式的值,此例是"test",赋值给a

在现代浏览器中,比如chrome,因为JS引擎实现了console,并且存在console.log这个属性,所以
1.第一个表达式,window.console,不是布尔值,因此转换为布尔值Boolean(window.console)
2.Boolean(window.console)===true,因此执行下一个表达式console.log(123)
3.执行console.log(123),打印了123
4.console.log(123)没有返回值,或者说console.log(123)的返回值是undefined
5.undefined不是布尔值,因此转换为布尔值Boolean(undefined),Boolean(undefined)===false
6.运算符两边比较true!==false
7.返回布尔值为false的表达式的值,此例是undefined,赋值给a

如果是不支持console的浏览器,那么
1.第一个表达式,window.console,不是布尔值,因此转换为布尔值Boolean(window.console)
2.Boolean(window.console)===false,因此不执行下一个表达式
3.返回布尔值为false的表达式的值,此例是undefined

二、巧用JS的且运算
巧用且运算,的确能减少不少代码,比如window.console&&console.log(123)用if来描述的话,如下程序
if(window.console){
if(&console.log){
console.log(123)
}
}
再看一个例子,常用的根据时间显示问候语,0点到6点,显示“夜深了”;6点到12点显示“上午好”;12点到18点显示“下午好”;18点到23点显示“晚上好”
function showTime(curTime){
var greeting="";
if(curTime>=0&&curTime<6){
greeting="夜深了";
}else if(curTime>=6&&curTime<12){
greeting="上午好";
}else if(curTime>=12&&curTime<18){
greeting="下午好";
}else {
greeting="晚上好";
}
return greeting;
}
console.log(showTime(5));
console.log(showTime(9));
console.log(showTime(22));

如果用且运算符号的话
function showTime2(curTime){
var greeting=( (curTime>=0&&curTime<6) && "夜深了") || ( (curTime>=6&&curTime<12) && "上午好")|| ( (curTime>=12&&curTime<18) && "下午好") || ( (curTime>=16) && "晚上好")
return greeting;
}
console.log(showTime2(5));
console.log(showTime2(9));
console.log(showTime2(22));
一行代码就搞定了一堆的if,当然,在精简代码的同时,也会降级了代码的可读性,如果要用且运算,建议写上适当的注释以提高代码的可读性。

另外,在JS中,0,"",‘‘以及NaN的布尔值也是为false,如果程序仅仅是判断undefined和null, 用且运算的话,因为扩大了false的判断范围,会导致不可预测的BUG。
如果仅仅是判断undefined和null,还是老实的使用if吧

时间: 2024-08-09 22:02:36

关于window.console&&console.log(123)的思考的相关文章

从window.console&amp;&amp;console.log(123)浅谈JS的且运算逻辑(&amp;&amp;)

从window.console&&console.log(123)浅谈JS的且运算逻辑(&&) 作者:www.cnblogs.com  来源:www.cnblogs.com  发布日期:2015-03-01 一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三个知识点第一:短路原则这个大家都非常清楚的了,在做且运算的时候,“同真

console.log的使用

一.Console API Console.assert() 判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息. Console.count() 以参数为标识记录调用的次数,调用时在console打印标识以及调用次数. Console.debug() console.log方法的别称,使用方法可以参考Console.log() Console.dir() 打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性. Console.error() 打印一条错误信

js调试console.log使用总结图解

一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1 如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么.我的目的只是让你认识控制台,让你入门调试,之后的路还得靠你们自己走. 不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器 搜狗浏览器 等等,只要按 F12 就能打开控制台. 其实对于这 F1

远程log调试工具console.re

http://console.re/ https://github.com/kurdin/console-remote 前文提到在手机微信上调试代码很痛苦,看不到日志.为了看到日志,得把日志发到服务器,再搞个东西看服务器上的日志.console.re 就是这么一个服务. 主要使用步骤如下: 在html文件中引入<script src="http://console.re/connector.js" data-channel="<your-channel-name&

(转)Javascript中console.log()用法

原文地址应该是这个吧:http://my.oschina.net/junn/blog/142728 要想在IE下使用加在js最上面 加上下面两句话就可以了 window.console = window.console || {}; console.log || (console.log = opera.postError); 然后在下面的js代码中就可以使用 console.log.下图 IE开发者模式下的console.log

console.log 被重写覆盖以后如何恢复

有时候一些项目中会使用类似如下的方式覆盖掉console对象: var console = {}; console.log = function(){}; console.info = function(){}; window.console = console; 这个时候如果需要在控制台调试一些接口(如ajax请求),就不方便使用console来显示一些返回数据了. 找了一下,发现可以使用如下方式暂时恢复console的功能. (function(){ var iframe = documen

前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开

console.log高级用法

1 //基本用法 2 console.log('最常见用法\n换行'); 3 console.error('输出错误信息 会以红色显示'); 4 console.warn('打印警告信息 会以黄色显示'); 5 console.info('打印一般信息'); 6 console.clear();//清空上面的console显示 7 8 9 10 //进阶用法 11 //console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印 12 consol

给你的站点加入 console.js

本文仅先给使用console调试的FE同学,假设你还不知道console是什么.或者还停留在alert阶段,那就不要浪费时间了,say bay bay! 你是否试程序的过程中用过console.log(***),发如今现代浏览器里执行好好的,到了ie里却出现莫名其妙的错误,你全然不知道为什么. 或者你知道在ie下console不能使用.每次上线前都要凝视掉console的代码,一不小心漏掉了一个. 假设有过上面类似的情况,和我有着相同的烦恼,那恭喜你.console.js就是为你准备的.(假设你