【JavaScript】元婴期功法——函数

已于 2025-03-28 11:01:13 修改
阅读量1.2k 收藏 12
点赞数 38
分类专栏： 前端 文章标签： javascript 开发语言 ecmascript
于 2025-03-28 00:11:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_72516377/article/details/146581280
版权

目录

函数

为什么需要函数

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

说明：

  • 函数可将具有相同或相似逻辑的代码 “包裹” 起来，通过函数调用执行这些被 “包裹” 的代码逻辑。

  • 优势在于 精简代码、方便复用。例如 alert()、prompt() 和 console.log() 都是已封装好的 JS 函数，可直接使用。

函数使用

函数声明语法

格式如下：

function 函数名 (){
    函数体
}

代码示例：

function sayHi(){
	document.write('hello') 
}

函数命名规范

和变量命名基本一致，尽量使用小驼峰命名法

前缀应该为动词，例如：function getName() {} 、function addSquares() {}

动词含义
can判断是否可执行某个动作
has判断是否含某个值
is判断是否为某个值
get获取某个值
set设置某个值
load加载某些数据

函数调用

格式如下：

函数名()

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

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function sayHi(){
            document.write('hello') 
        }
        sayHi()
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

函数传参

function getSum(){
    let num1 = 10
    let num2 = 20
    document.write(num1 + num2)
}
getSum()

上述代码中，只能求 10 + 20，函数功能的局限性非常大，无法求其他数值的加法运算

解决办法：把要计算的数字传到函数内，使用有参数的函数

格式如下：

function 函数名(参数列表){
    函数体
}

参数列表中的变量叫形参（形式参数），只在函数中有效；传入的变量叫实参（实际参数）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getSum(num1,num2){
            document.write(num1+num2)
        }
        document.write('20 + 40 = ')
        getSum(20,40)
        document.write('<br>')
        document.write('100 + 200 = ')
        getSum(100,200)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

问题：如果调用带参数的函数时，没有传入参数，形参得不到赋值，函数返回的就是 NaN，这是因为形参的默认值是 undefined

可以通过将形参的默认值改为 0 来解决这个问题

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getSum(num1=0,num2=0){
            document.write(num1+num2)
        }
        document.write('有参数的调用：')
        getSum(20,40)
        document.write('<br>')
        document.write('无参数的调用：')
        getSum()
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

这个默认值只会在缺少实参参数传递的时候才会生效

函数返回值

在很多情况下，只需要得到函数的结果，而不需要函数进行输出，这个时候就需要函数返回值

当需要返回值时，使用 return 关键字

格式如下：

return 数据

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getSum(num1=0,num2=0){
            return num1+num2
        }
        let result = getSum(10,20)
        document.write(result)
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

注意事项：

  • 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
  • return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
  • 函数可以没有 return，这种情况函数默认返回值为 undefined

作用域

作用域定义：限定程序中名字可用性的代码范围，即名字有效的代码范围

作用域分类及特点：

  • 全局作用域：全局有效，作用于所有代码执行环境（如整个 <script> 标签内部或独立 .js 文件）
  • 局部作用域（函数作用域）：局部有效，作用于函数内的代码环境，因与函数相关，故称函数作用域

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

在 JavaScript 中，根据作用域不同，变量分为：

  • 全局变量：由函数外部用 let 声明，在任何区域均可访问和修改
  • 局部变量：由函数内部用 let 声明，仅能在当前函数内部访问和修改

变量特殊情况说明：

  • 函数内部若未声明变量直接赋值，该变量会被当作全局变量，但此做法强烈不推荐
  • 函数内部的形参，可看作局部变量

变量的访问原则相关内容：

  • 代码必然存在至少一个作用域
  • 写在函数内部的属于局部作用域
  • 若函数中嵌套其他函数，会在该作用域内生成新的作用域
  • 访问变量时遵循 “先局部，局部没有再找全局” 的原则（在可访问的前提下，优先使用局部作用域变量，局部不存在时再查找全局变量）

匿名函数

没有名字的函数，无法直接使用

使用方式：

  • 函数表达式
  • 立即执行函数

函数表达式

函数表达式定义：把匿名函数赋值给一个变量，再通过该变量名称进行调用，这种形式称为函数表达式。

语法：

let fn = function () {  
    // 函数体  
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let fun = function(num1=0,num2=0){
            return num1+num2;
        }
        document.write(fun(1,2))
    </script>
</body>
</html>

函数式表达式的用法跟具名函数一样

立即执行函数

可以避免全局变量之间的污染

格式如下：

// 格式1
(function(){函数体})();

// 格式2
(function(){函数体}());

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        (function(num1=0,num2=0){document.write(num1 + num2)})(20,30);
        (function(num1=0,num2=0){document.write(num1 - num2)}(50,30));
    </script>
</body>
</html>

注意事项：

  • 无需调用，立即执行，其实本质已经调用了
  • 多个立即执行函数之间必须用分号隔开

案例：转换时间

转换公式：

  • 小时：h = parseInt(总秒数 / 60 / 60 % 24)
  • 分钟：m = parseInt(总秒数 / 60 % 60)
  • 秒数：s = parseInt(总秒数 % 60)

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let second = +prompt('请输入秒数')
        function getTime(t){
            let h = parseInt(t / 3600 % 24)
            let m = parseInt(t / 60 % 60)
            let 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 result = getTime(second)
        document.write(`转换后的时间是${result}`)
    </script>
</body>
</html>

结果如下：

屏幕录制 2025-03-26 201824

逻辑中断

短路概念：仅存在于逻辑运算符 && 和 || 中，满足特定条件时会使右边代码不执行

短路条件：

符号短路条件
&&左边为 false 时短路
||左边为 true 时短路

短路原因：通过左边表达式已能确定整个式子的结果，无需再判断右边

运算结果：无论 && 还是 ||，运算结果都是最后被执行的表达式值，常用于变量赋值场景

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(false && 11) // 左边为false就输出左边
        console.log(11 && false ) // 左边为true就输出右边
        console.log(false || 22) //左边为false就输出右边
        console.log(33 || false) // 左边为true就输出左边
    </script>
</body>
</html>

结果如下：

在这里插入图片描述

函数传递参数时就可以写成：

function add(x, y){
    x = x || 0
    y = y || 0
    return x + y
}

这样，无论是有参数传进去还是无参数，都有结果

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值