总结JavaScript中布尔操作符||与&&的使用技巧_javascript技巧

你是否看到过这样的代码:a=a||""; 可能javascript初学者会对此感到茫然。今天就跟大家分享一下我的一些心得。
其实:
 

a=a||"defaultValue";

a=a||"defaultValue"; 

与:

if(!a){
a="defaultValue";
}
if(!a){
  a="defaultValue";
}

 
和:


if(a==null||a==""||a==undefined){
a="defaultValue";
}

if(a==null||a==""||a==undefined){
  a="defaultValue";
} 

 
是等价的!
为了弄清这个问题,首先我们必须了解一个问题:javascript中数据类型在转换为bool类型时发生了什么。
 
在javascript中,数据类型可以分为“真值”和“假值”。顾名思义,真值转换为bool时值为true;假值转换为bool时值为false。下表罗列了一些常见的数据类型转换为bool时的值:
 
在if表达式中,javascript首先将条件表达式转换为bool类型,表达式为真值则执行if中的逻辑,否则跳过。
 
于是有了:
 

if(!a){
a="defaultValue";
}

if(!a){
  a="defaultValue";
} 

 
下面我们再来看“&&”、“||”两个表达式。
由于javascript是弱类型语言,所以在javascript中这两个表达式可能跟其他语言(比如java)中不太一样。
在javascript中,“&&”运算符运算法则如下:
 
如果&&左侧表达式的值为真值,则返回右侧表达式的值;否则返回左侧表达式的值。
 
这就是说:

var i=""&&"真值";//->i=""
i="真值"&&"其他真值";//->i="其他真值"
i="真值"&&"";//->i=""
var i=""&&"真值";//->i=""
i="真值"&&"其他真值";//->i="其他真值"
i="真值"&&"";//->i=""

 
“||”运算符的运算法则如下:
 
如果||左侧表达式的值为真值,则返回左侧表达式的值;否则返回右侧表达式的值。
 
这就是说:
 

var i=""||"真值";//->i="真值"
i="真值"||"其他真值";//->i="真值"
i="真值"||"";//->i="真值"
var i=""||"真值";//->i="真值"
i="真值"||"其他真值";//->i="真值"
i="真值"||"";//->i="真值"

 
 
于是,就可以理解:
 

a=a||"defaultValue";
a=a||"defaultValue";

的逻辑了。如果a为假值(等于null、空字符串……),则将"defaultValue"赋给a;否则将a的值赋给a本身。
 
 
下面我们运用||、&&来简化程序:
 

var parameter="";
function test(parameter){
//return 真值
return true;
}
//真值操作
function operate1(parameter){
return "真值操作";
}
//假值操作
function operate2(parameter){
return "假值操作";
}
var result=test(parameter)&&operate1(parameter);
result=test(parameter)||operate2(parameter);
//等价于
result=test(parameter)?operate1(parameter):operate2(parameter);
alert(result);//真值操作
//也等价于
if(test(parameter)){
result=operate1(parameter);
}else{
result=operate2(parameter);
}
alert(result)//真值操作

再比如:

<script language="javascript" type="text/javascript">
  var a =1;
  var b = 0;
  var c = 3;
  var d = a && b && c;
  window.alert(d);
</script> 

输出了d的值为0,如果把d的值改为不等于0的值,那么d将始终是3

所以js中的&&返回的是第一个不为真的值即是0(对象亦可),如果全部都是真那么返回的最后一个值。
    

<script language="javascript" type="text/javascript">
  var a =0;
  var b = 3;
  var c = 5;
  var d = a || b || c;
  window.alert(d);
</script>

输出了d的值为3,如果把b的值改为0,那么d将始终是5.如果全部都改为0,那么d的值是0.</p><p>所以js中的||返回的是第一个不为false的值即是0(对象亦可),如果全部都是false那么返回的最后一个值。 
应用:

比如要简单的验证邮箱格式,只有‘@''和‘.''都同时存在是才算格式正确,否则提示错误:

该用哪个呢?让我们分析一下:

if (form1.elements[3].value.indexOf("@",0)==-1 && form1.elements[3].value.indexOf(".",0)==-1){ alert("EMAIL地址输入错误!")}

如果都存在:&&两边都是假。&&返回第一个为真的值,所以if判断条件是假if后面的语句不执行!不会提示用户。

只有至少@和。存在一个的是时候if的条件才为真,才提示用户错误。

两个都存在的时候,返回最后一个的值,是真 if判断条件成立if语句执行。提示用户错误。

所以用&&明显错误!

要换成

if (form1.elements[3].value.indexOf("@",0)==-1 || form1.elements[3].value.indexOf(".",0)==-1){ alert("EMAIL地址输入错误!") }

分析:

