✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
1.流程控制与分支结构
在javascript中的一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。
很多时候我们要通过控制代码的执行顺序来实现我们要完成功能。
简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。
1.if分支结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>流程控制 -> 分支结构 </title> </head> <body> <script> var mashengni = "美女"; //1.单项分支 // if(mashengni == "美女"){ // alert("给他买好吃的~"); // } //2.双项分支 // if(mashengni == "野兽"){ // alert("给他一榔头~"); // }else{ // alert("跳起来给他一榔头~"); // } //3.多项分支 // 不推荐判断条件连续比较,有可能失效; 多条件用&& 连接才行，不能用 10000 <salary<15000 var salary = 1000; if(10000 < salary && salary < 12000){ console.log("正常薪资范围~"); }else if(12000 <= salary && salary < 15000){ console.log("超过一般水平~"); }else if(15000 <= salary && salary <18000){ console.log("大神级毕业生~"); }else if(salary >= 18000){ console.log("王牌毕业生~"); }else{ console.log("回炉重生~") } //4.巢状分支，分支嵌套 var youqian = true; var youfang = true; if(youqian){ if(youfang){ console.log("老子要嫁给你~!"); } } </script> </body> </html>
2.switch case 分支结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分支结构 : switch case </title> </head> <body> <script>
js日期
日期的获取方法 Date/date
获取当前小时
var date = new Date(); console.log(date); // 获取星期 getDay var week = date.getDay(); console.log(week) week = "1" // 注意点: switch case中的判断(全等于): (1) 值的比较(2)类型的比较 全部符合才能满足条件; switch语法 ： switch (week){ case 1: console.log('星期一'); break; //一定要加break 打断后续的case, 能防止case穿透 不然寻找到正确的条件之后，后面的case不做判断，直接执行 case 2: console.log('星期二'); break; case 3: console.log('星期三'); break; case 4: console.log('星期四'); break; case 5: console.log('星期五'); break; case 6: console.log('星期六'); break; default: //所有条件都不满足，走default分支 console.log("星期日!"); break; }
week为字符串’1’，case里面是数值1，所以匹配不到，打印出默认值 星期日
将week改为1，则匹配成功
</script> </body> </html>
// 给你月份判断该月份是第几季度，利用case穿透，使代码更简洁 // var month = 2 // switch (month){ // case 1: // case 2: // case 3: // console.log("第一季度"); // break // case 4: // case 5: // case 6: // console.log("第二季度"); // break // //... // }
3.循环结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分支结构 : 循环结构 </title> </head> <body> <script> // ### 1.for循环 /* 语法特征: 1号 2号 3号 for(初始值;判断条件;自增自减的值){ code1 code2.. } 先执行1,2满足后执行代码体 然后执行3,2满足后在执行代码体 以此类推... 直到不满足条件终止循环; */ // 打印 1~100 for(var i = 1;i<=100;i++){ console.log(i); }
// 打印1~100 遇到50,自动跳过; for(var i = 1;i<=100;i++){ if(i == 50){ continue; } console.log(i); }
50被跳过
// ### 2.while 循环 //遇到5,终止循环 i = 0 while(i<10){ if( i == 5){ break; } console.log(i); i++; }
console.log("<===============第一组===================>") // ### 3.for( var i in Iterable ) 获取的是数组中的索引号; var arr = ["孟浩然","赵子龙","康乃馨","张飞","汪精卫"]; 可以根据索引拿数组中的值 for(var i in arr ){ console.log(i); console.log(arr[i]); }
console.log("<===============第二组===================>") // 获取的是js对象中的键 var dic = {"a":"王同培","b":"马村你","c":"张宇"}; for(var i in dic){ console.log(i) console.log(dic[i]) ; }
console.log("<===============第三组===================>") // ### 4.for( var i of Iterable ) 获取的是数组中的值; [等价于python中 for i in Iterable:] for(var i of arr){ console.log(i); }
console.log("<===============第四组===================>") // 注意点: for(var i of dic) 不能遍历js对象[字典] error /* var dic = {"a":"王同培","b":"马村你","c":"张宇"}; for(var i of dic){ console.log(i) } */
// 字符串的遍历: for(var i of "abcdefg"){ console.log(i) }
</script> </body> </html>
2.函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript函数语法,函数就是包裹在花括号中的代码块，前面使用了关键词 function： 当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
将脚本编写为函数，就可以避免页面载入时执行该脚本。 函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行 [1]。
你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 <head> 部分。
1.函数定义方式一 ：普通函数
(存在预加载机制,提前把函数加载到内存中,然后代码整体再执行)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函数</title> </head> <body> <script> func1() // ###1 函数 // 方式一 普通函数 (存在预加载机制,提前把函数加载到内存中,然后代码整体再执行) func1() function func1(){ console.log(111); }
存在预加载机制，可以先调用，再定义
函数命名的特殊字符：
$和_ function _(){ console.log("我是一个$函数"); } _(); // $, _普通字符 -> 1是为了简单, 2是为了绕你 // // fn();// 让变量fn所指向的那个东西. 运行起来 // // gn = fn; // 实际上是内存地址的复制 // fn(); // gn(); // 123 对 // // 函数的运行不是依赖于函数名. 而是依赖于内存地址
2.函数定义方式二：匿名函数
(匿名函数没有预加载价值,必须先定义再调用) 匿名函数想要运行 让该内存地址 加括号就可以了
// func2() error var func2 = function(){ console.log('我是func2~'); } func2();
匿名函数先调用报错
先定义，后调用正常执行
var x = (function(a){ // 形参->变量 console.log("我爱你"+a); return "堕落小羊" })(123456); // 自运行函数 console.log(x); window是顶级作用域,内部的东西想要调用的话. 可以省略window // // 关于对象的补充 // var wf = { // name: "子怡", // age: 199, // songs: ["吹天理", "夏天不里", "秋天奖励", "冬天美丽"], // chi: function(){ // // this就是当前对象 // console.log(this.name + "喜欢吃饭"); // this关键字 // this.he("北冰洋"); // }, // he: function(yinliao){ // console.log(this["name"] + "在喝"+ yinliao); // } // 7 // } // // wf.chi(); // 777 999 // // 在前端js中不存在多个返回值 // function fn(){ // // 前端 多个逗号隔开. 最终返回的是最后一项. // // // var i = 0 // i++; // ++i; // i++; // return i; // return n=a(), // n++, // t=b(n), // t; // } // // var r = fn(); // console.log(r);
如果要返回多个值，需要用数组包裹
也可以封装到json中返回
3.变量提升
// 记住结论即可 // var -> 创建变量 // let -> 创建变量 // const -> 创建常量 // function fn(){ // // 提前声明name, 这种现象叫变量提升 // // 站在开发人员的角度分析. 是不合理的. // console.log(name); // var name = '大马猴'; // 正常人理解. 应该是报错的. // // 新版本的js -> es6 对变量的提升进行的修复. // // let声明的变量. 没有变量提升 // } // fn() // 常量的声明,不希望后续的程序去修改该变量的值 // const BIRTH_DAY = 2000; // // BIRTH_DAY = 1998; // 把规范的东西标准化 // console.log(BIRTH_DAY);
变量提升，打印出name undefined
const 修饰的常量不允许修改，强制修改报错
4.函数定义方式三：不推荐 (了解) 把代码写在Function()里面
// var func3 = new Function("alert('我是func3~');alert('woshi3333');"); // console.log(func3,typeof(func3)); // func3(); 带参数，前面写参数，后面写代码体 // var func4 = new Function("x","y","alert(x+y)"); // func4(5,6);
5.函数定义方式四：闭包函数
function func5(){ var a = 100; function func6(){ console.log(a,"<===>"); return "我是闭包函数"; } return func6; } func = func5(); res = func(); console.log(res);
内函数使用了外函数的变量，外函数将内部函数返回出来
func6是闭包函数
在一个html中引入多个js文件时，大概率会出现变量名冲突的变量
怎样才能让自己代码的变量名与别人的不冲突呢
将变量名设为局部变量
外部要想用到局部变量，则需要将变量返回出来
此时就用到了闭包
// rsa 加密 -> key // 这里直接用var声明的东西. 自动进window (function(){ // 局部变量 // 外界无法对key进行修改 var key = "22222222"; var b64 = function(){ console.log("我是rsa, 我也需要b64"); } // 提供给外界的一个接口. // 外界使用该变量来访问闭包中的功能 window.rsa = function(){ console.log("我也要开始加密了. 我是rsa") b64(); console.log(key); return "rsa加密结果"; } })()
6.函数定义方式五：箭头函数
function mysum(x,y){ return x+y; } res = mysum(5,6) console.log(res,"<=======11122233=======>"); var mysum = (x,y) => {return x+y;} var res = mysum(5,6); console.log(res,"========3334444=========");
=>箭头函数，把一个函数传递到另一个函数，作为参数
箭头格式不能变，一定得是向右指向
// if (a > 5) console.log(3333333); // 如果只有一句话.可以省略大括号 // else { // console.log(6666666); // } // let fn = function(){ // console.log("你好啊"); // } // // fn(); // // // 箭头函数 // let gn = ()=>{ // console.log("我不叫赛利亚"); // } // // gn(); // setTimeout(()=>{ // console.log("123") // }, 1000);
// // 如果只有1个参数. 可以省略() // let an = n => { // console.log(n); // } // // an(18); // // 慢慢捋 // function fn(n, m){ // m(n); // // } // // a = 10; // fn(a, n => { // console.log(n); // });
7.函数参数 (普通位置参数,默认参数)
// js中的形参实参不匹配不会报错 function func7(a,b,c=3){ console.log(a,b,c); } func7(10,11); func7(10,11,12); func7(10,11,12,13);
参数写多了也不报错
只能按位置参数处理，不能用关键字传参
console.log("<==============================>")
8.arguments 自动收集所有的实参，是个数组
// 计算任意个数值的累加和; function func8() { // console.log(a,b) // console.log(arguments) var total = 0; for(var i of arguments){ total += i; console.log(i); } return total; } res = func8(1,100,2,3,4,5,56,6); console.log(res);
收集所有实参，不管有没定义形参，都收集
遍历出参数，计算出参数计算结果
控制台打印
</script> </body> </html>
3.函数调用
在JavaScript中，常见的有四种不同的方式进行函数调用：
1.作为一个函数进行调用，这是最简单的形式。
2.作为一个方法进行调用，在对象上进行调用，支持面向对象编程。
3.作为构造器进行调用，创建一个新对象。
4.通过apply() 或call() 方法进行调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函数的调用</title> </head> <body> <script> function func(){ console.log("函数正在执行 ... "); } // 1.正常调用 func(); // 2.函数的立即执行，不用手动调用 (function func2(){ console.log("函数正在执行2 ... ") })(); // 3.匿名函数的立即执行 (function(){ console.log("匿名函数正在执行3 ... ") })(); // 4.其他立即执行的方法; !function(){ console.log("我在执行4 ... "); }(); ~function(){ console.log("我在执行5 ... "); }(); </script> </body> </html>
