javascript运算符——逻辑运算符
2016-06-26 07:59
337 查看
×
目录
[1]逻辑非 [2]逻辑与 [3]逻辑或
逻辑非对操作数转为布尔类型的转换类型与Boolean()转型函数相同,只不过最后再将其结果取反。而如果同时使用两个逻辑非操作符,实际上就会模拟Boolean()转型函数的行为
逻辑非运算符常常用于控制循环
逻辑与操作可以应用于任何类型的操作数,而不仅仅是布尔值。如果其中一个操作数不是布尔值,则逻辑与操作不一定返回布尔值
逻辑与操作属于短路操作,如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值
对于逻辑与而言,如果第一个操作数是false,则无论第二个操作数是什么值,结果都是false,则返回第一个操作数;如果第一个操作数为true,则结果的真假和第二个操作数的真假相同,则返回第二个操作数
逻辑与运算符可以多个连用,返回第一个布尔值为false的表达式的值
关系运算符的优先级比逻辑与(&&)和逻辑或(||)的优先级高,所以类似表达式可以直接书写,不用补充圆括号
可以使用逻辑与运算符来取代if结构
逻辑与运算符常常用于回调函数使用中
同样地,逻辑或操作也可以应用于任何类型的操作数,而不仅仅是布尔值。如果其中一个操作数不是布尔值,则逻辑或操作不一定返回布尔值
逻辑或操作也属于短路操作,如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值
对于逻辑或而言,如果第一个操作数是true,则无论第二个操作数是什么值,结果都是true,则返回第一个操作数;如果第一个操作数是fales,则结果的真假和第二个操作数的真假相同,则返回第二个操作数
同样地,逻辑或运算符也可以多个连用,返回第一个布尔值为true的表达式的值
逻辑或运算符常用于为变量设置默认值
【2】 阮一峰Javascript标准参考教程——语法——布尔运算符 http://javascript.ruanyifeng.com/
【3】 W3School-Javascript高级教程——ECMAScript逻辑运算符 http://www.w3school.com.cn/
【4】《javascript权威指南(第6版)》第4章 表达式和运算符
【5】《javascript高级程序设计(第3版)》第3章 基本概念
【6】《javascript DOM编程艺术(第2版)》第2章 Javascript语法
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
目录
[1]逻辑非 [2]逻辑与 [3]逻辑或
前面的话
逻辑运算符对操作数进行布尔运算,经常和关系运算符一样配合使用。逻辑运算符将多个关系表达式组合起来组成一个更复杂的表达式。逻辑运算符分为逻辑非'!'、逻辑与'&&'、逻辑或'||'3种,本文将介绍这三种逻辑运算符逻辑非
逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值。无论这个值是什么数据类型,这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换成一个布尔值,然后再对其求反逻辑非对操作数转为布尔类型的转换类型与Boolean()转型函数相同,只不过最后再将其结果取反。而如果同时使用两个逻辑非操作符,实际上就会模拟Boolean()转型函数的行为
console.log(!!undefined);//false console.log(!!null);//false console.log(!!0);//false console.log(!!-0);//false console.log(!!NaN);//false console.log(!!'');//false console.log(!!false);//false
console.log(!!{});//true console.log(!![]);//true console.log(!!new Boolean(false));//true console.log(!!false);//false console.log(!!new Boolean(null));//true console.log(!!null);//false
逻辑非运算符常常用于控制循环
//Boolean 变量(bFound)用于记录检索是否成功。找到问题中的数据项时,bFound 将被设置为true,!bFound将等于false,意味着运行将跳出while循环 var bFound = false; var i = 0; while (!bFound) { if (aValue[i] == vSearchValues) { bFound = true; } else { i++; } }
逻辑与
逻辑与运算符由两个和号(&&)表示,有两个操作数,只有在两个操作数都为true时,结果才返回true,否则返回false//逻辑与(&&)的真值表 第一个操作数 第二个操作数 结果 true true true true false false false true false false false alse
逻辑与操作可以应用于任何类型的操作数,而不仅仅是布尔值。如果其中一个操作数不是布尔值,则逻辑与操作不一定返回布尔值
逻辑与操作属于短路操作,如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值
对于逻辑与而言,如果第一个操作数是false,则无论第二个操作数是什么值,结果都是false,则返回第一个操作数;如果第一个操作数为true,则结果的真假和第二个操作数的真假相同,则返回第二个操作数
//除了false、undefined、null、+0、-0、NaN、''这7个假值,其余都是真值 console.log('t' && ''); //因为't'是真值,所以返回'' console.log('t' && 'f'); //因为't'是真值,所以返回'f' console.log('t' && 1 + 2); //因为't'是真值,所以返回3 console.log('' && 'f'); //因为''是假值,所以返回'' console.log('' && ''); //因为''是假值,所以返回''
var i = 1; var result = (true && i++); console.log(result,i);//因为true是真值,所以执行i++,i是2,result是1 var i = 1; var result = (false && i++); console.log(result,i);//因为false是假值,所以不执行i++,i是1,result是false
逻辑与运算符可以多个连用,返回第一个布尔值为false的表达式的值
console.log(true && 'foo' && '' && 4 && 'foo' && true);// ''
关系运算符的优先级比逻辑与(&&)和逻辑或(||)的优先级高,所以类似表达式可以直接书写,不用补充圆括号
if(a+1==2 && b+2==3){ //Todo }
可以使用逻辑与运算符来取代if结构
if (a == b) { doSomething(); } // 等价于 (a == b) && doSomething();
逻辑与运算符常常用于回调函数使用中
//若没有给参数a传值,则a为默认的undefined,是假值,所以不执行a(),防止报错,如果给参数a传值,则执行函数a() function fn(a){ if(a){ a(); } } //等价于 function fn(a){ a && a(); }
逻辑或
逻辑或运算符由两个竖线(||)表示,有两个操作数,只有在两个操作数都是false时,结果才返回false,否则返回true//逻辑或(||)的真值表 第一个操作数 第二个操作数 结果 true true true true false true false true true false false false
同样地,逻辑或操作也可以应用于任何类型的操作数,而不仅仅是布尔值。如果其中一个操作数不是布尔值,则逻辑或操作不一定返回布尔值
逻辑或操作也属于短路操作,如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值
对于逻辑或而言,如果第一个操作数是true,则无论第二个操作数是什么值,结果都是true,则返回第一个操作数;如果第一个操作数是fales,则结果的真假和第二个操作数的真假相同,则返回第二个操作数
console.log('t' || '');//因为't'是真值,所以返回"t" console.log('t' || 'f');//因为't'是真值,所以返回"t" console.log('' || 'f');//因为''是假值,所以返回"f" console.log('' || '');//因为''是假值,所以返回""
var i = 1; var result = (true || i++); console.log(result,i);//因为true是真值,所以不执行i++,result是true,i是1 var i = 1; var result = (false || i++); console.log(result,i);//因为false是假值,所以执行i++,i是2,result是1
同样地,逻辑或运算符也可以多个连用,返回第一个布尔值为true的表达式的值
console.log(false || 0 || '' || 4 || 'foo' || true);// 4
逻辑或运算符常用于为变量设置默认值
//如果没有向参数p传入任何对象,则将该参数默认设置为空对象 function fn(p){ p = p || {}; }
参考资料
【1】 ES5/表达式 https://www.w3.org/html/ig/zh/wiki/ES5/expressions【2】 阮一峰Javascript标准参考教程——语法——布尔运算符 http://javascript.ruanyifeng.com/
【3】 W3School-Javascript高级教程——ECMAScript逻辑运算符 http://www.w3school.com.cn/
【4】《javascript权威指南(第6版)》第4章 表达式和运算符
【5】《javascript高级程序设计(第3版)》第3章 基本概念
【6】《javascript DOM编程艺术(第2版)》第2章 Javascript语法
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- 使用Chartjs
- js判断一个对象为数组的方法
- javaScript学习基础篇(2)(弹框,日期)
- JavaScript Window浏览器对象模型方法与属性汇总
- js获取浏览器窗口属性
- 将json形式的时间字符串转换成正常的形式
- JavaScript直播评论发弹幕切图功能点集合效果代码
- 基于JavaScript实现单选框下拉菜单添加文件效果
- JavaScript类型系统之布尔Boolean类型详解
- JavaScript中Form表单技术汇总(推荐)
- 用JS实现图片轮播效果代码(一)
- 用JS实现轮播图效果(二)
- JavaScript 中的命名空间
- js 的 prototype
- JS发布订阅模式
- JavaScript的传值、传址
- 【06-23】js动画学习笔记01
- javascript的原型
- JavaScript
- JS的onBlur事件与onfocus事件