深入探讨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分支结构

<!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<15000var 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);// 获取星期 getDayvar 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(初始值;判断条件;自增自减的值){code1code2..}先执行1,2满足后执行代码体然后执行3,2满足后在执行代码体以此类推...直到不满足条件终止循环;*/// 打印 1~100for(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 = 0while(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>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/517646.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ROS从入门到精通4-2：Docker安装ROS、可视化仿真与终端复用

ROS从入门到精通4-2：Docker安装ROS、可视化仿真与终端复用

目录 0 专栏介绍1 Docker安装ROS2 Docker可视化仿真2.1 显示配置2.2 启动容器 3 终端复用工具3.1 session操作3.2 window操作3.3 pane操作3.4 其他操作 0 专栏介绍 本专栏旨在通过对ROS的系统学习&#xff0c;掌握ROS底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS…
阅读更多...
UE5数字孪生系列笔记(一)

UE5数字孪生系列笔记(一)

智慧城市数字孪生系统 虚幻引擎连接数据库 将自己的mysql版本的libmysql.dll替换掉插件里面的libmysql.dll 然后将这个插件目录复制到虚幻项目目录下 然后添加这个插件即可 新建一个UMG&#xff0c;添加一个按钮试试&#xff0c;数据库是否连接 将UI添加到视口 打印是否连接…
阅读更多...
C语言初阶—操作符

C语言初阶—操作符

逻辑操作符&#xff1a; 这段代码的结果是什么&#xff1f; #include <stdio.h>int main() {int i 0,a 0,b 2,c 3,d 4;i a && b && d;printf("a%d,b%d,c%d,d%d\n",a,b,c,d);return 0; } 计算的时候&#xff0c;a先使用&#xff0c;是0&…
阅读更多...
EVSV08-25、EVSV08-28、EVEP-08、EVEP-10、EVGR-10插装式比例阀放大器

EVSV08-25、EVSV08-28、EVEP-08、EVEP-10、EVGR-10插装式比例阀放大器

EVBP-10、EVF-12、EVGB-10、EVRB-02、EVGB-E081、EVRB-03、EVF-08、EVRB-06、EVF-10、EVRB-10、EVEP-12、EVR-01、EVR-10、EVR-12、EVR-T8、EVSV08-20、EVSV08-25、EVSV08-28、EVEP-08、EVEP-10、EVGR-10插装式比例阀包括比例止逆阀、比例换向阀、比例调速阀、比例减压阀、比例…
阅读更多...
julia语言中的异常处理

julia语言中的异常处理

在程序运行中&#xff0c;可能会遇到各种预期之外的情况&#xff0c;如用户输入错误、网络故障、硬件问题等。通过异常处理机制&#xff0c;将错误处理代码与正常的业务逻辑代码分离开来&#xff0c;程序可以在遇到这些问题时做出适当的响应&#xff0c;而不是直接崩溃&#xf…
阅读更多...
在vue3中使用el-tree-select做一个树形下拉选择器

在vue3中使用el-tree-select做一个树形下拉选择器

el-tree-select是一个含有下拉菜单的树形选择器&#xff0c;结合了 el-tree 和 el-select 两个组件的功能。 因为包含了el-tree的功能&#xff0c;我们可以自定义tree的节点&#xff0c;创造出想要的组件 使用default插槽可以自定义节点内容&#xff0c;它的default插槽相当于…
阅读更多...
python自动化之获取实际响应数据-登录模块与我的商铺（第四天）

python自动化之获取实际响应数据-登录模块与我的商铺（第四天）

1.配置文件 新建config.py（config包） 2.登录 新建login.py模块（lib-apiLib） 根据接口文档，可知道登录接口的密码需要md5加密 接口文档，如有需要，可在评论区留言！！！ login.py代码 # -*- coding: utf-8 -*- # @File : login.py # @Time : 2024/3/4 15:32 # @Autho…
阅读更多...
本地项目推送到腾讯云轻量应用服务器教程（并实现本地推送远程自动更新）

本地项目推送到腾讯云轻量应用服务器教程（并实现本地推送远程自动更新）

将本地项目上传到腾讯云轻量应用服务器并实现后续的推送更新&#xff0c;具体步骤如下&#xff1a; 在本地项目目录下初始化 Git 仓库&#xff1a; cd 项目目录 git init将项目文件添加到 Git 仓库并提交&#xff1a; git add . git commit -m "Initial commit"在…
阅读更多...
LeetCode_25_困难_K个一组翻转链表

LeetCode_25_困难_K个一组翻转链表

文章目录 1. 题目2. 思路及代码实现&#xff08;Python&#xff09;2.1 模拟 1. 题目 给你链表的头节点 h e a d head head &#xff0c;每 k k k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k k k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节…
阅读更多...
kafka消费端消息去重方案

kafka消费端消息去重方案

背景 我们在日常工作中&#xff0c;消费kafka消息是一个最常见的操作&#xff0c;不过由于kafka队列中经常包含重复的消息&#xff0c;并且消息量巨大&#xff0c;所以我们消费端总是需要先把消息进行去重后在消费&#xff0c;以减少消费端的压力&#xff0c;那么日常中我们一…
阅读更多...
docker的简单使用

docker的简单使用

在一些进行使用靶场或者工具的时候&#xff0c;我们可以用docker在线拉取&#xff0c;就可以省去手动搭建靶场的过程 一、docker的配置 因为docker是默认从docker的官网进行拉取&#xff0c;所以拉取经常速度很慢或者失败&#xff0c;我们先要进行一下配置&#xff0c;让他优…
阅读更多...
电力系统的数字孪生开发流程

电力系统的数字孪生开发流程

电力系统的数字孪生开发流程通常涉及以下关键步骤&#xff0c;这些步骤构成了电力系统数字孪生开发的基本流程。在实际开发过程中&#xff0c;可能会根据具体项目的要求和特点进行调整和补充。例如&#xff0c;可能会加入模型验证的环节以确保模型的准确性&#xff0c;或者加入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023