今天学习了函数,主要还是逻辑思维的锻炼,头脑要灵活。总结:多做算法题!!!

函数以及优点 实际就是多行代码的抽取(多行代码会构成特定的功能),减少冗余代码,函数封装,提高了可维护性和可阅读性。  函数的分类 系统函数:window里面所有的函数都属于系统函数console.log(),alert(),prompy()     // 内置函数:所有的内置对象里面的函数 Math.pow()     // 自定义函数:自己定义的函数     // 内置函数和系统函数我们更关注他的使用 自定义函数(定义以及使用)

// 自定义函数的定义以及调用
    // 1.使用function关键词匿名函数(没有名字的函数)
    /* function (形参(可省略)) {
        函数体(代码)
    } //直接调用 */
    /* (function(){
        console.log('匿名函数');
    })() */
    // 匿名函数,声明比较少,没有复用价值
</script>
<script>
    // 自执行的匿名函数,只执行一次,没有复用价值
    (function(){
        console.log('匿名函数');
    })()
</script>
<script>
    // 1.使用function关键词 定义具名函数 
    // function函数名(形参,形参.....){
    //     函数体(代码)
    // }
    // 声明 具名函数(第一种)形参是形容的参数
    function sayhello(name){
        console.log('hello');
    }
    // 调用
    sayhello('李四') //传进去的是实参 根据你要的参数个数来传递对应的参数
    // 具名函数的变种声明 (第二种)
    var sayhi = function(){
        console.log('hi');
    }
    // 调用
    sayhi()//这种声明,调用只能放在定义之后,因为没有赋值
    // 具名函数的两种声明,调用速度来看,第一种更快
    // function 和 var 在预编译阶段就会声明
    // var关键词修饰的变量在预编译阶段不会赋值

    // 使用new Function (new 后面的内容首字母绝对是大写的)
    // var 函数名 = new function函数名(‘形参,形参1’,‘函数体’)
    var sayBye = new Function('console.log("bye bye!!") ')
    sayBye()
    var sayBye = new Function('username','console.log("bye bye!!") ')
    sayBye('李四')
    // 在参数执行之前,有个预编译过程,他会声明对应的function和var关键词修饰的变量(开辟内存的操作)
    // 对应的function的内存空间开辟以后他会将对应的代码块放在其中 等待调用
    // var 修饰的关键词 只会开辟一个空间 并不会进行赋值(默认给他一个undefined的值)


    // return 关键词
    // return返回对应的数据的 他是在函数内容进行数据返回的(当你调用了return操作,后面的内容将不再执行)
    function sum(a,b){
        return a+b;
        console.log('不会执行的代码');
    }
    console.log(sum(1,2));//返回对应的a+b的值
    // 如果没有return关键词,返回的一个undefined的值
    function sayHi(){
        console.log('hi');
    }
    console.log(sayHi());

    // 函数执行过程 
    // 1.方法栈 (执行栈) 把对应的开辟的function内存里面的代码丢给方法栈去执行
    // 2.执行栈就会自动取执行对应的方法 执行完返回对应的结果。
    // 3.

    function say(){
        var a = 10;
        a++;
        console.log(a);
    }
    say();
    say();
</script>

示例:

<script>
    // 阶乘计算
    function compute(n) {
        var sum = 0;
        // 循环1-n
        for (var i = 1; i <= n; i++) {
            sum += i;
        }
        return sum
    }
    console.log(compute(10));
</script>
<script>
    // 计算最小公倍数
    // 方法一
    function double(a, b) {
        if (a > b) {
            for (var i = 1; i <= a * b; i++) {
                a *= i;
                if (a % b == 0) {
                    return a;
                }
            }
        } else {
            for (var i = 1; i <= a * b; i++) {
                b *= i;
                if (b % a == 0) {
                    return b;
                }
            }
        }
    }
    console.log(double(12, 8));

    //方法二
    function fn(number1, number2) {
        var max = number1 > number2 ? number1 : number2
        for (var i = max; i <= number1 * number2; i++) {
            if (i % number1 == 0 && i % number2 == 0) {
                return i;
            }
        }
    }
    console.log(fn(12, 8));
</script>
<script>
    // 判断是否闰年
    function year(time) {
        if (time % 4 == 0 && time % 100 != 0 || time % 400 == 0) {
            console.log('是闰年');
            return;
        } else {
            console.log('不是闰年');
            return;
        }
    }
    year(1696);
