JavaScript流程控制及函数

Posted 2020-12-29 迎风而来

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript流程控制及函数相关的知识，希望对你有一定的参考价值。

1 流程控制

1.1 条件语句分支结构

单向分支

if (条件表达式) {
    code...
}

双向分支

if (条件表达式){
    
} else {
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志交友</title>
    <style>
        input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
        }
        #res {
            margin-top:20px;
            width: 300px;
            min-height: 100px;
            padding: 10px;
            border:1px solid #ccc;
        }

    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>
    <h3>请输入您的成绩：</h3>
    <!-- 通过id来获取用户输入的值 -->
    <input type="number" id="score">
    <!-- 触发事件，也就是为了通过提交按钮，来触发该函数的执行 -->
    <button onclick="makeScore()">提交</button>

    <!-- 通过id来将函数中逻辑运算的结果显示到div元素中 -->
    <div id="res"></div>


    <script>
        //声明函数
        function makeScore() {
            //获取用户输入的成绩
            var score = Number(document.getElementById(‘score‘).value);

            //对成绩进行判断
            if (score > 60) {
                var resContent = ‘你的成绩及格, 来快活吧‘;
            } else {
                var resContent = ‘您的成绩你不及格，去死吧‘;
            }

            //先定位到id，然后在点innerHTML，把结果写入到div中 id=res
            document.getElementById(‘res‘).innerHTML = resContent;

        }

    </script>
</body>
</html>

双向分支

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语句简写</title>
</head>
<body>
    <script>
        
        var score = 10;

        if (score > 100) 
            console.log(‘OK‘)        //条件不成立只有这一条语句会被执行
            console.log(‘哈哈哈‘)   //执行if语句这一句也会被执行，因为他其实并不是if语句内的代码，js中缩进并没有意义
        console.log(‘直接来这里‘)
    </script>
</body>
</html>

分支和循环的简写（了解）

多向分支

if (条件表达式) {
    
} else if(条件表达式) {
    
} else if (条件表达式) {
    
} else {
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志交友</title>
    <style>
        input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
        }
        #res {
            margin-top:20px;
            width: 300px;
            min-height: 100px;
            padding: 10px;
            border:1px solid #ccc;
        }

    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>
    <h3>请输入您的成绩：</h3>
    <input type="number" id="score">
    <button onclick="makeScore()">提交</button>


    <div id="res"></div>


    <script>
        //声明函数
        function makeScore() {
            //获取用户输入的成绩
            var score = Number(document.getElementById(‘score‘).value);

            //对成绩进行判断
            var resContent = ‘‘;  //空字符串 声明定义 变量
            if (score >= 90) {
                resContent = ‘不错哦，小同志，很优秀‘; //修改变量的值,也就是对定义的变量进行重新赋值
            } else if (score >= 80) {
                resContent = ‘小同志，还行‘;
            } else if (score >= 60) {
                resContent = ‘小同志，及格了‘;
            } else {
                resContent = ‘你不是我的同志‘;
            }


            //把结果写入到div中 id=res
            document.getElementById(‘res‘).innerHTML = resContent;

        }

    </script>
</body>
</html>

多向分支


switch (条件表达式) {
        case 表达式可能的结果：code... break;
        case 表达式可能的结果：code... break;
        case 表达式可能的结果：code... break;
        case 表达式可能的结果：code... break;
        default code...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志交友</title>
    <style>
        input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
        }
        #res {
            margin-top:20px;
            width: 300px;
            min-height: 100px;
            padding: 10px;
            border:1px solid #ccc;
        }

    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>
    <h3>请输入您的生日：</h3>
    <input type="date" id="yearInput">
    <!-- 触发事件，本质就是点击按钮，会调用该函数的执行 -->
    <button onclick="makeFn()">提交</button>


    <div id="res"></div>


    <script>
        //声明函数
        function makeFn() {
            //获取用户输入的日期
            var date = document.getElementById(‘yearInput‘).value;
            
            //从日期中获取年 并且转换为Number
            var year = Number(date.split(‘-‘)[0]);


            //判断
            var animal = ‘‘;
            switch (year % 12) {
                case 0: animal = ‘猴‘; break;
                case 1: animal = ‘鸡‘; break;
                case 2: animal = ‘狗‘; break;
                case 3: animal = ‘猪‘; break;
                case 4: animal = ‘鼠‘; break;
                case 5: animal = ‘牛‘; break;
                case 6: animal = ‘虎‘; break;
                case 7: animal = ‘兔‘; break;
                case 8: animal = ‘龙‘; break;
                case 9: animal = ‘蛇‘; break;
                case 10: animal = ‘马‘; break;
                case 11: animal = ‘羊‘; break;
                default: animal = ‘驴‘;  //前面的条件都不满足
            }


            //把结果显示到页面中
            document.getElementById(‘res‘).innerHTML = ‘您的生肖是： ‘+animal;

            /*
               year % 12 --  0 ~ 11
                鼠   4     2008  奥运会   + 12  （2020）
                牛   5     2009
                虎   6     2010
                兔   7
                龙   8
                蛇   9
                马   10
                羊   11
                猴   0
                鸡   1
                狗   2
                猪   3
            */

        }

        //console.log(2020 % 12)

    </script>
