JavaScript函数基础

梦葉樱

于 2024-09-30 00:19:35 发布

阅读量570

点赞数 25

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44826237/article/details/142646311

版权

JavaScript函数基础

1. 为什么需要函数

函数（function）是被设计为执行特定任务的代码块。通过将相同或相似逻辑的代码“包裹”起来，并通过函数调用来执行这些代码，可以有效地提升代码的复用性和开发效率。
常见的 alert()、prompt() 和 console.log() 都是 JavaScript 中内置的函数，它们被封装好供开发者直接调用使用。

总结：

函数可以实现代码复用，提高开发效率。
函数本质是一个执行特定任务的代码块。

2. 函数使用

2.1 函数的声明与调用

函数的声明使用 function 关键字，语法格式如下：

function 函数名(参数1, 参数2, ...) {
    // 函数体
}

注意：声明（定义）的函数必须通过调用才会被执行。调用语法如下：

函数名();

2.2 函数的命名规范

与变量命名规则一致，通常使用小驼峰式命名法。
函数名前缀建议使用动词来描述其功能，如 printMessage、calculateSum 等。

2.3 函数体

函数体负责将相同或相似的代码逻辑“包裹”起来，函数内部的代码只有在调用时才会被执行。

总结：

函数是用 function 关键字声明的。
声明的函数不调用不会执行，调用方式为 函数名()。
函数的复用代码与循环代码的不同在于：循环代码写完即执行，而函数可以随时调用，随时执行。

3. 函数传参

3.1 参数的作用

函数可以接收外部传递的数据，通过形参与实参的方式进行传递，从而提升函数的灵活性。
例如：若函数用于求两个数的和，则可以使用如下方式传递参数：

function add(num1, num2) {
    return num1 + num2;
}

console.log(add(10, 20)); // 输出 30

3.2 形参与实参

形参：在函数声明时写在函数名右侧小括号中的参数称为形参（形式上的参数）。
实参：在函数调用时传入给形参的实际数据称为实参（实际上的参数）。

开发中尽量保持形参和实参个数一致，避免传参不完整导致的逻辑错误。

3.3 参数默认值

当函数声明时未传递实参时，形参的值为 undefined。为了避免这种情况，可以为形参设置默认值：

function greet(name = "Guest") {
    console.log("Hello, " + name + "!");
}

调用 greet() 时输出 Hello, Guest!，而调用 greet("Alice") 时输出 Hello, Alice!。

总结：

函数的参数可以极大提高函数的灵活性。
参数可以分为形参和实参，声明时的是形参，调用时的是实参。
形参可以设置默认值，避免参数缺失导致的错误。

4. 函数返回值

4.1 什么是函数返回值？

当函数执行完特定任务后，可以使用 return 关键字将结果返回给调用者。
有返回值的函数可以将内部的执行结果交给外部使用，从而提升代码的可复用性和扩展性。

例子：

function multiply(a, b) {
    return a * b;
}

let result = multiply(5, 3); 
console.log(result); // 输出 15

4.2 使用 `return` 关键字

return 语法用于返回函数执行后的结果，并立即结束当前函数的执行。return 后面的代码将不会再被执行。

4.3 注意事项

return 后可以接数据，也可以不接数据（函数默认返回值为 undefined）。
return 后面的数据不要换行书写，否则会导致代码错误。

总结：

函数的返回值可以将函数内部的结果返回给外部调用者使用。
return 关键字可以立即结束函数，并将结果返回给调用者。
如果函数中没有 return，或者 return 后没有接数据，则函数返回值为 undefined。

5. 作用域

5.1 什么是作用域？

作用域是指在代码中某个变量、函数等名称可用的范围。作用域的使用可以提高程序的逻辑性和局部性，减少变量冲突。

JavaScript 中的作用域分为以下两种：

全局作用域：作用于整个脚本文件（script 标签）或者独立的 JS 文件。
局部作用域（函数作用域）：作用于函数内部，仅在该函数内有效。

5.2 变量的作用域

根据作用域的不同，变量分为全局变量和局部变量：

全局变量：在函数外部声明的变量，作用于整个程序，可以在任何地方访问和修改。
局部变量：在函数内部声明的变量，只能在当前函数内部访问和修改。

5.3 变量访问原则

变量访问时优先查找局部作用域，若局部作用域中无该变量，再向上查找全局作用域。这种查找方式称为作用域链。

总结：

作用域分为全局作用域和局部作用域。
局部变量和全局变量的访问优先级是：先局部，后全局。

6. 匿名函数

6.1 什么是匿名函数？

匿名函数是没有名字的函数，无法直接通过函数名来调用。通常匿名函数可以通过函数表达式或者立即执行函数的形式来使用。

6.2 匿名函数的使用

函数表达式：
将匿名函数赋值给一个变量，并通过该变量名称来调用匿名函数。
```
let sayHi = function() {
    console.log("Hi!");
};

sayHi(); // 输出 "Hi!"
```
立即执行函数：
匿名函数可以通过立即执行的方式来使用，从而避免全局变量污染。
```
(function() {
    console.log("立即执行函数");
})();
```

6.3 注意事项

立即执行函数无需调用，会在定义后立即执行。
多个立即执行函数之间用分号隔开，否则会报错。

总结：

匿名函数没有名字，不能直接通过名字调用。
可以通过函数表达式或者立即执行函数来使用匿名函数。

7. 综合案例

7.1 需求案例：转换时间

编写一个函数，接收用户输入的秒数，并自动转换为时、分、秒格式输出。

function convertSeconds(totalSeconds) {
    let hours = parseInt(totalSeconds / 3600);
    let minutes = parseInt((totalSeconds % 3600) / 60);
    let seconds = totalSeconds % 60;
    console.log(`时间：${hours}小时 ${minutes}分钟 ${seconds}秒`);
}

convertSeconds(5000); // 输出 "时间：1小时 23分钟 20秒"