javascript中的函数

84 阅读2分钟
1. 什么是函数?
1.1 函数是专门用来封装代码的,函数是一段可以随时被反复执行的代码块。
1.2 好处:冗余代码变少了,需求变更,需要修改的代码变少啦。

        function sum(a,b){
            //函数里的res外部访问不了,需要return返回给函数的调用者
            let res = a + b
            return res
        }  

        let result = sum(10,20)
        console.log(result)
1.3 函数没有通过return明确返回值,默认返回undefined 

        function demo(){
            console.log(111) //111
            return; //undefined 
        }   
    注意:return作用立即结束当前所在函数    
1.4 js中的函数和数组一样,都是引用数据类型(对象类型),既然是一种数据类型,所以也可以
    保存到一个变量中,将来可以通过变量名称找到函数并执行函数。
    
        let fun = function(){
            console,log(123)
        }

        fun()
2. 函数中的arguments
2.1 arguments的作用:保存所有传递给函数的实参
    注意点:每个函数中都有一个叫做arguments的东东

        function demo(){
            //arguments其实是一个伪数组
            console.log(arguments) [10,20]
            let sum = 0;
            for(let i=0;i<arguments.length;i++){
                let num = arguments[i]
                sum = sum+num   //sum+=num
            }
            return sum
        }

        let result = demo(10,20)
        console.log(result)  //30
3. 函数拓展运算符
3.1 拓展运算符在等号左边,将剩余的数据打包到一个新的数组中

        let [a, ...b] = [1,3,5,7]
        console.log(a) //1
        console.log(b) //[3,5,7]
3.2 拓展运算符在等号右边,将数组中的数据解开   

        let arr1 = [1,3,5]
        let arr2 = [2,4,6]
        let arr = [...arr1, ...arr2]
        console.log(arr) //[1,3,5,2,4,6]
3.3 拓展运算符在函数的形参列表中的作用:将传递给函数的所有实参打包到一个数组中。
    注意点:拓展运算符只能写在形参列表的最后。
    
        function demo(...values){
            console.log(values) //[10,20,30]
            let sum = 0;
            for(let i=0;i<values.length;i++){
                let num = values[i]
                sum = sum+num  //sum += num
            }
            return sum
        }

        let result = demo(10,20,30)
        console.log(result)
4. 函数形参默认值
4.1 在es6之前可以通过逻辑运算符来给形参指定默认值。
    格式:条件A || 条件B。
    如果条件A成立,那么就返回条件A。如果条件A不成力,无论条件B是否成立,都会返回条件A。
    
        function demo(a,b){
            a = a || 'liu'
            b = b || 'ren'
            console.log(a,b) //10,ren
        }

        demo(10)
4.2 从es6开始,可以直接在形参后面通过=指定默认值。
    注意点:es6开始的函数形参默认值还可以从其它的函数中获取。
    
        function demo( a=10,b=getDefault() ){
            console.log(a,b) //10,20
        }

        demo();

        function getDefault(){
            return 20
        }
5. 函数作为参数和返回值
5.1 将函数作为其他函数的参数。
        let say = function(){
            console.log(123)
        } 

        function test(fn){
            fn();
        }

        test(say);
5.2 将函数作为其它函数的返回值。
    注意点:只有在javascript中函数是可以嵌套定义的。其它编程语言是不可以的。
        function demo(){
            let say = function(){
                console.log(123)
            }
            return say;
        }

        let result = demo()
        result();
6. 匿名函数
6.1 什么是匿名函数? 就是没有名称的函数。
        
        function(){
            console.log(123)
        }
    
6.2 匿名函数的注意点:匿名函数不能够只定义不使用,否则报错。
6.3 匿名函数的应用场景:
    6.3.1 作为其它函数的参数:
    
            function demo(fn){
                fn();
            }

            demo(function(){
                console.log(123)
            })
     6.3.2 作为其它函数的返回值
     
             function demo(){
                 return function(){
                     console.log(123456)
                 }
             }

             let result = demo();
             result();
     6.3.3 作为一个立即执行的函数
         
             ( 
               function(){
                 console.log(456)
               } 
             )();
7. 箭头函数
7.1 什么是箭头函数:是es6中新增的一种定义函数的格式。
    目的:为了简化定义函数的代码
7.2 箭头函数的注意点:
    7.2.1 在箭头函数中如果只有一个形参,那么()可以省略。 
    7.2.2 在箭头函数中如果{}中只有一句代码,那么{}也可以省略。
    
    let demo = (name) =>{
        console.log(name)
    }
    
    demo('liu')
    //简写
    let demo = name =  console.log(name)
8. 递归函数
8.1 什么是递归函数?
    就是在函数中自己调用自己,称之为递归函数。
    递归函数在一定程度上可以实现循环功能。
8.2 递归函数的注意点:
    每次调用递归函数都会开辟一块新的存储空间,所以性能不是很好。
       
       function login() {
            // 1.接收用户输入的密码
            let pwd = prompt("请输入密码");
            // 2.判断密码是否正确
            if(pwd !== "123456"){
                login();
            }
            // 3.输出欢迎回来
            alert("欢迎回来"); //执行了三次
        }
        login();
9. 函数中变量作用域
9.1JavaScript中函数后面{}中的的作用域, 我们称之为"局部作用域"
        function test() {
                var num1 = 123; // 局部变量
                let num2 = 123; // 局部变量
                num3 = 123; // 全局变量,不推荐使用
            }
            test();
            console.log(num1)  //报错
            console.log(num2)  //报错
            console.log(num3)  //123