深入探讨javascript的流程控制与分支结构，以及js的函数-阿里云开发者社区

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

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>

深入探讨javascript的流程控制与分支结构，以及js的函数

1.流程控制与分支结构

1.if分支结构

2.switch case 分支结构

3.循环结构

2.函数

1.函数定义方式一：普通函数

2.函数定义方式二：匿名函数

3.变量提升

4.函数定义方式三：不推荐 (了解) 把代码写在Function()里面

5.函数定义方式四：闭包函数

6.函数定义方式五：箭头函数

7.函数参数 (普通位置参数,默认参数)

8.arguments 自动收集所有的实参，是个数组

3.函数调用

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

深入探讨javascript的流程控制与分支结构，以及js的函数

1.流程控制与分支结构

1.if分支结构

2.switch case 分支结构

3.循环结构

2.函数

1.函数定义方式一 ：普通函数

2.函数定义方式二：匿名函数

3.变量提升

4.函数定义方式三：不推荐 (了解) 把代码写在Function()里面

5.函数定义方式四：闭包函数

6.函数定义方式五：箭头函数

7.函数参数 (普通位置参数,默认参数)

8.arguments 自动收集所有的实参，是个数组

3.函数调用

热门文章

最新文章

相关课程

相关电子书

相关实验场景

1.函数定义方式一：普通函数