JS基础 -- 大复习(阶段五:函数)

1.概念

将相同的业务逻辑封装起来，重复使用

2.语法

从现实中理解函数的使用：函数声明相当于是 ’做榨汁机‘，函数调用相当于是 ’使用榨法机‘。

分为两部分: 函数的声明 函数的调用

函数声明：

function 函数名 ([形参列表]) {

​ 函数体

​ [return 返回值]

}

函数调用

​ 函数名 ([实参列表])

//案例
function getSum(){   //函数声明
   var sum = 0
   for(var i=1; i<=100; i++){
       sum += i
   }
   console.log(sum)
}
getSum()   //函数调用

 3.形参与实参

实参：函数调用时的参数叫做实参是写实际的参数的

形参：函数声明时的参数叫做形参是用来接收实参参数的

函数的参数可以有也可以没有 个数是不限的

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

注意；在js中，形参的默认值是undefinde

默认参数 ,在调用情况下, 就用默认的参数 ,调用了话就用实参传递的参数

function  getSum(a,b){   //a,b是形参
    console.log(a+b)
}
getSum(1,2)   // 1,2是实参

//形参与实参的个数不匹配的情况
function  getSum(a,b){
    console.log(a+b)
}

getSum(1,2)    //形参与实参个数一至
getSum(1,2,3)  //把3传给函数，但是在函数中没有形参来接收，就不接收
getSum(4)      //相当于b接收是undefined

4.返回值

函数可以有返回值，也可以没有返回值，根据业务逻辑  

function foo(name){
    return name+",我爱你"   // return 返回值
}
var res = foo("学姐")
console.log(res) 

(1)我们函数只是实现某种功能,最终的结果需要返回给函数的调用者 函数名通过return实现

(2) 只要函数遇到return 就把后面的结果 返回给函数的调用者  函数名() = return后面的结果

(3)return只能返回一个值 如果弄逗号分开 那么就会返回最后一个值, 想要多个值一起返回就需要使用有个数组[]来包含要返回的值就可以了 如果没有return 结果返回的就是undefined

// 利用函数 求两个数的最大值

function getMax(num1,num2){

         // if (num1>num2){

         //      return num1

         //  }else{

          //       return num2

        // }

          return  num1>num2 ? num1 : num2;

}

console.log(getMax(1,3))  //3

注意事项：

1.return 可以终止函数的执行，return后面可以不跟 数据

2.如果函数没有return 默认返回就是undefined  

5.函数小案例

 //利用函数求两个数的最大值
function getMax(a, b) {
     // if(a>b){
     //     return a;
     // }else {
     //     return b
     // }

     return a > b ? a : b;
 }

var res = getMax(4, 6)
console.log(res);

//利用函数求三个数的最大值
function getMax(a, b, c) {
     // if(a>b){
     //     //a大于b  
     //     if(a>c){
     //         return a
     //     }else {
     //         return c
     //     }
     // }else {
     //     //b大于a
     //     if(b>c){
     //         return b
     //     }else {
     //         return c
     //     }
     // }
     return a > b ? (a > c ? a : c) : (b > c ? b : c)
 }
var res = getMax(19, 10, 3)
console.log(res);

//冒泡排序 :从小到大开始 排序

function jg(){

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 tmp=arr[j];

             arr[j]=arr[j+1];

             arr[j+1]=tmp;

           }

      }

  }

return arr

}

var k= jg([1,5,9,4,6,8]);

log(k)

6.arguments的使用

1.在任意函数内部都有一个看不见的arguments，除了箭头函数外

2.arguments是一个长的像数组的伪数组，可以对它进行遍历

3.函数调用的实参变成了arguments的元素

function getSum(){
   var sum = 0
   // arguments = [[1,2,3]]   [[2,3,9,4,5]]
   for(var i = 0; i< arguments.length; i++){
       sum += arguments[i]
   }
   return sum
}
var res1 = getSum(1,2,3)
console.log(res1);  //6
var res2 = getSum(2,3,9,4,5)
console.log(res2);  //23 

7.函数声明的两种形式

 a.声明式

function fn(){
    console.log("我是声明式的函数")
}
fn()

b.表达式式（匿名式） 函数也是一种数据类型  

var fn = function(){
    console.log("我是表达式式的函数")
}
fn() 

8.作用域

概念：代码（变量）起作用效果的区间范围

分类：全局作用域 局部作用域

重点：es6之前只有函数的{}才有限定作用域

 <script>
    var a = 10;     //全局
    
    function fn(){
        var b = 20  //局部
    }

    if(true){
        var c = 30   //全局
    }

    while(true){
        var d = 40   //全局的
    }
</script>

 9.全局变量与局部变量

全局变量：变量声明在全局作用域下

局部变量：变量声明在函数内部

注意点：在函数内部变量没有声明，直接赋值，就是全局变量（这句话在一定的条件下有问题）

10.变量的生命周期

变量的生命周期指的是变量从什么时候开始创建，么时候销毁。

全局变量的生命周期：

​ 生：代码开始运行

​ 死：关闭浏览器当前的窗口

局部变量的生命周期：

​ 生：函数开始调用时

​ 死：调用函数完毕时 （将来学习闭包时这句话又要注意）

11.作用域链

函数内部是可以套函数的，因此函数内部形成了作用域链

重点：函数内部的变量如果没有找到，就向上一层查找，上一层出没有，再向上一层查找，因为形成了一条查找的链条。

做题时的原则：就近原则

function fn1(){      //   0级链    有函数 fn1
    var a = 1
    function fn2(){  //   1级链    有a=1 与函数 fn2
        var b = 2
        function fn3(){   //2级链       有b=2  与函数 fn3
            var c = 3
            console.log(c)   //3级链    有c = 3
        }
        fn3()
    }
    fn2()
}

fn1()

函数在我们的整个js中是非常重要的,一等公民的存在,鞋子们要加油哦,掌握其中的思路,慢慢的一步一步解析.