关于javascript:javascript函数5

36次阅读

共计 5317 个字符，预计需要花费 14 分钟才能阅读完成。

Js 函数的定义

函数：封装了一段可反复执行调用的代码块。

目标：能够让大量代码重复使用

求和

函数的命名是动词，而变量名的命名是名词 


        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {sum = sum + i;}
            return sum;

        }
        console.log(getSum(1, 100)); // 求~100 的和
        console.log(getSum(1, 1000)); // 求 1~1000 的和
    </script>

函数的应用？

1. 申明函数

2. 调用函数

申明函数 

    function 函数名 () {// 函数体}

调用函数 

  函数名 ()

注意事项

  • function 是申明函数的关键字，必须是小写
  • 函数是做某件事情，因而函数名为动词
  • 函数自身不执行，必须调用能力应用
  • 调用函数不要遗记加小括号呀

案例 


    <script>
        // 申明函数
        function sayHi() {return '尧子陌'}

        // 调用函数
        console.log(sayHi())
    </script>

函数的封装 

 函数的封装：简略而言，就是把一个性能或多个性能以函数的形式进行封装，对外提供一个简略的函数接口。简略了解：相似于快递打包。

求 1~10 之间的相乘的后果 


    <script>
        function getSum(num1, num2) {
            var sum = 1;
            for (var i = num1; i <= num2; i++) {sum = sum *i;}
            return sum;

        }
        console.log(getSum(1, 10)); // 求~10 的相乘的后果

    </script>

带参数的函数

  • 函数的参数：形参加实参
  • 形参：申明函数时，函数名前面的小括号外面的参数是形参，形参是模式上的参数。形参是为了承受理论参数传递的值。
  • 实参：调用函数时，函数名前面的小括号外面的参数是实参，实参是实际上的参数。

  • 参数：函数外部的值不固定，咱们能够通过参数调用函数传递不同的值进去 

      // 申明函数
  function 函数名 (形参 1，形参 2...){ }
  // 调用函数
   函数名 (实参 1，实参 2...) 


    <script>
        // 申明函数
        function cook(arr) {return arr}
        

        // 调用函数
        console.log(cook("酸辣土豆丝"))
        console.log(cook("香辣大白菜"))
    </script>

函数的参数能够有，也能够没有, 依据状况而定

函数的案例

求任意两个数的和 

    <script>
        // 申明函数
        function getSum(num1, num2) {return num1 + num2}
        // 调用函数
        console.log(getSum(100, 200))
        console.log(getSum(10, 20))
    </script>

求任意两个数之间的和 

<script>
    // 申明函数
    function getSum(star, end) {
        var sum = 0;
        for (var i = star; i <= end; i++) {sum = sum + i;}
        return sum
    }
    // 调用函数
    console.log(getSum(20, 50))
    console.log(getSum(1, 100))
</script>

函数形参加实参个数的匹配

函数形参加实参个数统一的状况下，则失常输入后果 

<script>
    // 申明函数
    function getSum(num1, num2) {return num1 + num2}

    // 调用函数
    console.log(getSum(10, 20))
</script>

函数形参的个数小于实参的个数，则取形参的个数 

<script>

    // 申明函数
    function getSum(num1, num2) {return num1 + num2}

    // 调用函数
    console.log(getSum(1, 200, 500))
</script>

函数形参的个数大于实参的个数，则后果为 undefined

剖析如下

  • 函数的形参能够看作是未声明的变量，后果为 undefined
  • 任何数值加 undefind 最终后果都为 NaN(不是一个数值)
<script>
    // 申明函数
    function getSum(num1, num2, num3) {return num1 + num2 + num3}

    // 调用函数
    console.log(getSum(100, 200)) // 形参的个数大于实参的个数的状况下 
    console.log(getSum(100, 200, 500)) // 形参的个数与实参的个数统一的状况下
</script>

函数参数的总结

  • 函数能够带参数，也能够不带参数
  • 函数的参数有多个时，两头用英文状态下的逗号相隔
  • 申明函数时，函数名小括号里的参数为形参，其默认值为 undefined
  • 调用函数时，函数名前面的小括号为实参，用来传递值给形参
  • 函数的形参加实参的个数该当统一，否则后果难以预计。

函数的返回值

函数是做某件事情或实现某种性能，最终都会把后果返回给函数调用者 

<script>
    // 申明函数
    function getResult() {return 520}
    // 调用函数
    console.log(getResult())
</script>

察看执行过程，在函数执行过程中，遇到 retern 便会把前面的后果返回给函数的调用者

求两个数之间的最大值

第一种办法：利用 if 语句 

<script>
    function comParison(num1, num2) {if (num1 > num2) {return num1} else {return num2}
    }
    console.log(comParison(20, 50))
</script>

第二种办法：利用三元表达式 

<script>
    function comParison(num1, num2) {return num1 > num2 ? num1 : num2}
    console.log(comParison(20, 50))
</script>

利用函数求最大值

留神：在理论开发过程中，通常用变量接管函数的返回值 

<script>
    function getMax(arr) {var max = arr[0];
        for (var i = 0; i <= arr.length; i++) {if (max < arr[i]) {max = arr[i]
            }
        }
        return max

    }

    // 在理论开发中，咱们通常用一个变量来接管函数的返回值。var result = getMax([5, 2, 22, 96, 85])
    console.log(result)
</script>

return 终止函数

在函数外部 retur 返回的后果前面的语句不执行 

<script>
    function getSum(num1,num2) {
        return num1+num2;
        alert("return 终止函数")  //return 后果前面的代码块不会执行
    }
   console.log(getSum(20,50))
</script>

return 前面只能返回一个值 

<script>
    function  getSum(num1,num2) {return num1,num2}
console.log(getSum(2,5))
</script>

利用数组能够返回多个值 

<script>
    function getSum(num1,num2) {return [num1*num2,num1/num2,num1+num2,num1- num2]
    }
    console.log(getSum(20,50))
</script>

break continue nreturn 的区别

  • break: 完结以后循环
  • continue：跳出以后循环，持续下一次循环
  • return: 不仅能够跳出循环而且能够完结函数体内的代码，返回 return 前面的后果

通过榨汁机来看透函数

arguments 的应用 

 当咱们不确定传递多少个实参的时候，能够应用 arguments 对象，arguments 对象是函数内置的对象，存储着所有传递过去的实参

<script>
    function fn() {console.log(arguments);
        for(var i =0;i<arguments.length;i++) {return arguments[i]
        }
    }
    console.log(fn(20,20,50,80))
    console.log(fn(20,20,50,80,100))
</script>

注意事项

  • arguments 是伪数组，并不是真正的数组
  • 具备 length 属性，依照索引的形式进行存储
  • 不能应用真正的数组办法，如 push() pop() 等等

利用 arguments 求任意个数的最大值

  • 思路如下 数组中求最大值的思路一样，只不过采纳 arguments 对象来获取数组中的最大值。
<script>
        
    function getMax() {
        // 申明一个最大变量 Max
        var Max = 0;
        for(var i=0;i<arguments.length;i++) {if(Max<arguments[i]) {Max = arguments[i]
            }
        }
        return Max;
    }
    
    console.log(getMax(20,50,60)) //60
    console.log(getMax(20,50,60,100)) //100
    </script>
</script>

函数封装的案例

采纳函数封装的形式 反转任意数组 

<script>
    function reserve(arr) {var newArr= [];
        for(var i = arr.length-1 ;i>=0;i--) {newArr[newArr.length] = arr[i]

        }
        return newArr

    }
    console.log(reserve([10,20,50]));
     console.log(reserve([10,20,50,500,4522,205]));
</script>

利用函数封装的形式 实现冒泡排序 

<script>
    function sorce(arr) {for(var i = 0;i<arr.length-1;i++){for(var j = 0;j<arr.length-i-1;j++) {if(arr[j]>arr[j+1]) {var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp


                }
            }
        }
        return arr
    }

    console.log(sorce([20,50,80,30,15,60]))
    console.log(sorce([200,510,880,30,195,60]))
</script>

利用函数封装的形式 实现判断是否是平年

申明一把锁，如果是平年，则返回 true，如果不是平年，则返回 false

<script>
    function isRunYear(year) {
        
        var flag  = false;
        if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) {flag = true;}
        return flag
    }
    console.log(isRunYear(2000))
     console.log(isRunYear(2001))