</body>
</html>

引用：根据年份判断该年份生肖

嵌套分支

if (条件表达式) {
    if (条件表达式) {
    
    } else {
?
    }   
} else {
    if (条件表达式) {
        
    }
}

1.2 循环语句

while循环

while (循环条件) {
    //循环体
}

do...while 循环

do {
    //循环体
} while (循环条件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS循环</title>
</head>
<body>
    <h1>同志交友</h1>
    <hr>
    
    <!-- 三种循环方式： -->
    <script>
        //循环输出 0-10

        //方式一：while循环
        var m = 0;
        while (m <= 10) {
            console.log(m);
            m ++; // m += 1  m累加
        }

        console.log(‘‘);

        //方式二：do ... while 循环
        var n = 0;
        do {
            console.log(n)
            n ++; // n += 1 n累加
        } while(n <= 10);

        console.log(‘‘)

        //方式三：for 循环
        for (var i = 0; i <= 10; i ++) {
            console.log(i);
        }



    </script>
</body>
</html>

while和do...while循环

for 循环

for (变量定义；循环条件; 变量变化) {
    //循环体
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环</title>
</head>
<body>
    <h1>同志交友</h1>
    <hr>

    <script>
        // 输出 0 到 10之间的偶数，循环的次数比下面的一种方法多，可以通过console。count（）查看循环的次数
        for (var a = 0; a < 11; a ++) {
            if (a % 2 === 0) {
                console.log(a)

            }
        }

        console.log(‘‘);
        // 输出 0 到 10之间的偶数
        for (var i = 0; i < 11; i += 2) {
            console.log(i)
        }

        console.log(‘‘);
        console.log(i);        //12    因为i每次是加2
        console.log(a)         //11    因为i每次是加1
    </script>
</body>
</html>

for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        body {
            color: #333;
        }
        table {
            width: 900px;
            table-layout: fixed;
            border-collapse: collapse;
        }
        td {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>九九乘法表</h1>
    <hr>


    <script>
        //javascript生成九九乘法表
        document.write(‘<table>‘);

        //循环 输出tr 行
        for (var i = 1; i <= 9; i ++) {
            document.write(‘<tr>‘);

            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write(‘</tr>‘);
        }

        document.write(‘</table>‘);

    </script>


</body>
</html>

for循环应用：九九乘法表

1.3 其他语句

跳转语句

continue;   跳出当前循环  继续下一次
break;      结束循环
return;     结束函数

异常

try {
    
} catch(err) {
    
}
?
?
try {
    
} catch(err) {
    
} finally {
    
}
?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异常语句</title>
</head>
<body>
    <script>
        try {
            console.log(username)
        } catch(err) {
            console.log(err)
        } finally {
            //无论怎么都执行
        }
    </script>
</body>
</html>

try捕捉异常

catch相当于python的except

严格模式

//写在所有代码的最前面
//开启严格模式
‘use strict’

严格模式下声明不加 var 会报错
eval() 在严格模式不能用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格模式</title>
</head>
<body>
    <script>
        //js存在严格格式
        //开启严格模式
        ‘use strict‘
        
        var username = ‘小丽丽‘;
        //userage = 100; //严格模式下 声明变量必须加 var,不加var就会报错

        console.log(username)
    </script>
</body>
</html>

js严格模式

1.4 注意

当分支语句和循环语句结构体({}内) 只有一行代码的时候，可以省略{}

if (条件) 
    代码

2 函数

2.1 定义函数

//function 关键字方式
function 函数名(参数1, 参数2) {
    code...
}
?
//表达式方式
var  函数名 = function(参数1, 参数2) {
    code...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS如何定义函数</title>
</head>
<body>
    <script>
        //定义函数  多种方式

        demo(); //函数提升 （特殊情况）
        //fn(); //不存在变量提升


        //方式一：function 关键字方式 def
        function demo (a, b) {
            console.log(‘demo‘);
        }

        //方式二：表达式方式 --------相当于将一个匿名函数赋值给了一个变量
        var fn = function(a, b){
            console.log(‘fn‘);
        }

        console.log(‘‘)
        demo();
        fn();

        var a = demo;

        a();

        console.log(typeof demo) //函数也是一种数据类型(对象类型)
        console.log(typeof fn)
        console.log(typeof fn())

        console.log(‘‘)

        //方式三：第三种函数 定义方式 (了解)
        var myFun = new Function(‘a‘, ‘b‘, ‘c‘, ‘console.log("myFun")‘);

        myFun();






    </script>
</body>
</html>

定义函数的三种方式：

2.2 函数特点

函数名就是变量名
函数调用必须加 ()
关键字方式定义的函数，会存在函数提升（在函数定义的前面调用函数）

2.3 函数的参数问题

形参和实参

实参数量>形参数量多给的实参会被忽略
实参数量<形参梳理多出的形参，默认值undefined

参数默认值

//ES6 新增的语法
function demo(a, b=默认值) {
    
}
//有默认值的参数 一定在后面

可变数量的参数

arguments对象 可以获取所有的实参
只能在函数中使用
arguments是类数组对象，用法同数组，可以使用for循环遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的参数</title>
</head>
<body>
    <h1>同志交友</h1>
    <hr>

    <script>
        
        //形参和实参数量
        //定义函数
        function demo(a, b) {
            /*
            ES6之间 默认值的写法  了解
            if (b === undefined) {
                b = ‘默认值‘
            }*/
            console.log(a+‘ 和 ‘+b+‘ 正在一起交友‘);
        }


        demo(‘小丽丽‘, ‘小刚刚‘);
        demo(‘大丽丽‘, ‘大刚刚‘, ‘大花花‘); //多给的实参 会被忽略
        demo(‘老丽丽‘);    //如果少给了实参。 有个形参没有对应的实参，该形参默认值 undefined
        demo();         //不传实参也不会报错，默认的形参都是undefined

        console.log(‘‘)


        //参数默认值
        function fn(a, b=‘小梅梅‘) {
            console.log(`${a} 和 ${b} 一起跳舞`);
        }

        fn(‘小刚刚‘);
        fn(‘小刚刚‘, ‘小丽丽‘);

        console.log(‘‘);



        //可变数量的参数
        //声明函数 实现 所有参数累加的和
        function sum() {
            //arugments 只能在函数里面用
            var s = 0;
            
            //遍历 arguments 取出其中的每一个值,arguments.length统计传入参数的长度
            for (var i = 0; i < arguments.length; i ++) {
                s += arguments[i]
            }

            //返回，调用函数拿到返回值，但是要打印一下才能在控制台进行显示
            return s;      

        }

        console.log(sum(1,2,3,4))
        console.log(sum(1,2,3,4,123,123,1231231,123123123123))






    </script>
</body>
</html>

函数的参数

2.4 return

return 可以结束函数
return返回值
js return 只能返回一个值

2.5 回调函数

一个函数就可以接收另一个函数作为参数，这种函数就称之为回调函数(高阶函数)

函数的参数还是函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS回调函数</title>
</head>
<body>
    <script>
        //回调函数 （高阶函数）-------我们为f1和f2传入的不是连个具体的值，而是两个函数
        function fn(f1, f2) {
            return f1(1)+f2(1)
        }

        function demo(n) {
            return n * 100;
        }

        console.log(fn(Math.abs, demo))

        console.log(‘‘);

        //有名函数 从小到大
        function mySort(v1,v2) {
            /*if (v1 > v2) {
                return 5 //换过来 只要是正数 就会交换
            } else {
                return -7 //不变  只要是负数 就不换
            }*/

            return v1 - v2;
        }


        //有些方法的参数 要求就是函数
        var list = [10,23,1,456,8,3,5]; //数组 Array
        console.log(list);
        //排序 字符串排序---------即按位进行比较，然后在进行排序
        //list.sort();
        //按照自然排序
        //list.sort(mySort)
        list.sort(function(v1, v2){
            return v1 - v2;
        })

        console.log(list);


    </script>
</body>
</html>

高级函数之回调函数

2.6 自调函数

函数声明完直接调用

(function(){
    
})();
?
(function 函数名(){
    
})()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自调函数</title>
</head>
<body>

    <script>
        // 就是将函数整体放到小括号中进行调用，有名函数
        (function demo() {
            console.log(‘啊，我被调用了‘);
        })();


         // 既然整体放到小括号中被执行，所以可以将器设置为匿名函数，然后在加小括号进行调用
        (function(){
            console.log(‘啊，我也被调用了‘)
        })()


    </script>
    
</body>
</html>

自调函数

//如果多个自调函数连续写， 中间必须加 ; 否则报错
//产生局部作用域
//有效避免全局变量污染

2.7 递归

函数内部调用自己就是递归函数，

//用递归 实现阶乘
function multiply(n) {
    if (n == 1) {
        return 1
    }
    return n * multiply(n - 1)
}

总结

流程控制分支：单向分支双向分支多向分支(else if switch..case) 嵌套分支
流程控制循环： while循环 do...while循环 for循环
其他控制语句：跳转、异常、严格模式
函数（定义、特点、参数、自调、回调、递归）

以上是关于JavaScript流程控制及函数的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript的流程控制语句以及函数

JavaScript流程控制的三种结构，循环语句及相关练习

逆向及Bof基础实践

20155201 李卓雯《网络对抗技术》实验一逆向及Bof基础

20155307刘浩《网络对抗》逆向及Bof基础

JavaScript流程控制（顺序分支循环）及相关练习

JavaScript流程控制及函数

1 流程控制

1.1 条件语句 分支结构

单向分支

双向分支

多向分支

嵌套分支

1.2 循环语句

while循环

do...while 循环

for 循环

1.3 其他语句

跳转语句

异常

严格模式

1.4 注意

2 函数

2.1 定义函数

2.2 函数特点

2.3 函数的参数问题

形参和实参

参数默认值

可变数量的参数

2.4 return

2.5 回调函数

2.6 自调函数

2.7 递归

总结

1.1 条件语句分支结构