JS判断操作语句

通过一系列的逻辑判断，来完成特定的事情

if 、else if、else

1.if(条件1){
2.    //=>条件1成立执行的操作
3.}else if(条件2){
4.    //=>条件1不成立,条件2成立执行的操作
5.}else if(条件3){
6.    //=>上面条件不成立，条件3成立执行的操作
7.}
8....
9.else{
10.    //=>以上条件都不成立执行的操作
11.}

案例剖析

1.var num = 10;
2.if (num < 5) {
3.    num++;//=>num+=1  =>num=num+1  在自身基础上累加1
4.} else if (num >= 5 && num <= 15) {
5.    //=>&&：并且,所有条件都成立整体才成立
6.    //=>||：或者,只要有一个条件成立整体就成立
7.    num += 2;
8.} else {
9.    num--;
10.}
11.console.log(num);//=>12

1.//=>当在判断的操作中,很多条件都是符合的,执行完成第一个符合的条件后,后面的条件不管是否符合都不在处理了
2.var num = 10;
3.if (num <= 10) {
4.    num++;
5.} else if (num >= 5) {
6.    num--;
7.}
8.console.log(num);//=>11

三元运算符

语法：条件?条件成立执行:条件不成立执行;

三元运算符是对if(){}else{}这种简单判断处理的简写，即使不使用三元运算符,if else也能处理

1.var num = 10;
2.//------------------
3.// if (num >= 10) {
4.//     num++;
5.// } else {
6.//     num--;
7.// }
8.
9.//------------------
10.num >= 10 ? num++ : num--;
11.console.log(num);//=>11

如果条件成立或者不成立的情况下，我们需要处理很多操作，那么需要把处理的事情用 小括号 包起来，每一个处理事情之间使用 逗号 分隔

1.var num = 10;
2.//------------------
3.// if (num >= 10) {
4.//     num++;
5.//     num = num * 10;
6.// } else {
7.//     num--;
8.//     num = num / 10;
9.// }
10.
11.//------------------
12.num >= 10 ? (num++, num = num * 10) : (num--, num = num / 10);
13.console.log(num);//=>110

对于复杂的一些判断操作，使用 if else会更加的清晰明了，此时慎用三元运算符

1.var num = 10;
2.//num >= 0 ? (num <= 10 ? num++ : num--) : (num <= -10 ? num++ : num--);
3.
4.//->改写成 if else
5.if (num >= 0) {
6.    if (num <= 10) {
7.        num++
8.    } else {
9.        num--;
10.    }
11.} else {
12.    if (num <= -10) {
13.        num++;
14.    } else {
15.        num--;
16.    }
17.}

如果条件成立或者不成立的情况下，我们不需要做任何事情，可以在三元运算符中使用null或者void 0(undefined)来占位即可

1.var num = 10;
2.// if (num == 10) {
3.//     num++;
4.// }
5.
6.//num==10?num++:; //=>Uncaught SyntaxError: Unexpected token ;
7.
8.num == 10 ? num++ : null;//=>放undefined也可以(void 0)
9.num == 10 ? num++ : void 0;

switch case

也是if else某种特定情况的简写(另外一种写法)

1.switch(变量或者值){
2.    case [value1]:
3.        如果switch中的变量或者值和当前case后面的值相等，则执行这些操作;
4.        break; //=>每一种case情况结束都需要加break，达到条件成立处理完成，跳出当前判断
5.    ...
6.    default:
7.        以上值都不满足，执行这里的操作，最后一个就不需要加break
8.}

案例剖析

1.var num = 10;
2.// if (num == 0) {
3.//     num++;
4.// } else if (num == 5) {
5.//     num--;
6.// } else if (num == 10) {
7.//     num = num * num;
8.// } else {
9.//     num = 0;
10.// }
11.
12.switch (num) {
13.    case 0:
14.        num++;
15.        break;
16.    case 5:
17.        num--;
18.        break;
19.    case 10:
20.        num *= num;
21.        break;
22.    default:
23.        num = 0;
24.}
25.
26.console.log(num);

在switch case中我们可以利用case后面不加break的特点（不管后面条件是否成立都会继续执行，直到遇到break为止），实现当变量等于某几个值的时候，我们做相同的事情

1.var num = 5;
2.switch (num) {
3.    case 0:
4.        num++;
5.        break;
6.    case 5:
7.    case 10:
8.        num *= num; //=>只要当前的NUM等于5或者等10都去做同样的事情
9.        break;
10.    default:
11.        num = 0;
12.}
13.console.log(num);

