0Pricing
Frontend Academy · 课时

函数：声明、表达式与箭头函数

用三种方式定义函数，了解提升，使用参数和返回值，并编写简洁的箭头函数。

函数：声明、表达式与箭头函数 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是函数

函数是可重复使用的代码块。它们接收输入（参数）、执行逻辑，并可选择返回输出。函数在 JavaScript 中是一等值，可以赋给变量、作为参数传入，也可以由其他函数返回。

函数声明

函数声明使用 function 关键字创建命名函数。声明会被提升，因此您可以在它们出现在代码之前调用它们。

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

函数表达式

函数表达式会将函数赋给变量。它不会被提升（变量会被提升为 undefined）。函数表达式可以是匿名的，也可以是命名的。

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

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

箭头函数

箭头函数是 ES6 引入的简洁语法。它们没有自己的 this，而是从外层作用域继承 this。它们非常适合回调和简短函数。

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

参数与实参

参数是函数定义中列出的名称。实参是调用函数时传入的值。多余的实参会被忽略；缺少的实参是 undefined。

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

默认参数

ES6 允许您为参数设置默认值。当实参为 undefined 时（包括完全未传入实参的情况），就会使用默认值。

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

return 语句

函数默认返回 undefined。请使用 return 输出值。函数执行到遇到的第一个 return 时就会退出，后续代码不会执行。

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

剩余参数

剩余参数 ...args 会将所有剩余实参收集到一个数组中。它必须是最后一个参数。在现代代码中，它取代了旧式的 arguments 对象。

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

作为值的函数（一等公民）

函数可以存储在变量中，可以作为参数传给其他函数（回调），也可以由函数返回。这支持数组方法和事件监听器等强大模式。

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

纯函数

纯函数对于相同的输入总是返回相同的输出，并且没有副作用（不修改 DOM、不发起网络调用、不修改全局状态）。纯函数易于测试、调试和理解。

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

立即调用的函数表达式（IIFE）

IIFE 在定义时会立即运行。过去常用于创建私有作用域。如今由于模块和块级作用域的存在，对它的需求减少了，但在较旧的代码库中仍然可以看到它。

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

快速检查

以下关于箭头函数的说法哪一项是正确的？

回顾：JavaScript 函数

函数声明会被提升。函数表达式和箭头函数不会被提升。箭头函数简洁，并且没有自己的 this。请使用默认参数处理缺少的实参。函数是一等值，可以自由地传递它们。

常见问题解答

「函数：声明、表达式与箭头函数」课时是免费的吗？

是的 — 「函数：声明、表达式与箭头函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「函数：声明、表达式与箭头函数」这节课中我会学到什么？

用三种方式定义函数，了解提升，使用参数和返回值，并编写简洁的箭头函数。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「函数：声明、表达式与箭头函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 变量：let、const、var 与作用域
  2. 数据类型：string、number、boolean、null、undefined
  3. 函数：声明、表达式与箭头函数
  4. 控制流：if、else、switch、for、while
← 返回 Frontend Academy