JS第六天-函数

黄某的前端奇妙冒险
242 阅读3分钟

函数

一、为什么需要函数？

​ 函数：function，是被设置执行特定任务的代码块（一坨代码）

​ 本质：把相似逻辑代码封装起来，精简代码方便复用

二、函数的使用

​

​ 思考：如果想要获取多个不同数组中的最大值，要怎么做？ 使用函数 （代码复用）

​ 老师演示

<script>
      let arr1 = [1, 3, 2, 66, 33, 22];
      let arr2 = [1, 3, 2, 663, 33, 22];
      let arr3 = [1, 3, 2, 665, 33, 22];

      let max1 = getMax(arr1);
      let max2 = getMax(arr2);
      let max3 = getMax(arr3);

      console.log(max1, max2, max3);

      function getMax(arr) {
        let max = arr[0];
        for (let index = 0; index < arr.length; index++) {
          if (arr[index] > max) {
            max = arr[index];
          }
        }
        return max;
      }
</script>

​ 函数：function，是被设计执行特定任务的代码块

​ 本质：函数其实就是把类似的逻辑编程代码 包裹起来，谁要用的时候直接拿出来。

有利于精简代码 方便复用

​

1.函数的声明

1648692461923.png

​ 代码：

<script>
        function sayHi () {

            document.write(`你好啊兄DEI`)
        }
</script>

​ 注意点：

​ 关于函数名的命名规范

​ 1.尽量小驼峰式命名法

​ 2.前缀应该为动词

​ JS中常用动词组

1648692595258.png

2.函数的调用

1648693190113.png

​ 注意点：当声明一个函数，必须要调用才会真正执行，不调用只声明是不执行的

​ 代码：

<script>
    //声明了一个叫sayHi的函数
        function sayHi () {
		//这里就是函数体，将相似代码包裹，知道调用就执行
            document.write(`你好啊兄DEI`)
        }
	//调用了叫sayHi的函数
        sayHi()
</script>

​ 知识拓展：alert()等我们之前学过的带小括号的，本质都是函数的调用。软件中自带封装了此类代码。

函数案例：

1648693912249.png

​ 代码：

<script>

        function sum99 () {
            for (let col = 1; col <= 9; col++) {
            
        
            for (let row = 1; row <= col; row++) {
                sum = row * col
                document.write(`${row}*${col}=${sum}`)
            }
            document.write(`<br>`)
        }
        }
        
        sum99 ()
        sum99 ()
        sum99 ()
</script>

函数案例：

1648693953966.png

<script>
        function sum1() {
            let a = 1
            let b = 2
            let sum = a + b
            console.log(sum) 
        }
        

        function sum2() {
            let sum = 0
            for (let index = 1; index <= 100; index++) {
                sum += index
            }
            console.log(sum)
        }
        sum1()
        sum2()
</script>

​ 思考：这样写是不是有什么缺陷？

​ 问题：不能灵活输入数值，当需求不同仍需修改。不够优雅

​ 解决方法：学习函数传参

三、函数传参

​

作用：当需要用户输入传入数据，就需要有参数的函数，能极大提高函数灵活性。

1648695466755.png

1.参数函数的声明：

​

1648695515602.png ​

​ 代码：

<script>
        function getSum(num1,num2) {
            document.write(num1+num2)
        }
</script>

2.参数函数的调用：

​ 调用语法：

1648695591414.png

​ 代码：

<script>
        // 两个参数,可以理解为声明了两个变量
        function getSum(num1,num2) {
            document.write(num1+num2)
        }
        // 给变量赋值
        getSum(10,20)
</script>

​ 注意点：参数可以写无数个，需要传入几个就写几个

3.形参和实参

​ 形参：指的是写在函数名小括号内的声明的变量 叫做形参

​ 实参： 最后赋值变量的值 叫做实参

​ 注意点：开发中注意 形参和实参数量保持一致！

1648696375712.png

​ 例如：alert（``）在里面打印的内容其实就是调用了传参

传参案例：

1648696522397.png

​ 代码：

<script>
        let arr1 = [1,3,4,2,22]
        let arr2 = [3,2,3,3,4,55]

        // 函数声明  形参只是自己给的一个名字
        function calSum(arr) {
            let sum = 0

            // 函数体 想要实现的需求内容
            for (let index = 0; index < arr.length; index++) {      
                sum += arr[index]
            }
            
            document.write(`${sum}<br>`)
        }

        // 调用函数 相当于给上边参数 赋值代码
        calSum(arr1) 
        calSum(arr2) 
</script>

传参案例：求数组最大值

<script>
        let arr = [1,5645,678,8,13]
        
        function getMax(arr) {

            let max = arr[0]
            for (let index = 0; index < arr.length; index++) {
                if (arr[index]>max){
                    max = arr[index]
                }    
            }
            document.write(`最大值为${max}<br>`)

        }

        getMax(arr)
        getMax([1,6,7,567,123,12,3])
</script>

传参案例：求数组奇数和

<script>
        let arr = [1,3,4,5,7,10]

        function geaSum(arr) {
            let sum = 0
            for (let index = 0; index < arr.length; index++) {
                if(arr[index]%2 !== 0) {
                    sum += arr[index]
                }
                
            }
            document.write(sum)
        }
        geaSum(arr)
</script>

四、函数返回值

​

思考（回想）：为什么要让函数有返回值？什么是函数？