</script>
<script>//判断素数 方法一
    var count = 0;

    function fn1(number) {
        for (var i = 1; i <= number; i++) {
            if (number % i == 0)
                count++
        }
        if (count == 2) {
            console.log('素数');
        } else {
            console.log('不是素数');
        }
    }
    fn1(8)
</script>
<script>//判断素数 方法二
    var count = 0;

    function fn3(number) {
        for (var i = 2; i < number; i++) {
            if (number % i == 0) {
                count++;
                break;
            }
        }
        if (!count) {
            console.log('素数');
        } else {
            console.log('不是素数');
        }
    }
    fn3(2)
</script>
<script>
    function fn4(year) {
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            console.log('是闰年');
            return;
        } else {
            console.log('不是闰年');
            return;
        }
    }
    function checkDay(day,max){
        if(day>0 && day<=max){
            console.log('当前日期合法');
        }else{
            console.log('当前日期不合法');
        }
    }
    function fn2(year,month,day){
        if(month>0 && month<=12){
            if(month==2){
                if(fn4(year)){
                    checkDay(day,29);
                }else{
                    checkDay(day,28);
                }
            }else{
                switch(month){
                    case 4: case 6: case 9: case 11:
                        checkDay(day,30);
                        break;
                    default:
                         checkDay(day,31)           
                }
            }
        }
    }
    fn2(2007,2,30)
</script>

函数的嵌套:函数的嵌套: 函数内部可以再包含其他函数; 函数之间允许相互调用,也允许向外调用, 但是不可以调用同级函数的嵌套函数;

<script>
    function fn1(){
        console.log('函数1');
        function fn2(){
            console.log('函数2');
            //fn3() 死循环
            // fn1() 没有结果就是死循环
        }
        function fn2(){
            console.log('函数3');
            // 调用函数2
            fn2()
        }
        fn2()
        fn3()
    }
    fn1() //函数1 函数2 函数3 函数2
</script>

函数中的arguments数组

<script>
    // arguments是一个伪数组(有部分的数组特性)(可以通过length对应的长度[])
    // 下标来访问里面的元素)
    function sum(){//不清楚参数个数
        // 获取里面传递的所有参数 arguments 长度length
        var result = 0;
        for(var i=0;i<arguments.length;i++){
            result += arguments[i]
        }
        return result;
    }
    console.log(sum(1,3,5));
    console.log(sum(1,5));
    console.log(sum(1,5,7,9,8));
</script>
<!-- 所有的函数都具备arguments(对象) -->
<!-- 访问length属性访问长度 -->
<!-- []加下标(从0开始)访问里面的元素 -->

函数作用域:

<!-- <script>
    // 因为作用域的导致 下面找不到number
    var number = 2; //全局作用域 var 关键词声明的是伪全局作用域
    function factorial(n){
        console.log(number);//undefined
        number = 1;//局部变量 位于某一个代码的里面 称为全局变量
        // 解决方法 变量提升 用全局变量去提升
        return number;
    }
    // 作用域链
    // 先往同级的地方找 找不到向上找 一直向上 直到找到为止
    factorial()
    console.log(number); //如果外面没有声明number就找不到number(报错)

    // 作用域:当前一个变量的作用范围 分为局部作用域(在一个函数内或者在一个代码块内他的作用范围就是当前代码块)和全局作用域(他的作用范围是全局的)
    // 当前的作用域内没有找到,就会一直向上找,这个过程就叫做作用域链。
</script> -->
<script>
    var a = 20;
    function fn(){
        console.log(a);//20
        a = 10;
        if(10>9){
            console.log(a);//10
            a =30;
            if(5>4){
                console.log(a);//30
                a = 40;
                if(a>10){
                    console.log(a);//40
                }
            }
        }
    }
    fn()
</script>


<script>
    var a = 20;
    function fn(){
        console.log(a);//20
        // a = 10;
        if(10>9){
            console.log(a);//20
            // a =30;
            if(5>4){
                console.log(a);//20
                // a = 40;
                if(a>10){
                    console.log(a);//20
                }
            }
        }
    }
    fn()
</script>

<script>
    var a = 20;
    function fn(){
        console.log(a);//undefined
        var a = 10;
        if(10>9){
            console.log(a);//10
            var a =30;
            if(5>4){
                console.log(a);//30
                var a = 40;
                if(a>10){
                    console.log(a);//40
                }
            }
        }
    }
    fn()