如果两个都存在:全部为false,返回是false 所以if条件不成立,语句不执行,不提示错误!

如果只有一个存在:返回第一个不为false的值。返回为true 提示错误!

两个都不存在:返回第一个不为false的值,返回是true 提示错误!

所以应该用|| 

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, ||
&&
布尔操作符、布尔逻辑操作符有哪些、布尔逻辑操作符、javascript 操作符、javascript位操作符,以便于您获取更多的相关知识。

时间: 2024-09-13 11:24:31

总结JavaScript中布尔操作符||与&&的使用技巧_javascript技巧的相关文章

javascript中加号(+)操作符的一些神奇作用_javascript技巧

javascript是一门神奇的语言,这没神奇的语言中有一个神奇的加操作符. 常用的加操作符我们可以用来做: 1.加法运算,例如:alert(1+2); ==>32.字符串连接,例如:alert("a"+"b");==>"ab" 高级一点的还有"+=",也是做以上两种操作的. 昨天在javascript丛林群里问了问题:怎么把"2000-09-11 19:22"这个日期格式字符串转换成毫秒数?

解析JavaScript中delete操作符不能删除的对象_javascript技巧

ES3 中,delete在8.6.2.5及11.4.1有介绍,如下 有一些信息, 1.实现上delete操作符会调用引擎内部的[[Delete]]方法 2.[[Delete]]在8.6.2里定义 3.删除的属性有个DontDelete的特性,如果有,delete时直接返回false 搜索"DontDelete",会发现有很多,如下都不能delete 1, 激活对象的arguments对象 (10.1.6) 复制代码 代码如下: function func() {     delete

javascript中typeof操作符和constucor属性检测_javascript技巧

*#type.js 复制代码 代码如下: function Person(name, age) {  this.name = name;  this.age = age; } var d = {an: 'object'}; var a = ['apple', 'banana']; var f = function() {}; var s = 'David'; var n = 33; var b = true; var o = new Object(); var person = new Pers

浅析Javascript中bind()方法的使用与实现_javascript技巧

我们先来看一道题目 var write = document.write; write("hello"); //1.以上代码有什么问题 //2.正确操作是怎样的 不能正确执行,因为write函数丢掉了上下文,此时this的指向global或window对象,导致执行时提示非法调用异常,所以我们需要改变this的指向 正确的方案就是使用 bind/call/apply来改变this指向 bind方法 var write = document.write; write.bind(docum

JavaScript中的this关键字使用方法总结_javascript技巧

在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代. 它可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式.JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用. 1.作为对象方法调用 在 JavaScript 中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法,在使用这种调用方式时,this 被

探究JavaScript中的五种事件处理程序方式_javascript技巧

我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务器运算负载的一种手段. 通俗地理解,事件就是用户或浏览器自身执行的某种操作.而事件处理程序即为响应某个事件的函数.抽出主干,即事件处理程序为函数.  我们又把事件处理程序称为事件侦听器.  事件处理程序是以"on"开头的,因此对于事件on的时间处理程序即为onclick.时间处理程序在JavaScript中大致有五种,下面会根据这五种

JavaScript中的null和undefined区别介绍_javascript技巧

JavaScript中存在2个代表信息不存在的特殊值:null和undefined.个人认为可以从以下角度来理解这两个特殊值之间的区别: 1.null代表有存储信息的容器(比如之前被赋过值的变量),但该容器中的内容为空. 2.undefined代表不存在用于存储信息的容器. JavaScript中的null与其它多数编程语言中的null没有什么区别,基本用于表示信息值为空:而在JavaScript中下述情况下表达式返回结果为undefined: 1.从未被赋过值的变量. 2.访问某个对象不存在的

javascript中的altKey 和 Event属性大全_javascript技巧

下面给大家介绍javascript中altkey属性,具体介绍如下所示: altKey属性的定义和用法: 此属性返回一个布尔值.指示在指定的事件发生时,Alt键是否被按下并保持住了. 语法结构: event.altKey=true|false|1|0 浏览器支持: 1.IE浏览器支持此属性. 2.火狐浏览器支持此属性. 3.Opera浏览器支持此属性. 4.谷歌浏览器支持此属性. 实例代码: <!DOCTYPE html> <html> <head> <meta

JavaScript中:表达式和语句的区别[译]_javascript技巧

1.语句和表达式 JavaScript中的表达式和语句是有区别的.一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数.下面的每行代码都是一个表达式: myvar3 + xmyfunc("a", "b")语句可以理解成一个行为.循环语句和if语句就是典型的语句.一个程序是由一系列语句组成的.JavaScript中某些需要语句的地方,你可以使用一个表达式来代替.这样的语句称之为表达式语句.但反过来不可以:你不能在一个需要表达式的地方放一