JS 基础第五天

一、函数

1.函数：

function，是被设计为执行特定任务的代码块

2.说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用（代码复用）。

二、函数的使用

1.声明语法：

function 函数名（）{

	函数体
	
}

1649391373800

1649391384405

2.函数命名规范

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议：常用动词约定

1649430271539

1649430298887

3.函数调用方法

1649430374582

注意：声明（定义）的函数必须调用才会真正被执行，使用 ( ) 调用函数

1649430467435

注意：函数一次声明可以调用多次，每一次函数调用函数体里面的代码会从新执行一次

<script>
        function sayHi(){    //声明函数
            //函数体
            document.write('你好')
            document.write('Goodmorning')
            document.write('xx')
            document.write('123')
        }
        sayHi() //调用函数

        function userName(){
            //函数体
            document.write('张三')
            document.write('李狗蛋')
            document.write('次所舞次子')
        }
        userName()
        userName() //函数可以多次调用
    </script>

4.小结

函数是用那个关键字声明的？

function
函数不调用会执行吗？如何调用函数？
1. 函数不调用自己不执行
2. 调用方式: 函数名( )
函数的复用代码和循环重复代码有什么不同？
1. 循环代码写完即执行，不能很方便控制执行位置
2. 随时调用，随时执行，可重复调用

三、函数传参

1.为什么要有参数的函数

若函数完成功能需要调用者传入数据，那么就需要用有参数的函数
这样可以极大提高函数的灵活性

2.声明语法

1649431925499

1649431940112

注意：参数列表可以传入多个，并用逗号（，）隔开

3.有参数函数调用

1649432124325

注意：调用函数时，需要传入几个数据就写几个，用逗号隔开；

num1，num2称为形参；（10,20）称为实参

开发时，形参和实参的个数要一致，若形参和实参个数不一致时，输出的为NAN

<script>
        function getSum(num1,num2){ //num1,num2为形参
            document.write(num1 + num2)
        }
        getSum(10,20)//10 , 20 为实参 在调用函数是要用实参 实参个数与形参个数要一致
        getSum(100,200)
        getSum(50)//实参与形参个数不一致 输出为NAN
    </script>

4.小结

1.函数传递参数的好处是？

可以极大的提高了函数的灵活性

2.函数参数可以分为那两类？怎么判断他们是那种参数？

函数可以分为形参和实参
函数声明时，小括号里面的是形参，形式上的参数
函数调用时，小括号里面的是实参，实际的参数
尽量保持形参和实参的个数一致

3.参数中间用什么符号隔开？

英文状态下的逗号（，）

四、函数返回值

1.有返回值函数的概念：

当调用某个函数，这个函数会返回一个结果出来
这就是有返回值的函数

2.为什么要让函数有返回值

其实我们前面已经接触了很多的函数具备返回值：

1649470405741

是这些函数是JS底层内置的.我们直接就可以使用
当然有些函数，则没有返回值

1649470452365

所以要根据需求，来设定需不需要返回值

3.用return返回数据

1.语法： return+数据（把处理的结果返回给调用者）

1649470846933

1649470856542

2.注意：

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
不能同时执行多个return，只有第一个return生效
函数内部只能运行到 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
函数内部，如果写了return，那么它下面的代码不再执行
return会立即结束当前函数
函数可以没有 return，这种情况函数默认返回值为 undefined（相当于写了return undefined）

function getMax(){
	return 1

}
let num=getMax()//num为函数的返回值	
console.log (num)//输出为1

//即return为多少，函数返回值为多少

 <script>
        function getMax(n1,n2){
            if(n1>n2){
                return n1
            }else{
                return n2
            }
        }

        //输出放在函数包裹之外 称函数返回值  语法 return（形参） return n1
        let num1=getMax(4,7)
        console.log(num1)
        
        let num2=getMax(8,6)
        document.write(num2)

        let num3=getMax(7,9)
        alert(num3)
    </script>

4.小结

1.为什么要让函数有返回值

函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）

对执行结果的扩展性更高,可以让其他的程序使用这个结果

2.函数有返回值用那个关键字？有什么注意事项呢？

