Javascript表达式中连续的 && 和 || 之赋值区别


Posted in Javascript onOctober 17, 2010

代码如下:

function write(msg){ 
for(var i = 0; i < arguments.length; i ++){ 
document.write(arguments[i] + '<br />'); 
} 
} 
//关于 '&&' 
test1 = 1 && 2 && 3 && 4; 
test2 = '0' && 2 && 3 && 4; 
test3 = 1 && 2 && 0 && 4; 
test4 = 2 && 'i' && 'love' && 3 && 'you'; 
test5 = 'i' && 'hate' && 1 && 0 && 'you'; 
test6 = 1 && false && 'ihateyou' && '2'; 
test7 = 2 && true && 'ihatehateyou' && '23'; 
test8 = 4 && true && 'undefined' && 'true' && '1'; 
test9 = 4 && true && undefined && 'true' && '1'; 
test10 = 4 && true && 'null' && 'true' && '1'; 
test11 = 4 && true && null && 'true' && '1'; 
write(test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11); 
write('----------------------------------------------'); 
//关于 '||' 
_test1 = 1 || 2 || 3 || 4; 
_test2 = 0 || 2 || 3 || 4; 
_test3 = 0 || '0' || 8 || 4; 
_test4 = 2 || 'i' || 'love' || 0 || 'you'; 
_test5 = 0 || 'hate' || 1 || 0 || 'you'; 
_test6 = false || 0 || 'ihateyou' || '2'; 
_test7 = false || true || 'ihatehateyou' || '23'; 
_test8 = 0 || 0 || 'undefined' || 'true' || '1'; 
_test9 = 0 || 0|| undefined || 'true' || '1'; 
_test10 = 0 || false || 'null' || 'true' || '1'; 
_test11 = 0 || 0 || null || 'true' || '1'; 
write(_test1, _test2, _test3, _test4, _test5, _test6, _test7, _test8, _test9, _test10, _test11);

来看看输出结果就会明白了:

关于 ‘&&'的输出结果为:

4 
4 
0 
you 
0 
false 
23 
1 
undefined 
1 
null

每一行的编号对应上面的每一个 test。

关于 ‘||'的输出结果为:

1 
2 
0 
2 
hate 
ihateyou 
true 
undefined 
true 
null 
true

仔细对照着看的话就会清楚一些了:

多个连续的 && 的表达式中若没有 0, false, undefined, null 的话,它将取得最后一个“子表达式”的值,否则将表达式中的 0, false, undefined, null 返回。

多个连续的 || 的表达式将会取第一个“子表达式”的值,若为 0, false, undefined, null 中之一的话则取下一个“子表达式”的值,以此类推,直至找到不为 0, false, undefined, null 的“子表达式”,并将它作为整个表达式的值。

补充:

上面的似乎没有考虑一种情况,就是有一个子表达式为 '' 怎么办呢?其实可以再换一种表述方式来描述 && 和 || 的工作方式:

对于 (...) && (...) && (...) ...

从左至右遍历各个子表达式,并将每个子表达式进行 Boolean 的强制转换,若出现 Boolean(子表达式) 为 false 的情况,则整个表达式的值即为此子表达式的值(0 或 false 或 undefined 或 null 或 ''),后面的子表达式不再判断;若所有的 Boolean(子表达式) 均为 true,则整个表达式的值即为最后一个子表达式的值。

对于 (...) || (...) || (...) ...

从左至右遍历各个子表达式,并将每个子表达式进行 Boolean 的强制转换,若出现 Boolean(子表达式) 为 true 的情况,则整个表达式的值即为此子表达式的值,后面的子表达式不再“理会”;若 Boolean(子表达式) 为 false,则判断后一个子表达式的 Boolean 情况,直至找到 Boolean(子表达式) 为 true 的情况;若全部的 Boolean(子表达式) 均为 false,则返回最后一个子表达式的值(0 或 false 或 undefined 或 null 或 '')。

这里要注意:

Boolean(false) != Boolean('false'),前者为 false,而后者为 true 。

Boolean(undefined) != Boolean('undefined'),前者为 false,而后者为 true 。

Boolean(null) != Boolean('null'),前者为 false,而后者为 true 。

Boolean(0) != Boolean('0'),前者为 false,而后者为 true 。

Boolean('') == false

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
实测jquery data()如何存值
Aug 18 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
Cocos2d实现刮刮卡效果
Dec 20 Javascript
Javascript读取cookie函数代码
Oct 16 #Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 #Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 #Javascript
自己整理的一个javascript日期处理函数
Oct 16 #Javascript
理解Javascript_10_对象模型
Oct 16 #Javascript
理解Javascript_09_Function与Object
Oct 16 #Javascript
理解Javascript_08_函数对象
Oct 15 #Javascript
You might like
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
package.json配置文件构成详解
2019/08/27 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Python批量启动多线程代码实例
2020/02/18 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
承办会议欢迎词
2014/01/17 职场文书
大学社团活动策划书
2014/01/26 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
合作意向书范本
2019/04/17 职场文书