你肯定见到过这样的代码:a = a||"xxx".

它其实就等价于下面三种形式的代码:

a = a || "xxx";

与:

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

和:

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

如何理解三种代码。首先必须理解一个问题: javascript 中的数据类型在与bool类型转换时候发生了什么?

javascript中,数据类型可以分为 “真值” 和 “假值”。也就是说,真值转换为bool类型时,为true; 假值转换为bool类型时,为false。下列为了一些常见的数据类型转为bool类型时的值:

数据类型 转换为bool后的值
null FALSE
undefined FALSE
Object TRUE
function TRUE
0 FALSE
1 TRUE
0、1之外的数字 TRUE
字符串 TRUE
""(空字符串) FALSE

在 if表达式中,javascript 首先将条件表达式转换为bool类型,表达式为真值则执行 if 中的逻辑, 否则跳过。

那么,再来看看 “&&” 和 “||” 这两个javascript 表达式。 javascript 是若类型预言,所以在javascript中这两个表达式可能跟其他语言中不太一样。

&& 的运算法则如下:

如果 && 左侧表达式的值为真值,则返回右侧表达式的值;否则返回左侧表达式的值。

也就是说:

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

|| 的运算法则如下:

如果|| 左侧表达式的值为真值,则返回左侧表达式的值;否则返回右侧表达式的值。

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

这样也就可以理解 a = a || "xxx"; 的逻辑了:如果 a 为假值 (等于null, 空字符串 "" ....),则 "xxx" 赋给 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) //真值操作

JACK

@@ 12/11/2014 NJ USA

  

JavaScript - javascript 中的 "||" 与 "&&" 的理解与灵活运的更多相关文章

  1. 图说js中的this——深入理解javascript中this指针

    没搞错吧!js写了那么多年,this还是会搞错!没搞错,javascript就是回搞错! ………… 文章来源自——周陆军的个人网站:http://zhoulujun.cn/zhoulujun/html ...

  2. 对于JavaScript中this关键字的理解

    这是我第二遍学this了,第一遍学的懵懵的.this指哪里都是凭我一个男人的直觉然后控制台输出看看对不对. 刚查了书.博客.视频.理解差不多了.毕竟菜鸡me: 一.首先介绍下什么是this this是 ...

  3. javascript学习中自己对作用域和作用域链理解

    在javascript学习中作用域和作用域链还是相对难理解些,下面我关于javascript作用域和作用域链做一下详细介绍,给各位初学者答疑解惑. 首先我们介绍一下什么是作用域?  从字面上理解就是起 ...

  4. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  5. JavaScript "自"运行-setInertval()和setTimeout()理解

    setInterval()和clearInterval() var result = "Y"; function onOk() { var tid = setInterval(fu ...

  6. Javascript Jquery 中的数组定义与操作_子木玲_新浪博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  8. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  9. JavaScript 原型中的哲学思想

    学习JavaScript过程中,原型问题一直让我疑惑许久,那时候捧着那本著名的红皮书,看到有关原型的讲解时,总是心存疑虑.当在JavaScript世界中走过不少旅程之后,再次萌发起研究这部分知识的欲望 ...

随机推荐

  1. JQuery ajax url传值与data传值的区别

    url传中文,乱码,即便charset为 UTF-8, $.ajax({    type: "POST",    cache: false,    url: "/Prod ...

  2. ubuntu14.04中文楷体变默认字体

    使用ubuntu以来,最让人头疼的事情就是在英文系统里面使用中文,一般中文字体都很难看,要么有锯齿,要么就是楷体.经过网上搜索找到一堆方法.一个个尝试之后觉得以下方式是最简单有效的. 1.安装font ...

  3. Django站点管理--ModelAdmin

    class AuthorAdmin(admin.ModelAdmin): list_display=('name', 'age', 'sex') #指定要显示的字段 search_fields=('n ...

  4. H5图片裁剪升级版(手机版)

    前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...

  5. struts2学习笔记之二:基本环境搭建

    学习struts2有一段时间了,作为一个运维人员学习的时间还是挺紧张的,写这篇文件为了方便以后复习时使用 环境: MyEclipse 10 tomcat6 jdk1.6   首先建立一个web项目,并 ...

  6. 我和Java的故事-------第1弹

    前言:兴趣是学习任何新知识最好的老师 --------------------------------------------------------------------------------- ...

  7. This in JavaScript

    声明 本文仅为读书笔记并致力于理解Js中的this关键字.如有雷同,纯属巧合.原因有二,其一:有幸看了同一本书,其二:this这玩意已被说烂了~ 为什么要用this? this提供了优雅的方式隐式传递 ...

  8. 进度的Block在子线程调用

    [_pictureView sd_setImageWithURL:[NSURL URLWithString:item.image2] placeholderImage:nil options:SDWe ...

  9. ios之VFL的补充(三)

    @"|-50-[buttonA(80@100)]-[buttonB(90@200)]-50-|" 这条语句的含义是:“左右边距都为50,中间有两个按钮,相隔缺省宽度,一个控件宽度为 ...

  10. jquery判断checkbox是否选中及改变checkbox状态(转)

    jquery判断checked的三种方法:.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false.prop('c ...