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循环
其他控制语句：跳转、异常、严格模式
函数（定义、特点、参数、自调、回调、递归）

相关阅读:
【Android Developers Training】 49. 轻松录制视频
 【Android Developers Training】 48. 轻松拍摄照片
 【Android Developers Training】 47. 序言：拍摄照片
 【Android Developers Training】 46. 处理音频外放设备
 【Android Developers Training】 45. 控制音频焦点
 【Android Developers Training】 44. 控制你应用的音量和播放
 【Android Developers Training】 43. 序言：管理音频播放
 【Android Developers Training】 42. 从另一台设备接收文件
 【Android Developers Training】 41. 向另一台设备发送文件
 Linux开发常见问题：GCC：链接器输入文件未使用，因为链接尚未完成
原文地址：https://www.cnblogs.com/sui776265233/p/9451296.html

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 条件语句分支结构