</script>

函数之间能够相互调用

每个函数都是一个独立的代码块，为了实现特殊任务，函数之间能够互相调用 

<script>
    function fn1() {console.log('111') 
        fn2() // 调用 fn2()
    }
    fn1()

    function fn2() {console.log('222');
        
    }
</script>

求下列代码的后果 

<script>
    function fn1() {console.log(111);
        fn2();
        
        console.log('fn1')

    }

    function fn2() {console.log(222);
        console.log('fn2')
    }
    fn1()
</script>

判断以后年份的二月份有多少天？

在 feBruary 函数中，if 判断语句中调用 isRunYear 函数并传参进去，如果为 true，则弹出 2 月份有 29 天，如果是 false，则弹出二月份有 28 天 

<script>
 function  feBruary() {var year = prompt("请输出以后的年份")
    if(isRunYear(year)) {alert('以后是平年 2 月份有 29 天')
        
    }else {alert('以后是平年 2 月份有 28 天')
    }
 }


 feBruary() // 调用函数


    function isRunYear(year) {
        
        var flag  = false;
        if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) {flag = true;}
        return flag
    }
    console.log(isRunYear(2000))
    console.log(isRunYear(2001))
</script>

函数的两种申明形式

函数的第一种申明形式:function 关键字申明 

function fn() {console.log('hello')
}
fn()

函数的第二种申明形式: 函数表达式申明函数 

<script>
    var fn = function(str) {console.log(str)
    }
    fn('hello word')
</script>

留神：

  • fn 是变量名 而不是函数名
  • 申明变量和申明函数的形式差不多，只不过变量外面存储的值，函数表达式外面存储的是函数
  • 函数表达式也能够传递参数

正文完
javascript
发表至： javascript
2020-08-13
 0
一眼看穿????JS变量，作用域和内存问题
关于javascript:你已经是一个优秀的开发者了吗我不是
什么是npm系列一npm简介
关于javascript:从输入URL到渲染的完整过程