</script>

Dom的简单操作:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
    <input id="number" type="text">
    <button id="btn">判断奇数偶数</button>
</body>
</html>
<script>
    function handlerClick(){
    // document.getElementById('btn').onclink = function(){
        // 拿到input框里面的内容 获取到input框
        var inputValue = document.getElementById('number').value
        // console.log(typeof inputValue);
        // 判断
        if(inputValue%2==0){
            console.log('偶数');
        }else{
            console.log('奇数');
        }
    }
    // 首先需要点击按钮 获取按键 加点击事件
    // 事件触发自动调用对应的函数(事件驱动)
    document.getElementById('btn').onclick = handlerClick


    // 1.获取对应的标签(通过id获取)
    // document.getElementById('id的属性值')
    // 2.input框的值获取value属性
    // document.getElementById('input框的id').value
    // 3.点击事件 onclink
    // 
</script>

 输入搜索内容打印出来,同按钮实现:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
    <input id="number" type="text" placeholder="请输入电影名">
    <button id="btn">搜索</button>
    <script>
        function handlerClick(){
            // 拿到input框里面的内容 获取到input框
            var search = document.getElementById('number')
            console.log(search.value);
            // 将value为空值
            search.value = ""
        }
        // 首先需要点击按钮 获取按键 加点击事件
        // 事件触发自动调用对应的函数(事件驱动)
        document.getElementById("btn").onclick = handlerClick
    </script>
</body>
</html>

 今日练习!!!

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
    <input type="text" id="number1">
    <select name="" id="s">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="number2">
    =
    <input type="text" id="result">
    <button id="btn">计算</button>
    <script>
        // 简易计算器
        function computer(){
            // 获取两个输入框的值
            var number1 = document.getElementById('number1').value
            var number2 = document.getElementById('number2').value
            // 获取下拉列表的值
            var s = document.getElementById('s').value
            // 设置结果
            document.getElementById('result').value = fn2(Number(number1),Number(number2),s)
        }
        document.getElementById('btn').onclick = computer
    </script>
</body>
</html>
<script>
    function fn1() {
        // 遍历数组
        var result =1;
        for(var i = 0;i<arguments.length;i++){
            result *= arguments[i]
        }
        return result
    }
    console.log(fn1(1,2,3));
</script>
<script>
    // 实现加减乘除运算
    // function fn2(n1,n2){
    //     var sum = n1+n2;
    //     var reduce = n1 - n2;
    //     var product = n1*n2;
    //     var quotient = n1/n2;
    //     console.log('两数相加为' + sum);
    //     console.log('两数相减为' + reduce);
    //     console.log('两数相乘为' + product);
    //     console.log('两数相除为' + quotient);
    // }
    // fn2(3,2)
</script>
<script>
    // 第二种方法
    function fn2(number1,number2,s){
        var result = 0
            switch(s){
                case '+':
                    result = number1+number2
                    break
                case '-':
                    result = number1-number2
                    break
                case '*':
                    result = number1*number2
                    break
                case '/':
                    result = number1/number2
                    break
                default:
                    console.log('参数错误');
            }
            return result
        }
        console.log(fn1(10,20,'+'));
</script>
<script>//写个函数实现n的阶乘
    function fn3(n){
        if(n==1){
            return 1;
        }else {
            return fn3(n-1)*n
        }
    }
    console.log(fn3(3));
</script>
<script>//找出0-100之间7的倍数,和包含7的数字
    for(i=1;i<=100;i++){
        if(i%7==0 || i%10==7 || parseInt(i/10)==7){
            console.log(i);
        }
    }
</script>
<script>//不用循环,计算0-100以内的数字和
    function fn4(n){
        if(n==1){
            return 1;
        }else{
            return fn4(n-1)+n;
        }
    }
    console.log(fn4(100));
</script>
<script>//兔子繁殖问题,设有一只新生兔子,从第四个月开始他们每个月, 月初都生一只兔子, 新生的兔子从第四个月
//月初开始又每个月生一只兔子按此规律,并假定兔子没有死亡,
// n(n<=20)个月月末共有多少只兔子?
    function fn5(n){
        if(n==1 || n==2 || n==3){
            return 1;
        }else{
            return fn5(n-1)+fn5(n-3)
        }
    }
    console.log(fn5(20));
</script>