函数与逻辑2026年1月26日星期一

函数基础

可重用的代码块。

广告

查看赞助商以支持 JS Fruggal。

函数是编程的“动词”。它们允许你打包一组指令,给它一个名字,并在你想用的任何时候重用它。

输入-输出机器

把函数想象成一台 面包机
1. 输入 (参数): 你放入面包。
2. 逻辑 (主体): 线圈加热并烘烤面包。
3. 输出 (返回): 它弹出烤面包。

你不需要知道内部线路如何工作就能使用它。你只需要按下按钮。

1. 定义函数

编写函数并不会运行它。它只是“教”电脑如何做这项任务。

// 1. 定义 (教学)
function makeSandwich(filling) {
  // 'filling' 是一个只在这里存在的变量
  return "这是你的 " + filling + " 三明治!";
}

// 2. 调用 (使用)
const lunch = makeSandwich("火鸡");
console.log(lunch);

const dinner = makeSandwich("花生酱和果酱");
console.log(dinner);

"Return" 的困惑

初学者经常混淆 console.logreturn

  • console.log: 就像打印照片。你可以看到它,但不能在代码中使用它。
  • return: 就像给你照片文件。你可以保存、编辑或发送给其他人。
function addWithLog(a, b) {
  console.log(a + b); // 只是打印
}

function addWithReturn(a, b) {
  return a + b; // 返回值
}

const result1 = addWithLog(2, 2); 
console.log("结果 1 是:", result1); // Undefined!

const result2 = addWithReturn(2, 2);
console.log("结果 2 是:", result2); // 4 (成功了!)
广告

查看赞助商以支持 JS Fruggal。

现代箭头函数

在现代 JavaScript (ES6) 中,我们更喜欢更清晰的语法。它的行为大部分相同,但看起来更犀利。

// 旧方式
function oldSum(a, b) {
  return a + b;
}

// 现代方式
// 如果是一行,你甚至不需要 'return' 或大括号!
const newSum = (a, b) => a + b;

console.log(newSum(10, 50));

默认参数

如果有人调用你的函数但忘记了配料怎么办?你可以设置默认值。

const greet = (name = "陌生人") => {
  console.log("你好," + name);
};

greet("Alice"); // 你好,Alice
greet();        // 你好,陌生人 (使用备用值)
广告

查看赞助商以支持 JS Fruggal。