​ 函数是执行特定任务的代码块，那么执行完任务之后要把任务交给我们。就叫函数返回值

​ 本质：当调用某一个函数时，会返回一个结果。（返回用户输入的内容 调用和函数，函数执行了任务 然后返回给我们的值就叫返回值）

​ 语法：return 数据

1.为什么要有返回值？

1648711138127.png

​ 如上图，这些其实也都是叫做返回值，只不过是JS内部自己封装好的一些代码，我们可以直接使用。

​ 一句话说就是函数内部不要输出结果，而是返回一个结果，由函数外部来输出。

​ 特点：拓展性更高，可以让其他程序使用这个代码

​

2.使用场景

​ 当我想让值通过不同方法返回时

1648711226609.png

​

代码：

<script>
        function getMax(n1,n2) {
            if(n1>n2){
                // 用返回值，就不会写死代码。
                return n1
            }else {
                return n2
            }
        }
        console.log(getMax(3,2))
    	alert(getMax(6,3))
</script>

返回值案例 求最值 并且函数外部输出

<script>
        let arr1 = [1,3,4,33,22]

        function getMax(arr) {
            let max = arr[0]
            for (let index = 0; index < arr.length; index++) {
                if(arr[index]>max){
                    max=arr[index]
                }
            }
            return max
        }
        let max = getMax(arr1)
        console.log(max)

        function getMin(arr) {
            let min = arr[0]
            for (let index = 0; index < arr.length; index++) {
                if(arr[index]<min){
                    min=arr[index]
                }
                
            }
            return min
        }
        let min = getMin(arr1)
        console.log(min)
</script>

​ 细节：

​ 1.在函数体中用return 关键字能让内部执行结果交给函数外部来使用，如上

​ 2.一个函数只能1次return，并且return之后的代码不会执行 （return后面数据不要换行写）

​ 3.return会立即结束当前函数

​ 4.函数可以没有return 返回值为undefined (return undefined)

五、作用域

​ 思考：以下情况为何出错？

1648715043015.png

​

1.作用域概念

​ 本质：限定变量的使用范围，这个范围就叫做作用域

​ 特点：作用域提高了逻辑局部性，增强程序可靠性，减少了名字的冲突

1648715362369.png

​ 代码：

<script>
        //在Script标签里的运行区域叫做全局作用域。
        let num = 100 //此时代码写在全局作用域中

        function getMax() {
            let num = 100
            // 在函数标签内运行区域 叫做 局部作用域
        }

        for (let index = 0; index < 4; index++) {
            // 在循环区域内 叫做块级作用域  
        }

        while (ture) {
            //块级作用域
        }
</script>

2.变量作用域

​ 概念：在不同作用域中的变量 可以叫做变量作用域

1648715756065.png

​ 代码：

<script>
        //直接写在 全局作用域 里的变量 叫全局变量
        let num = 100// 任何地方都可以访问

        function getMax() {
            console.log(num)//可以访问到
        }
        getMax()

        function All(params) {
            //写在 局部作用域/函数作用域内的变量 叫局部变量
            let num1 = 100 // 局部变量 不能在自己作用域外 使用 会报错！！！
        }

        console.log(num1) // 此时会报错 因为 局部变量 不能超出自己的作用域范围（大括号外）
    
        
        for (let index = 0; index < 4; index++) {
            // 在块级作用域内的变量 叫块级变量 
            // 类似局部变量，不能超出自己的作用域范围（大括号）
            let num2 = 100
        }

        console.log(num2) // 会报错 同局部变量相同     
</script>

总结：

  1. 可以大致分为两大类
  2. 全局变量 （直接放在script里）/ 局部变量（函数大括号内，块级大括号内）
  3. 同一作用域内 重复同一变量会出错
  4. 寻找变量时，优先寻找自身作用域，就近原则 判断要根据函数的定义出发 而不是函数的调用出发！！！（作用域链）

1648718269314.png

1648718679741.png

​ 输出值：200(从函数定义出发 依据 就近原则 寻找变量即可)

​ 5.全局变量补充细节， 代码如下：

<script>
        // 当变量 没有使用 关键词 就是全局变量,了解就行 因为一般都建议使用关键字

        function func1() {
            /* userName = `索隆` */ //全局变量
        let userName = `索隆` // 局部变量
        }

        func1()
</script>

六、匿名函数 （了解）

​ 概念：拥有名字叫具名函数，没有名字叫匿名函数

1648719967878.png

<script>
        //这叫具名函数 函数名称 func1
        function func1() {}

        //匿名函数  这段代码叫做函数表达式（表示结果的一段代码）  函数等于某个值 函数赋值给了某个变量
        let func2 = function () {
            console.log(`123`)
        }
        
        //调用 是一样使用的
        func2()
</script>

自执行函数（了解）

<script>
        // 函数在定义的同时 直接执行 叫自执行函数 = 匿名函数一起出现
        // 通用功能 防止变量污染 （函数作用域功能 变量的使用）
        // 使用场景 适合做一次性的任务 不希望函数可以得到复用！
        // 使用函数原因 可以包装多段代码 让程序简洁


        /* 需求 页面打开 标题：月薪过万 背景颜色：黄色  以后再也不用了*/
        
        // 把匿名函数剪切 放入()中 就变成 自执行函数
        (function () {
            document.title=`月薪过万`
            document.body.style.backgroundColor=`yellow`
        })
</script>
avatar
文章
阅读
粉丝