语法：return 数据

return后面不接数据或者函数内不写return，函数的返回值是undefined

return能立即结束当前函数, 所以 return 后面的数据不要换行写

五、作用域

1.作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

1649472982590

变量作用域：

1649473164367

变量作用域特殊情况：

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

注：userName='xx' 如果定义变量没有加上let，它就是一个全局变量
函数内部的形参可以看做是局部变量，所以形参相当于函数内部定义的局部变量，只有在函数内部可以使用。

2.小结

1.JS 中作用域分为哪三种？

全局作用域。函数外部或者整个script 有效
局部作用域。也称为函数作用域，函数内部有效
块级作用域。 { } 内有效

2.根据作用域不同，变量分为哪三种？

全局变量
局部变量
块级变量

3.有一种特殊情况是全局变量是那种？我们提倡吗？

局部变量或者块级变量没有let 声明直接赋值的当全局变量看，我们强烈不提倡
还有一种特殊情况，函数内部的形参可以当做局部变量看

4.变量访问原则-作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
作用域链：采取就近原则的方式来查找变量最终的值

六、匿名函数

1.函数分为：

1649475801088

1.匿名函数：

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

2.语法：

1649475856446

调用：

1649475874166

注：其中函数的形参和实参使用跟具名函数一致；

后期webAPI会结合使用

3.立即执行函数

场景介绍: 避免全局变量之间的污染

语法：

1649476094501

注意：多个立即执行函数要用 ; 隔开，要不然会报错

2.小结

1.立即执行函数有什么作用？

防止变量污染

2.立即执行函数需要调用吗？有什么注意事项呢？

无需调用，立即执行，其实本质已经调用了

多个立即执行函数之间用分号隔开

七、综合案例

转换时间案例

需求：用户输入秒数，可以自动转换为时分秒

分析：

用户输入总秒数
计算时分秒（封装函数）里面包含数字补0
打印输出

计算公式：

小时： h = parseInt(总秒数 / 60 / 60 % 24)

分钟： m = parseInt(总秒数 / 60 % 60 )

秒：s = parseInt(总秒数 % 60)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // function getTime(time){
        //     let hour=parseInt(time / 60 / 60)
        //     let minute=parseInt(time / 60) % 60
        //     let second=time / 60
        // }


        
        // 声明一个函数 做到   输入了 秒  返回 时:分:秒
      // PPT  希望 把 时分秒 返回  返回一个数组 [时,分,秒]

      function getTime(time) {
        // 假设 time =2 * 60 * 60 + 2 * 60 + 3

        // 来计算 小时
        let hour = parseInt(time / 60 / 60);

        // 计算 分钟
        // 先计算一下 总的分钟数有多少
        // time =  60*2+2  = 122 / 60 = 2.333
        //  (60*2*100+2)/60 = 200.033333
        // 200.033333   基于这个分钟数 对 60 取余
        // 200  180 = 20
        // 200.004 % 60 = 20

        // 思路  先将秒转成总的分钟数（可能会超过60分钟，对60 取余 ）
        let minute = parseInt(time / 60) % 60;

        // 秒   直接对60 取余即可
        // 71 => 11
        // 122 =>  2
        let second = time % 60;

        // 补0 处理
        hour = hour < 10 ? '0' + hour : hour;
        minute = minute < 10 ? '0' + minute : minute;
        second = second < 10 ? '0' + second : second;

        // console.log(hour, minute, second);

        // 返回了一个数组
        return [hour, minute, second];
      }

      // getTime(61); //  00:01:01
      // getTime(121); //  00:02:01
      // getTime(3 + 60 * 60); //  01:00:03

      // return 可以返回多个值吗 ？？
      // 最严谨的说法 不可以的
      // 较真 可以

      // function getNum() {
      //   // return 1
      //   // return 2
      //   // return 3

      //   // 返回一个数组
      //   return [1, 2, 3, 4];
      // }

      // 输入一个 秒数 返回 时分秒 数组
      let times = getTime(1000);
      console.log(times);

      // 写在网页上
      document.write(`${times[0]}:${times[1]}:${times[2]}`);
    </script>
</body>
</html>