《python全栈工程师 - web开发前端基础》:javascript语句

技术2022-07-10 137

《python全栈工程师 - web开发前端基础》:javascript语句

一、课程目标二详情解读1.1单行语句与语句注释1.2赋值语句1.3条件语句1.3逻辑表达式1.4多条件分支语句1.5三元操作符1.6while循环语句1.7 for循环语句1.8 for...in...循环语句1.9循环控制

一、课程目标

语句与注释赋值语句条件语句while语句for语句

二详情解读

1.1单行语句与语句注释

//用于单行注释/* */ 用于多行注释每行语句以;结束console.log、console.info、console.debug、console.warn

代码示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> // 单行注释 /* 一次性注释多行可以大块大块的注释 */ // console.log、console.info、console.debug、console.warn、console.error //var a = 10 var b = 20 var c = 20 </script> </body> </html>

1.2赋值语句

1.var a=10 2.var a=b=c=10 3.var a=10,b=12,c=13 4.复合赋值-=、+=、*=、/=、<<=、>>=、>>>=

代码示例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> /* var a = 10; var a=b=c=10; var a=10, b=12, c=13; 复合赋值 -=、+=、*=、/=、<<=、>>=、>>>= 移位：首先转换为二进制，比如 2 转为 0000...0000010 取反码： 1111....1111101 取补码： 1111....1111110 */ // var a = 10; // a = b = c = 20 // a = b = c = 100-81 </script> </body> </html>

1.3条件语句

比较运算符：>、<、>=、<=、==、！=、 === 、! == 1.如果操作数是数值、直接比较、返回true或者false 2.如果操作数是字符串，则比较字符串的对应字符编码值 3.如果一个操作数是数值，则将另一个操作数变为数值进行比较 4.如果有一个值是布尔值，先转换为数值再比较 5.null与undefined相等 6.NaN不等于任何数，包括NaN 7.使用相等比较两个对象时，如果两个对象指向同一个对象，返回true 8.全等与全不等比较前不做任何类型转换

1.3逻辑表达式

布尔操作符-逻辑非！ 1.如果操作数是一个对象，返回false 2.如果操作数是一个空字符串，返回true 3.如果是非空字符串，返回false 4.如果操作数是0，返回false 5.如果操作数是任意非0数，返回false 6.如果操作数是null、NaN、undifiend，返回true

布尔操作符-逻辑或 ||： var res = 操作数1 || 操作数2 1.如果第一个操作数是对象，返回第一个操作数 2.如果第一个操作数的求值结果是false，返回第二个操作数短路操作: 如果操作数1的布尔值是true，那么不会对操作数2

if(condition) //单行语句 else if(condition){ //多行语句 } else{ //多行语句 } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> a = 10 b = 11 condition = a < b if (!condition) { console.log(condition) } if (!condition) { console.log(condition) } else { console.info(condition) } a = 1 b = 2 condition = a + b if (condition==1) { console.log("condition=",condition) } else if (condition==2) { console.info("condition=", condition) } else if (condition==4){ console.warn("condition=", condition) } else { console.debug("condition=", condition) } </script> </body> </html>

1.4多条件分支语句

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> a=10 b=11 condition=a+b switch(condition){ case 51: console.info(condition); //break; case 31: console.error(condition); //break; default: console.warn(condition) } </script> </body> </html>

1.5三元操作符

var=(condition)? true_value:false_value; //例子 a=12 b=11 c=(a>b)?a:b;//c=12

1.6while循环语句

while(condition){ //do } //第二种：该语句结构至少执行一次循环 do{ //do }while(condition) //注意：一般不适用死循环，否则浏览器会卡死导致崩溃 //示例： a=10 while(a>0){ a-- console.log(a) } do{ a-- console.log(a) }while(a>0)

两个程序的运行结果是一样的

1.7 for循环语句

for(initialization; expression; post-loop-expression) { //do } // 示例： for (i=0;i<=10; i++) { console.log(i) console.log("hello") } i = 5 for (;i<10; i++) { console.log(i) } i = 5 for (;i<10;) { i++ console.log(i) } i = 5 for (i=0, j=0;i<10 && j < 18;i++, j+=1) { console.log(i, j) }

1.8 for…in…循环语句

for(item in items){ //do } 该语句结构为迭代语句

示例：

array=[1,2,3,4,5] for(item in array){ console.log(array[item]) }

运行结果

1.9循环控制

break语句

break语句用于中断循环

continue语句

continue语句用于跳过本次循环

label语句

label语句可以添加一个标签，用于break、continue引用

代码示例：

No1: for (i=0;i<10;i++) { for (j=0;j<3;j++){ if (j > 1) { console.warn(j) break No1 } console.log("j=", j) } console.debug("i=",i) }

i = 0 No2: while (i < 100){ i++ console.debug("i=", i) for (j=0; j<5; j++){ if (i%2==0) continue No2 console.warn(j) } console.log("---------------------------") }

Processed: 0.011, SQL: 9