JavaScript入门第十三章（函数）

Posted 2021-09-02 海海呐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript入门第十三章（函数）相关的知识，希望对你有一定的参考价值。

函数作用：将代码存入变量中，实现代码复用

1.函数介绍

函数是一种结构，使用function关键字声明
函数不会自动运行
函数定义后，需要主动调用才会触发

//1.声明函数：将代码存入结构中
function 函数名(){
    函数体：一段代码
}

//2.调用函数：执行函数体代码
函数名();

函数与循环

<script>

    /*1.函数与循环区别：本质区别
        a.作用不同：
            循环：一段代码在一个地方执行多次（主动运行）
            函数：一段代码在多个地方执行一次（被动运行）
        b.本质不同
            循环：只是一种语法，让代码重复执行
            函数：是一种数据类型，存储的是代码
    */

    /*2.什么样的代码需要使用函数
            a.这段代码需要在多个地方执行
            b.这段代码通常都是完成一个独立的小功能
    */
    /*3.语法误区：函数语法就两个（声明与调用）
    1.声明函数：  function 函数名(){ 函数体代码 }
    2.调用函数：  函数名()
    3.变量取值：  函数名    (不会执行函数体代码，只是以字符串形式将变量中存储的东西打印出来而已)
    */


    //需求 ： 一段代码 需要在多个地方执行
        //复制粘贴弊端 ： （1）代码冗余  （2）不便于维护

        /* 
        1.函数作用 : 实现某个功能代码的重复利用
        2.函数语法
            a. 声明函数 ： （ *** 函数体代码不会执行  ***）
                function 函数名(){
                    函数体 ：一段代码
                };
            
            b. 调用函数 ： 执行函数体代码
                函数名();
        
         */

        函数注意点
            a.什么样的代码会放入函数中？
                （1）多个地方执行
                （2）独立的小功能
            b.函数与循环 有着本质的区别
                （1）本质区别
                    函数 ：是一种数据类型，存储代码
                    循环 ：是一种语法，重复执行代码
                （2）作用不同
                    函数 ： 一段代码在多个地方执行一次
                    循环 ： 一段代码在一个地方执行多次
         */
</script>

2.函数参数

参数的目的是让函数能够变的灵活，可以完成不同的，但是功能类似的需求
函数参数分为两种：
- 形参：定义函数时的参数，属于占座位
- 实参：调用函数时的参数，属于实际数据
函数不会自动运行：所以先占位；调用时就是要实际运行，所以给数据

3.函数返回值

返回值是函数运行后的结果处理方式
实际开发过程中，不会在函数内部进行输出，都是把结果返回给调用者
- 函数不对结果负责：函数只负责做
return关键字
- JS函数可以没有返回值
- 可以使用return返回任意类型数据
- return会终止函数的继续执行（结束函数运行）

4.函数另一种声明方式

1.函数声明:function 函数名(){};
2.函数表达式:let 函数名 = 匿名函数
- 匿名函数：函数的字面量又称为匿名函数，顾名思义就是没有变量名的函数
- let 函数名 = function(){};
3.两者唯一区别：函数声明可以在任何地方调用，而函数表达式方式调用必须在声明后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        fn1();

        //1.函数声明 ：   function 函数名(){ 函数体代码 }
        function fn1(){
            console.log('11111');
        };

        fn1();

        //2.表达式声明 ： let 函数名 = 匿名函数
        //具名函数 ： 有名字的函数  匿名函数 = 没名字的函数
        // fn2();//报错
        
        let fn2 = function(){
            console.log('2222');
        };
        fn2();

        //3.唯一区别 ：  函数声明可以在任何地方调用，表达式声明只能在声明后调用
    </script>
</body>
</html>