js中的&& ||运算符与if语句

这种&&、||运算符来写if语句在某些人口中也被称为是短路写法。最初在网上学习这种写法时,看到了一个例子:

var add_level = 0;

if(add_step == 5){

add_level = 1;

}

else if(add_step == 10){

add_level = 2;

}

else if(add_step == 12){

add_level = 3;

}

else if(add_step == 15){

add_level = 4;

}

else {

add_level = 0;

}

这种if else语句是最长见的写法,也是最为简单易懂的写法,但缺点是代码太多了。

于是可以使用switch语句:

var add_level = 0;

switch(add_step){

case 5 : add_level = 1;

break;

case 10 : add_level = 2;

break;

case 12 : add_level = 3;

break;

case 15 : add_level = 4;

break;

default : add_level = 0;

break;

其实switch语句已经非常的精简了,如果把其中的add_step==15,这种 “=” 条件改为 “>” 这种不等条件,那么switch语句就无法实现了。

接下来我们再来看看&&、||运算符的写法:

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

非常的精简,只用了一行代码就实现了。

是这段代码,或者说是这个例子让&&||运算符写法进入了我的眼球。但也同样这这个例子,让我在理解这种写法时走了不少弯路。

看完这个例子后,我曾经一度的以为    &&前的内容是if()内的判断条件,后面的则是条件成立后的执行代码,而||则代表着else{}。

这是大错特错,下面我就来讲一下,&&、||运算符的本质:

就拿下面这段代码来说  var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

这其实就是在进行 ”与“ ”或“判断。

首先从左向右进行判断,如果add_step==5运行结果为true,那就是true&&1,结果就是1,被判断为真(但因为是作为数字赋值给变量,所以虽然被判断为真,但却不会被转换为true)。

而后面接的又是||运算符,当前面被判断为真时就不会再向后进行运算。所以最后的结果就是1,然后被赋值给add_step。

而如果add_step==5运算结果为false,则add_step==5&&1整个就是false,那么就会通过后面的||运算符 继续向后运算,向后面找。

这就给了人一种类似于if(){}else{}语句的错觉。其实这两种写法,只是最后的运算结果是一样的,但是运算的原理确实不同的。

运算符写法,虽然非常的简洁,精炼。但是其中包含的逻辑却非常的复杂。一般不会大量的用来开发,因为很有可能过了一段时间,你自己都在短时间内看不懂,更不要说让别人来维护了。

但是下面这段代码却是例外。经常使用,非常的方便有效,能很好的解决命名重复的问题。

var YAHOO = window.YAHOO || {};

这是雅虎官网处理js命名空间的语句。该写法,目前在很多网站还比较流行且频繁出现。

YAHOO是个变量,|| 关系运算符相当于一个if语句。

如果window.YAHOO已经定义,则YAHOO = window.YAHOO,否则YAHOO={};

{}是 new Object()的简写。

var YAHOO = {};  就是声明一个 “对象级的变量” YAHOO。

时间: 2024-10-18 04:28:15

js中的&& ||运算符与if语句的相关文章

js中的运算符和条件语句

js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作.如: var a=100,b,c,d,e,f; b= a+10; //110 c=a-10; //90 d=a*10; //1000 e=a/10; //10 f=a%3; //1 一元操作符指的是只能操作一个值的操作符:如i++,i--,++i,--i;在这里要注意区别i++与++i: var a

JS中的运算符&JS中的分支结构

一.JS中的运算符 1.算术运算(单目运算符) + 加.- 减.* 乘./ 除.% 取余.++ 自增.-- 自减 >>> +:有两种作用,连接字符串/加法运算.当+两边全为数字时,进行加法运算: 当+两边有任意一边为字符串时,起连接字符串的作用,连接之后的结果为字符串 除+外,其余符号运算时,会先尝试将左右变量用Number函数转为数字 >>> /: 结果会保留小数点 >>> ++: 自增运算符,将变量在原有基础上+1: --: 自减运算符,将变量在原

JS中的运算符和JS中的分支结构

JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链接字符串作用, 链接之后的结果为字符串. 除+外,其余符号运算时,会先尝试将左右变量用Number函数转为数字: /:结果会保留小数点. ++:自增运算符,将变量在原有基础上+1: --:自增运算符,将变量在原有基础上-1: [a++和++a的异同] ①相同点:无论a++还是++a,运算完以后,a的

R中的运算符,条件语句,控制语句

1.运算符 算术运算符:+,-,*,/ 关系运算符:==,!=,>,>=,<,<= 逻辑运算符:&,|,&&,||,! &和|称为短逻辑符,&&及||称为长逻辑符.长逻辑符只比较左边和右边的第一个元素,而短逻辑符将会一 一比较所有的元素. 2.条件语句:if ..else if(boolean_expression) { statement(s) } else{ statement(s)}或多个条件 if(boolean_expres

js 中的流程控制-条件语句

条件语句: if(exp)执行一句代码 1 <script> 2 var x = 1 ; 3 if(x == 1 ) //当if判断语句结果是true 或者 false 当判断结果等于true的时候,执行一句语句 4 document.write("x真的等于1") //=>x真的等于1 5 </script> if(exp){执行代码段} 1 <script> 2 var x = 1 ; 3 if(x == 1 ){ //当if判断语句结果是

js中in运算符,forEach与map的用法-基础知识总结------彭记(016)

in运算符: <script> /*1.能够遍历对象的属性*/ var obj = { 'name':'jack', age:20 }; for(var key in obj){ console.log(key + ":" + obj[key]); } /*2.还可以判断 对象 是否可以访问某个属性,而不关注这个属性是否在当前对象中定义*/ console.log('name' in obj); //true console.log('toString' in obj);

Js中的运算符

运算符 运算符:就是可以运算的符号 比如 + .-.*./ 运算符包括: 算术运算符 比较运算符 逻辑运算符 赋值运算符 字符串运算符 ? ? 1.算术运算符 +.-.*./.%(求余数).++.-- ++:自加1运算符 i++: 后加加 先赋值后将自已加1 ++i:前加加 先将自己加1后赋值 - -:自减1运算符 i- -:后减减 先赋值后将自已减1 - -i:前减减 先将自己减1后赋值 ? ? 2.赋值运算符 =.+=.-=.*=./=.%= =:把右边的赋值给左边的 +=:把左边的加上右边

深入理解js中delete运算符

之前对delete操作符理解不深太深,碰到有些问题发现自己居然自己理解不了,经过寻师访友之后发现原来是自己基础知识不够扎实,所以各位少年还是得多多修行,才能处事不惊啊! 好了进入主题,首先看个例子: 1 //例一 2 var o = { x: 1 }; 3 delete o.x; // true 4 o.x; // undefined 5 6 //例二 7 var x = 1; 8 delete x; // false 9 x; // 1 10 11 //例三 12 function x(){}

js中三元运算符的两种情况

一.一般情况 <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" --------------------------- "+a); </script> 结果: --------------------------- true <script type="te