• JS 函数

    一、函数

    1、函数定义

    • function，是被设计为执行特定任务的代码块
    • 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

    2、函数使用

    • 函数的声明语法
      在这里插入图片描述
    • 函数名命名规范
       和变量命名基本一致
       尽量小驼峰式命名法
       前缀应该为动词
       命名建议：常用动词约定
      在这里插入图片描述
    • 函数的调用语法
    函数名（）

    • 1

    注意：
    声明（定义）的函数必须调用才会真正被执行,使用 () 调用函数
    函数一次声明可以多次调用，每一次调用函数体里面的代码会重新执行一次

    • 函数体
      函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才
      会被执行。函数的功能代码都要写在函数体当中。
      在这里插入图片描述

    函数的复用代码和循环重复代码的区别：
     循环代码写完即执行，不能很方便控制执行位置
     函数随时调用，随时执行，可重复调用

    3、函数传参

    （1）意义

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

    （2）有参数的函数声明和调用

    • 声明语法
      在这里插入图片描述
      在这里插入图片描述
      参数列表
       传入数据列表
       声明这个函数需要传入几个数据
       多个数据用逗号隔开

    • 调用语法
      在这里插入图片描述
      调用函数时，需要传入几个数据就写几个，用逗号隔开
      在这里插入图片描述

    • 形参和实参
      在这里插入图片描述
      形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
      实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
      形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）；实参可以理解为是给这个变量赋值
      开发中尽量保持形参和实参个数一致
      我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参

    实参和形参的个数可以不一样多，
    如果实参个数大于形参，依次传给形参，多余实参不参与；如果形参个数大于实参，会有形参没有得到值，即undefined。

    利用arguments可以保存所有实参的值，即可以不用知道需要设置多少形参，arguments会保存所有传过来的实参值。
    //输出为6在这里插入图片描述

    • 案例–函数封装求和
      需求：采取函数封装的形式：输入2个数，计算两者的和，打印到页面中
      在这里插入图片描述

    可能存在用户未输入的情况，不妨设x未赋值，则x为undefined，undefined+大多数都为NaN，这种情况，用户未赋值时，可以默认为0 ，即有了x = x || 0

    4、函数返回值

    （1）返回值函数的概念：

    • 有返回值的函数： 当调用某个函数，这个函数会返回一个结果出来
    • 为什么要让函数有返回值：
      函数内部不需要输出结果，而是返回结果
      对执行结果的扩展性更高,可以让其他的程序使用这个结果
      在这里插入图片描述

    （2）用return返回数据

    • 当函数需要返回数据出去时，用return关键字
    • 语法： return 数据
    • 使用：

    在这里插入图片描述

    • 细节：
       在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
       函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
       函数可以没有 return，这种情况函数默认返回值为 undefined

    （3）返回多个值

    想返回多个值的时候：

    <script>
    function fn(x,y){
      let jia=x+y
      let jian=x-y
      return jia,jian
    }
    let re=fn(1,2)
    document.write(re)
  </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    输出结果为-1，函数一次只能返回一个值

    但是可以把多个值放进数组，返回一个数组

    <script>
    function fn(x,y){
      let jia=x+y
      let jian=x-y
      return [jia,jian]
    }
    let re=fn(1,2)
    document.write(re)     // 3，-1
  </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    （4）断点调试F11

    红框左边的是F10，只能一句一句向下调试，没办法进入函数内部，此时用F11（红框）
    在这里插入图片描述
    在这里插入图片描述

    5、作用域

    （1） 作用域概述

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

    （2）变量的作用域

    在JavaScript中，根据作用域的不同，变量可以分为
    在这里插入图片描述

    <script>
    let n=100          //全局变量
    function fn(){
      let n=10          //局部变量，函数内
      if (true){
        let n=20         //块级变量，if/for等语句内
      }
    }
    fn()
  </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    （3）变量的作用域

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

    但是有一种情况，函数内部的形参可以看做是局部变量。

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

    解决问题：在不同作用域下，可能存在变量命名冲突的情况，到底改执行谁呢？

    • 只要是代码，就至少有一个作用域

    • 根据在内部函数可以访问外部函数变量的这种机制，作用域链：采取就近原则的方式来查找变量最终的值。先在包括变量的最小区域中查找有无值，没有就向上一级找，一层一层，直到找到值为止，找到一个就停止，执行其值

    • 如下题，num在 f2 函数中没找到值，向上到 f1 ，得到 num = 123
      在这里插入图片描述

    6、匿名函数

    函数可以分为：
    在这里插入图片描述

    （1）匿名函数

    • 将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式
      在这里插入图片描述
    • 使用场景：后期 web API

    在这里插入图片描述

    （2）立即执行函数

    场景介绍: 避免全局变量之间的污染，（不需要在全局区域调用，不会被外面的变量影响）
    在这里插入图片描述

    //方式1
 <script>
     (function(x,y){
       document.write(x+y)      //输出3
     })(1,2)
  </script>

//方式2
<script>
    (function (x,y){
          document.write(x+y)   //输出3
    }(1,2))
</script>


// 立即执行函数也能是具名函数
(function fn(x,y){
       document.write(x+y)      //输出3
     })(1,2)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    注意：多个立即执行函数要用 ; 隔开，要不然会报错
    在这里插入图片描述
    最好写一个就在后面加一个分号，或者在下一个立即执行函数之前加一个分号

    7、案例–转换时间案例

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

    <!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>
        let t = prompt('请输入秒数')
        function fn(t){
            h = parseInt(t / 3600 % 24)
            m = parseInt(t / 60 % 60)
            s = parseInt(t % 60)
            h = h<10 ? '0'+h :h
            m = m<10 ? '0'+m :m
            s = s<10 ? '0'+s :s

            return `转换后的时间为${h}时${m}分${s}秒`
        }
        let res = fn(t)
        document.write(res)
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
  • 相关阅读:
    SpringCloud中的Eureka的集群配置
    LabVIEW连续采样与有限采样模式
    消火栓地下水管网压力监测智能化解决方案
    java计算机毕业设计ssm贫困区教育资源捐赠平台element vue前后端分离
    勘误、刷新和正本清源-《企业应用架构模式》将出修订中译本
    【Java 基础篇】Java标准输入流详解：读取用户输入的完整指南
    ros2 服务通讯示范源代码2023年9月27
    [AMEX] LGBM Optuna美国运通信用卡欺诈赛 kaggle
    jquery导航图片全屏滚动、首页全屏轮播图，各式相册
    第二章 环境的选择和安装
  • 原文地址：https://blog.csdn.net/qq_40832034/article/details/125575170