JS 函数

qq_40832034

已于 2023-02-20 13:24:19 修改

阅读量599

点赞数

文章标签： javascript

于 2022-07-02 17:30:08 首次发布

本文链接：https://blog.csdn.net/qq_40832034/article/details/125575170

版权

前端学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

一、函数

1、函数定义

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

2、函数使用

函数的声明语法
函数名命名规范
 和变量命名基本一致
 尽量小驼峰式命名法
 前缀应该为动词
 命名建议：常用动词约定
函数的调用语法

函数名（）

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

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

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

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，函数一次只能返回一个值

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

<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>

（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>

（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)

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

最好写一个就在后面加一个分号，或者在下一个立即执行函数之前加一个分号

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>

qq_40832034

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS 函数

函数体函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。3、函数传参（1）意义 可以极大提高函数的灵活性声明语法参数列表 传入数据列表 声明这个函数需要传入几个数据 多个数据用逗号隔开调用语法调用函数时，需要传入几个数据就写几个，用逗号隔开形参和实参形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）形参
复制链接

扫一扫