深入探讨javascript的流程控制与分支结构,以及js的函数
✨✨ ���迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯,先赞后看哦~🎈🎈
所属的专栏:前端泛海
景天的主页:景天科技苑
文章目录
- 1.流程控制与分支结构
- 1.if分支结构
- 2.switch case 分支结构
- 3.循环结构
- 2.函数
- 1.函数定义方式一 :普通函数
- 2.函数定义方式二:匿名函数
- 3.变量提升
- 4.函数定义方式三:不推荐 (了解) 把代码写在Function()里面
- 5.函数定义方式四:闭包函数
- 6.函数定义方式五:箭头函数
- 7.函数参数 (普通位置参数,默认参数)
- 8.arguments 自动收集所有的实参,是个数组
- 3.函数调用
1.流程控制与分支结构
在javascript中的一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。
很多时候我们要通过控制代码的执行顺序来实现我们要完成功能。
简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
1.if分支结构
流程控制 -> 分支结构 var mashengni = "美女"; //1.单项分支 // if(mashengni == "美女"){ // alert("给他买好吃的~"); // } //2.双项分支 // if(mashengni == "野兽"){ // alert("给他一榔头~"); // }else{ // alert("跳起来给他一榔头~"); // } //3.多项分支 // 不推荐判断条件连续比较,有可能失效; 多条件用&& 连接才行,不能用 10000 console.log("正常薪资范围~"); }else if(12000 console.log("超过一般水平~"); }else if(15000 console.log("大神级毕业生~"); }else if(salary = 18000){ console.log("王牌毕业生~"); }else{ console.log("回炉重生~") } //4.巢状分支,分支嵌套 var youqian = true; var youfang = true; if(youqian){ if(youfang){ console.log("老子要嫁给你~!"); } } 创建变量 // 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,""); 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);
收集所有实参,不管有没定义形参,都收集
遍历出参数,计算出参数计算结果
控制台打印
3.函数调用
在JavaScript中,常见的有四种不同的方式进行函数调用:
1.作为一个函数进行调用,这是最简单的形式。
2.作为一个方法进行调用,在对象上进行调用,支持面向对象编程。
3.作为构造器进行调用,创建一个新对象。
4.通过apply() 或call() 方法进行调用。
函数的调用 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 ... "); }();
The End