前端学习笔记-JS-函数

函数

 

什么是函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用

 

函数的定义

• 函数声明

// (1) function 声明函数的关键字 全部小写
// (2) 函数是做某件事情，函数名一般是动词
// (3) 函数不调用自己不执行

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

• 函数表达式(匿名函数)

var fn = function() {
  // 函数体
}

// 函数表达式(匿名函数) 
// var 变量名 = function() {};
var fun = function(aru) {
     console.log('我是函数表达式');
     console.log(aru);

     }
fun('七海灯子');
// (1) fun是变量名 不是函数名  
// (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
// (3) 函数表达式也可以进行传递参数

• 特点：

  函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。 函数一般都用来干一件事情，需用使用动词+名词，表示做一件事情 tellStory sayHello等

 

函数的调用

• 调用函数的语法：

函数名();

• 特点：

  函数体只有在调用的时候才会执行，调用需要()进行调用。 可以调用多次(重复使用)

代码示例：

// 声明函数
function sayHi() {
  console.log("吃了没？");
}
// 调用函数
sayHi();

// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用
getSum();

 

函数的封装

• 函数的封装：把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。
• 简单理解：封装类似于将电脑配件整合组装到机箱中（类似快递打包）

 

函数的参数

• 为什么要有参数

        利于函数的参数实现函数重复不同的代码（但函数可带参数，也可不带参数）

• 语法：

// 函数内部是一个封闭的环境，可以通过参数的方式，把外部的值传递给函数内部
// 带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
  // 函数体
}
​
// 带参数的函数调用
函数名(实参1, 实参2, 实参3);

• 形参和实参

  1. 形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。

  2. 实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。

//x,y实参，有具体的值。函数执行的时候会把x,y复制一份给函数内部的a和b，函数内部的值是复制的新值，无法修改外部的x,y
案例

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}

• 函数形参和实参个数不匹配问题

案例：

<script>
        // 函数形参实参个数匹配
        function getSum(num1, num2) {
            console.log(num1 + num2);

        }
        // 1. 如果实参的个数和形参的个数一致 则正常输出结果
        getSum(1, 2);
        // 2. 如果实参的个数多于形参的个数  只会截取到形参的个数 
        getSum(1, 2, 3);
        // 3. 如果实参的个数小于形参的个数  多于的形参定义为undefined  最终的结果就是 NaN
        // 形参可以看做是不用声明的变量  num2 是一个变量但是没有接受值  结果就是undefined 
        getSum(1); // NaN
        // 建议 我们尽量让实参的个数和形参相匹配
    </script>

 

函数的返回值

当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值

返回值语法：

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
  //函数体
  return 返回值;
}
​
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);

函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作。

返回值详解：

• 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
• 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
• 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
• 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值。

• 函数 return语句只能返回一个值，若书写时，return后面有多个值，返回结果为最后一个值

案例：

    <script>
        // 函数返回值注意事项
        // 1. return 终止函数
        function getSum(num1, num2) {
            return num1 + num2; // return 后面的代码不会被执行
            alert('我是不会被执行的哦！')
        }
        console.log(getSum(1, 2));
        // 2. return 只能返回一个值
        function fn(num1, num2) {
            return num1, num2; // 返回的结果是最后一个值
        }
        console.log(fn(1, 2));

        // 3.  我们求任意两个数的 加减乘数结果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2); // 返回的是一个数组
        console.log(re);
        // 4. 我们的函数如果有return 则返回的是 return 后面的值，如果函数么有 return 则返回undefined
        function fun1() {
            return 666;
        }
        console.log(fun1()); // 返回 666
        function fun2() {

        }
        console.log(fun2()); // 函数返回的结果是 undefined
    </script>

<script>
    //求数组的最大值
    function getArrMax(arr) {
        var max = arr[0];
        for (i = 1; i < arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
    //我们经常用一个变量来接收 函数的返回值 使用更简单
    var re=getArrMax([5, 2, 99, 101, 67, 120]);
    console.log(re);
</script>

 

break、continue、return的区别：

• break：结束当前的循环体（如for、while）
• continue：跳出本次循环，继续执行下一次循环（如for、while）
• return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

 

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

案例：

<script>
        // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
        function fn() {
            console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
            console.log(arguments.length); // 3
            console.log(arguments[2]); //3
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);

            }
        }
        fn(1, 2, 3);
        // 伪数组 并不是真正意义上的数组
        // 1. 具有数组的 length 属性
        // 2. 按照索引的方式进行存储的
        // 3. 它没有真正数组的一些方法 pop()  push() 等等
</script>

<script>
    //求任意数的最大值
    function getMax() {
        var max=arguments[0];
        for (var i=1;i<arguments.length;i++){
            if (arguments[i]>max){
                max=arguments[i];
            }
        }
        return max;
    }
    var re=getMax(5,6,4,9,1555,4);
    console.log(re);
</script>

 

函数可以调用另外一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会遇到函数互相调用的情况

案例：

 function fn1() {
            console.log(111);
            fn2();
            console.log('fn1');
        }

        function fn2() {
            console.log(222);
            console.log('fn2');
        }
        fn1();

<script>
    // isRunYear 判断是否是闰年 函数
    function isRunYear(num) {
        var flag = false;
        if (num % 4 == 0 && num % 4 != 0 || num % 400 == 0) {
            flag = true;
        }
        return flag;
    }

    // 判断二月多少天 函数
    function backDay() {
        var year = parseInt(prompt('请输入一个年份:'));
        if (isRunYear(year)==true){
            alert('今年是闰年，有28天');
        } else {
            alert('今年是平年，有29天');
        }
    }
    backDay();
</script>