Skip to content

函数

了解函数如何把可复用代码打包、接收输入并返回输出——程序的构建积木。

你将学到

  • 函数是什么、为什么要用
  • 参数与实参如何工作
  • 如何从函数返回值
  • 定义函数与调用函数的区别

概念讲解

函数

函数是一段带名字的可复用代码块。你定义一次，调用多次。函数让你避免重复自己（DRY 原则：Don't Repeat Yourself），也把程序组织成易于理解的片段。

定义与调用

// 定义
function greet(name) {
  return "Hello, " + name + "!";
}

// 调用
greet("Ada");   // "Hello, Ada!"
greet("Grace"); // "Hello, Grace!"

参数与实参

参数是函数定义里列出的变量（上面的 name）。实参是调用时传入的真实值（"Ada"）。参数是占位符，实参在本次调用中填充它。

返回值

函数可用 return 把值返回给调用方。return 一执行，函数立即停止。若没有 return，默认返回 undefined。

function add(a, b) {
  return a + b;
}
const sum = add(3, 4);  // 7

函数为何重要

函数让你：

  1. 复用代码——写一次，调多次。
  2. 抽象复杂度——用一个名字藏起细节。
  3. 单独测试——小函数容易验证。
  4. 组合——函数调用函数，逐步搭出行为。

现代 JavaScript 还有箭头函数，语法更短：const add = (a, b) => a + b;，大多数场景下与普通函数等效。

示例代码

              // 计算折后价格的函数
function applyDiscount(price, discountPercent) {
  const discount = price * (discountPercent / 100);
  return price - discount;
}

const original = 100;
const salePrice = applyDiscount(original, 20);
console.log(`$ ${original} with 20% off = $ ${salePrice}`);
// $ 100 with 20% off = $ 80

// 箭头函数语法（更短）：
const tax = (amount, rate) => amount * rate;
console.log(tax(80, 0.08));   // 6.4

applyDiscount 接收两个参数并返回结果。箭头函数 tax 展示了简单函数的简洁写法。

动手试一试

  • Hash Generator

    哈希函数接收输入（文本）返回输出（定长哈希）。相同输入总得相同输出。

常见错误

错误写法

忘记调用函数（只写名字不加括号）。

正确做法

greet 是函数对象；greet('Ada') 才是调用。若打印出函数源码而非结果，就是漏了 ()。

错误写法

以为 return 之后的代码还会执行。

正确做法

return 会立即退出函数。其后的行不可达。把最终计算放在 return 之前。

相关资源

相关代码片段

练习 函数

2 个练习

练习 函数

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误