1.逻辑运算符
或|| 与&& 非!
-
基础操作
// 逻辑运算符 ||或 &&与 !非 运算符左侧两侧是跟的条件 // 1. ||或 只要有一个true 结果就为true var a = true || false; console.log(a);//true var b = 1==1 || 1>2;// true || false console.log(b);//true var c = "a"=="A" || "11"===11;// var c = false console.log(c) //false // 2. &&与 只要都为true的时候 结果才为true var a1 = 1>2 && 2>1; //var a1 = false && true console.log(a1);//false var b2 = "a"=="a" && "b"=="b";// true && true console.log(b2); // 3 非 ! 取反 var a = 2; console.log(!a);
-
&&短路运算
-
==如果第一个条件就为false 第二个条件不执行 执行到哪就把哪的值给左侧==
-
==如果第一个条件就为true 再去执行第二个条件 执行到哪就把哪的值给左侧==
-
// 3.1 &&短路运算 // 如果第一个条件就为false 第二个条件不执行 执行到哪就把哪的值给左侧 var a1 = 1; var b1 = 1; var c1 = --a1 && --b1;//var c1= 0 a1=0 b1 = 1 console.log(a1,b1,c1);// 0 1 0 // 如果第一个条件为true 再去执行第二个条件 执行到哪就把哪的值给左侧 var x = 10; var y = true && x--; // y=10 x=9 console.log(x,y);// 9 10 var a2 = 10; var b2 = 2; var c2 = --a2 && --b2;//var c2 = 9 && 1 a2=9 b2=1 console.log(a2,b2,c2);//9 1 1
-
|| 短路运算
-
==如果第一个条件为true 第二个条件不执行 执行到哪就把哪的值给左侧==
-
==如果第一个条件为false 再执行第二个条件 执行到哪就把哪的值给左侧==
-
//3.2 或|| 短路 // 如果第一个条件为true 第二个条件不执行 执行到哪就把哪的值给左侧 var x = 10; var z = true || x--;// z=true console.log(x,z);//10 true // 如果第一个条件为false 再执行第二个条件 执行到哪就把哪的值给左侧 var x = 10; var z = false || --x; // var z = 9 x=9 console.log(x,z);// 9 9 var x1 = 1; var y1 = 10; var z1 = --x1 || --y1;//var z1 = 0 || 9 z1 = 9 x1=0 y1=9 console.log(x1,y1,z1);//0 9 9 var x2 = 10; var y2 = 10; var z2 = --x2 || --y2;//var z2 = 9 x2 = 9 y2 = 10 console.log(x2,y2,z2);// 9 10 9
2.流程控制语句
==流程控制语句:重要实际操作==
1.流程控制语句介绍
-
顺序结构(代码依次从上往下执行)
console.log(1) console.log(2) console.log(3)
-
选择结构(分支语句) if if-else if-else if-else switch
-
循环结构:for while do-while for-in
2.选择结构(分支语句)
2.1 单分支
-
if
-
语法: if(条件){ 条件成立的时候执行的代码 }
-
==注意事项==
-
if后面的大括号可以省略 不加大括号 只能控制后面一行代码
-
if的判断条件不一定是表达式 只要能确定真假就行
-
-
<script> // 1.单分支 if(判断条件) { 条件成立执行的代码} //需求:如果我的钱超过10000 我就挣钱娶媳妇 var price = 8000;//这是我目前的存款 if(price > 10000){ // false 条件不成立 // 条件成立执行的代码 console.log("挣钱娶媳妇"); console.log("度蜜月"); } // 注意事项1:if后面的大括号可以省略 不加大括号 只能控制后面一行代码 if(true)console.log(123); if(false){console.log(456);console.log(789)}; // 注意事项2:if的判断条件不一定是表达式 只要能确定真假就行 if(0){ console.log("你在说什么") } </script>
2.2 双分支
-
if-else
-
语法: if(判断条件){条件成立执行的代码 }else{条件不成立执行的代码}
-
==注意事项:如果是双分支语句 if和else一定要搭配使用==
-
<script> // 2.双分支 if(判断条件){ 条件成立执行的代码} else{ 条件不成立执行的代码} // 需求:如果你二阶段考核分数不过90 你就末班 如果超过90 就进入三阶段 var store = 90; if(store >= 90){ //条件成立 console.log("进入三阶段") }else{//条件不成立 console.log("恭喜你要深造了一次") } // 注意事项:如果是双分支语句 if和else一定要搭配使用 if(true){ console.log(123) }else{ console.log(456) } </script>
2.3 多分支
-
if-else if -else
-
==注意事项==:else不是必须的
-
语法:
-
if(条件1){ 满足条件1执行的代码 }else if(条件2){ 满足条件2执行的代码 }else if(条件3){ 满足条件3执行的代码 } ......... else{ 以上条件都不满足的时候 执行的代码 }
//需求 成绩0-59 不及格 60-79 中等 80-100优秀 不在0-100中间 成绩无效 var store = 101; if (store > 0 && store <= 59) { //0-59 大于0 store > 0 && 小于等于59 store <=59 console.log("不及格") } else if (store > 59 && store <= 79) {// 60-79 大于59 store >59 && 小于等于79 store <=79 console.log("中等") } else if (store > 79 && store <= 100) {//80-100 console.log("优秀") } else { //以上条件都不满足的时候 执行这里的代码 console.log("成绩无效") } // 注意事项 else不是必须的 var num = 12; if(num==10){ console.log("10") }else if(num==11){ console.log("11") }
2.4 switch语句
-
语法
switch(){ case 情况1 : 匹配到情况1所执行的代码; break; case 情况2 : 匹配到情况2所执行的代码; break; case 情况3 : 匹配到情况3所执行的代码; break; ...... default:上述情况都不匹配的时候 执行的代码 }
<script> /* */ // break 终止的意思 如果满足这一项,直接终止后面的代码执行 var a = "%"; switch (a) { case "+": console.log("+"); break; case "-": console.log("-"); break; case "*": console.log("*"); break; case "/": console.log("/"); break; default: console.log("没有找到") } var c = 90; switch(c){ case 100:console.log("满分");break; default:console.log("没有找到"); } // switch 比较适用于简单的字符串或者数字判断 </script>
3.循环结构
3.1 for循环
什么时候需要使用for循环 多次重复执行 多次有规律的执行 for循环的作用 可以让特定的代码执行指定的次数
-
for循环的语法
for(表达式1;表达式2;表达式3){ 循环体(重复执行的代码) } for(初始化循环变量;循环条件;更新循环变量值){循环体(重复执行的代码)} for(var n=0;n<5;n++){ console.log("今天吃饭了") } 执行过程 1.初始化循环变量 var n = 0 2.判断循环条件 n<5 条件成立 执行循环体 条件不成立 结束循环 3.更新循环变量 n++ 4.回到步骤2
-
基础用法
<script> /* for(表达式1;表达式2;表达式3){ 循环体 } for(初始化循环变量;循环条件;更新循环变量值){ 循环体} */ for (var n = 1; n < 10; n++) { // n = 1 2 3 4 5 6 7 8 9 10 console.log("你今天吃饭了吗") } console.log(n);//10 </script>
-
循环数组
//循环数组 //array 数组类型 ["123",2,true,undefined,null] 数组可以存储多个数组 可以存储任意类型的数据 var arr = ["你好吗", 123, true, undefined, null]; console.log(arr); //获取数组中的某一项 语法 数组名[下标] // console.log(arr[0]) // console.log(arr[1]) // console.log(arr[2]) // console.log(arr[3]) // console.log(arr[4]) // for (var i = 0; i < 5; i++) { // i = 0 1 2 3 4 5 // console.log(i);// 0 1 2 3 4 console.log(arr[i]);// "你好吗" 123 true undefined null }
-
循环生成标签
body> <button>生成</button> <ul> </ul> <script> var arr = ["赵四成精", "刘能变形", "中国老年人才网正式上线", "拍婚纱照 新郎被劈死"] // 需求 点击生成按钮 生成四个新闻 // 1.获取元素 var btn = document.getElementsByTagName("button")[0]; var list = document.getElementsByTagName("ul")[0]; // 2.添加点击事件 btn.onclick = function () { for (var i = 0; i < 4; i++) { // i = 0 // 将原先的内容获取到 + 新内容 // arr[0] arr[1] arr[2] arr[3] list.innerHTML += "<li>" + arr[i] + "</li>" /* i=0 "<li>赵四成精</li>" i = 1 "<li>赵四成精</li>" + "<li>刘能变形</li>" i = 2 */ } } </script> </body>
-
循环添加点击事件
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //点击哪个按钮 将哪个按钮的文本内容输出 var btn = document.getElementsByTagName("button"); // btn[0].onclick = function(){ // console.log(btn[0].innerText) // } // btn[1].onclick = function(){ // console.log(btn[1].innerText) // } // btn[2].onclick = function(){ // console.log(btn[2].innerText) // } // btn[3].onclick = function(){ // console.log(btn[3].innerText) // } // btn[4].onclick = function(){ // console.log(btn[4].innerText) // } for(var i = 0;i<5;i++){ // i = 0 1 2 3 4 5 btn[i].onclick = function(){ // console.log(btn[i].innerText);// 出现报错信息 因为此时i的值是5 // console.log(i);//5 } } </script> </body>
3.2 while与do-while
3.2.1 while语句
/* while语句 1.初始化循环变量 while(条件){ 循环体(重复执行的代码); 更新循环变量 } */ var a = 0; while(a < 3){ console.log("你好"); a++; }
3.2.2 do-while的语法
/* do-while语句 1.初始化循环变量 do{ 循环体; 更新循环变量 }while(条件) */ var b = 0 do{ console.log("摆烂"); b++; }while(b<3);
3.3.3 while和do-while的区别
-
while:==先判断后执行 最开始不成立 一次也不执行==
-
do-while :==先执行后判断 最开始不成立 也会执行一次==
// while和do-while有什么区别 var x = 0; while(x > 0){ //先判断后执行 最开始不成立 一次也不执行 console.log("马上下课了"); x++; } var x = 0; do{// 先执行后判断 最开始不成立 也会执行一次 console.log("还没有下课呢"); x++; }while(x<0);