每一种case情况的比较都是使用===进行比较的：绝对相等

=：赋值，变量=值 
==：比较，值==值 
===：绝对比较，值===

如果左右两边比较的值是相同类型的，那么直接比较内容是否一样即可；如果两边值的类型不一样，==和===是有区别的： 
===类型不一样，最后的结果就是false，更加的严谨 
==类型不一样，浏览器首先会默认的把类型转化为一样的，然后再比较内容，相对松散一些

1.'10'==10：true  浏览器会把'10'->10然后再比较
2.'10'===10：false

数学运算中的一些细节知识点 
在JS中* / -都是数学运算，遇到非数字操作，浏览器也会转换为数字进行操作；但是+不一定是数学运算，如果遇到了字符串，属于字符串的拼接

1.'10'*10 =>100  浏览器会把字符串转为数字然后再运算（数学）
2.'10'/10 =>1
3.'10'-10 =>0
4.'10'+10 =>'1010'  字符串拼接

腾讯面试题

1.var result=10+null+[]+undefined+'zhufeng'+null+[]+undefined;
2.console.log(result); =>'10undefinedzhufengnullundefined'
3.
4./* 
5. 10+null：数学运算,先把null变为数字0 ->10
6. 10+[]：数学运算,先把[]变为数字,[].toString()变为'',10+'',变为字符串拼接 ->'10'
7. '10'+undefined：字符串拼接 ->'10undefined'
8. '10undefined'+'zhufeng'：字符串拼接 ->'10undefinedzhufeng'
9. '10undefinedzhufeng'+null：字符串拼接 ->'10undefinedzhufengnull'
10. ...
11. */

1.var result = 10+false+true+null+undefined+null+'zhufeng'+null+true+undefined;
2.=>'NaNzhufengnulltrueundefined'
3.
4.//->分析步骤
5.10+false ->10
6.10+true ->11
7.11+null ->11
8.11+undefined ->NaN
9.NaN+null ->NaN
10.NaN+'zhufeng' ->'NaNzhufeng'
11.'NaNzhufeng'+null ->'NaNzhufengnull'
12.'NaNzhufengnull'+true ->'NaNzhufengnulltrue'
13.'NaNzhufengnulltrue'+undefined ->'NaNzhufengnulltrueundefined'

JS中的循环语句

重复做相同的事情就是循环：在真实项目中只要我们想重复做一件事件就要用到循环

• for循环
• for in 循环
• while循环
• do while循环
• …

for循环

1.for(设置初始值;设置循环执行的条件;步长累加){
2.    //->条件成立，执行循环体中的内容(循环体中存放的就是我们需要重复处理的事情)
3.}
4.第一步：设置初始值
5.第二步：验证(设置)循环能够执行的条件
6.第三步：条件成立，执行循环体中的内容，不成立直接结束循环
7.第四步：每一次执行完成循环体中内容，为了能够执行下一次的循环，做一下步长的累加

案例剖析

1.for(var i=0;i<5;){
2.    console.log(i);
3.}
4.//=>上述代码是死循环：i永远是0，条件永远成立，循环会一直执行下去

1.for(var i=0;i<5;i++){
2.    console.log(i);//-> 0 1 2 3 4
3.}
4.console.log(i);//->循环结束执行这个操作 =>5

1.for(var i=0;i<5;i+=3){
2.    console.log(i);//=> 0 3
3.}
4.console.log(i);//=> 6

1.for(var i=1;i<=5;i+=2){
2.    i<3?i++:i--;
3.    console.log(i);//=>2 3 4
4.}
5.console.log(i);//=>6

在循环的循环体中经常会出现两个关键词： 
continue：结束当前本轮循环，继续执行下一轮循环 
break：结束整个循环

所谓结束本轮循环：其实就是让循环体中continue后面的代码不在执行，直接的去进行步长累加，开启下一轮的循环 
所谓结束整个循环：其实就是当循环体中遇到break，break后面的操作语句都不在执行，步长累加也不再执行，所有和循环有关的都结束了

1.for(var i=0;i<5;i++){
2.    continue;
3.    i+=2;
4.}
5.console.log(i); //=>5

1.for(var i=0;i<5;i++){
2.    break;
3.    i+=2;
4.}
5.console.log(i); //=>0

腾讯面试题

1.for(var i=0;i<10;i+=2){
2.    if(i<=5){
3.        i++;
4.        continue;
5.    }else{
6.        i--;
7.        break;
8.    }
9.    console.log(i);
10.}
11.console.log(i); //=>5