← 返回目录

6. 函数基础与返回值

函数就是「提前写好的榨汁机」：把一段常用的活儿装好，以后想榨果汁，丢苹果进去、按一下开关，果汁就出来，不用每次重新搭机器。今天学会怎么做榨汁机、怎么投料（实参）、怎么把果汁端出来（return）。

6.1 互动演示（调用函数 / 形参实参 / return 返回值 / 无 return 是 undefined）

6.2 知识点逐条讲解（配合代码）

① 函数是什么？为什么要做函数？

函数是把一段要反复用的代码打包起来，起个名字，想用就喊名字。好处三个：不重复写（同样的活儿写一次就行）、看得清楚（大活拆成小块）、互不干扰（机器里的零件不跑到外面来）。

// 做一台机器：名字用动词，一看就知道干啥
function getSum() {
    let total = 0;        // 累加器，从0开始
    for (let i = 1; i <= 100; i++) {
        total += i;       // 把1到100一个个加进去
    }
    console.log(total);   // 最后打出 5050
}
getSum();                 // 喊一声名字，机器就转一遍

	

② 两种做机器的方式：命名函数 vs 函数表达式

// 命名函数：整台提前装好，先喊后造也没事
function getSum() { ... }

// 函数表达式：右边是个匿名函数，塞进左边的变量 calc
let calc = function () {
    console.log("函数表达式执行");
};
calc();   // 只能通过变量名 calc 来喊它

	

③ 形参与实参：机器的投料口 vs 你真丢进去的料

形参是做机器时括号里留的投料口（占位符），实参是你真丢进去的料，按顺序一个对一个。

function add(a, b) {     // a、b 是机器上的投料口
    console.log(a + b);  // 两个料加起来
}
add(10, 20);             // 真料 10、20 按顺序进 a、b

	

④ return：把果汁端出来，而且机器立刻停机

如果你在 return 后面还写代码，那行永远不会被执行。因为 return 干两件事：①把机器里的结果递出来给喊它的人；②立刻停机，后面的代码全跳过。机器没写 return，默认递给你一个 undefined。

function add(a, b) {
    return a + b;              // 把结果递出去，同时停机
    console.log("这行不会执行"); // return 后面的代码再也跑不到
}
let res = add(3, 5);          // 接住递出来的结果
console.log(res);             // 8

	

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：把「求和」「格式化时间」「校验手机号」这种重复活儿包成函数，到处调用。

② 常见坑：函数没写 return 却去用返回值，拿到 undefined；函数表达式定义前就调用报错。

③ 怎么解决：需要结果就 return；函数表达式遵守「先定义后调用」；命名函数才能先调用后定义。