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 相关文章推荐
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JavaScript函数详解
Feb 27 Javascript
js实现简单计算器
Nov 22 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
Vue学习之组件用法实例详解
Jan 06 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 checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
文字幻灯片
2006/06/26 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
python getopt 参数处理小示例
2009/06/09 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
详解flask入门模板引擎
2018/07/18 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Numpy之reshape()使用详解
2019/12/26 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Django日志及中间件模块应用案例
2020/09/10 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
调解协议书
2014/04/16 职场文书
运动会加油口号
2014/06/07 职场文书
公司离职证明标准格式
2014/11/18 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
工作保证书怎么写
2015/02/28 职场文书