freeCodeCamp 前端开发教程：深入理解函数的作用与工作原理

freeCodeCamp 前端开发教程：深入理解函数的作用与工作原理

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

什么是函数？

在编程中，函数是执行特定任务或计算值的可重用代码块。想象函数就像一台机器：它接收输入（参数），进行一系列操作（函数体），然后产生输出（返回值）。

为什么需要函数？

1. 代码复用：避免重复编写相同功能的代码
2. 模块化：将复杂问题分解为小任务
3. 可维护性：修改功能只需修改一处
4. 抽象化：使用者无需了解内部实现细节

函数的基本结构

function 函数名(参数) {
  // 函数体
  return 返回值;
}

函数声明与调用

声明函数

function greet() {
  console.log("Hello, Jessica!");
}

调用函数

greet(); // 输出: "Hello, Jessica!"

参数与返回值

带参数的函数

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

greet("Alice"); // 输出: "Hello, Alice!"
greet("Nick");  // 输出: "Hello, Nick!"

返回值

默认情况下，函数返回undefined。使用return语句可以返回特定值：

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

console.log(calculateSum(3, 4)); // 输出: 7

匿名函数

匿名函数是没有名称的函数，通常赋值给变量：

const sum = function(num1, num2) {
  return num1 + num2;
};

console.log(sum(3, 4)); // 输出: 7

默认参数

ES6引入了默认参数功能：

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

greetings();      // 输出: "Hello, Guest!"
greetings("Anna"); // 输出: "Hello, Anna!"

常见问题解答

Q: 函数不写return语句会返回什么？ A: 默认返回undefined

Q: 如何正确调用函数？ A: 使用函数名后跟括号，如函数名()

Q: 默认参数如何使用？ A: 在参数声明时使用等号赋值默认值，如function(a=1)

实践练习

function mystery(a, b = 3) {
  return a * b;
}
console.log(mystery(4)); // 输出什么？

答案：12，因为b使用了默认值3，4*3=12

总结

函数是JavaScript编程的核心概念之一。通过本教程，你应该已经掌握了：

• 函数的基本语法
• 参数和返回值的用法
• 匿名函数的概念
• 默认参数的使用

掌握这些基础知识将为学习更高级的JavaScript概念打下坚实基础。

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp