6. 函数基础与返回值

函数就是一段包装好的重复使用的代码，给个名字，调用就执行。

核心三步：
① 声明——function 名字() { 代码 }
② 调用——名字() 就执行
③ 返回值——return 把结果交回来

坑：不写 return 得 undefined、函数声明会提升、调用时别忘了加 ()。

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

点按钮：看函数执行、拿返回值，以及「没 return 就返回 undefined」。

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

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

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

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

// 喊一声名字，机器就转一遍
getSum();

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

方式	写法	能不能先喊后造？
命名函数（常用）	function fn() {}	能！整台机器提前装好
函数表达式	let fn = function() {}	不能！必须先造好再喊

// 命名函数：整台提前装好，先喊后造也没事
// 函数表达式：右边是个匿名函数，塞进左边的变量 calc
function getSum() { ... }

let calc = function () {
  console.log("函数表达式执行");
};

// 只能通过变量名 calc 来喊它
calc();

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

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

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

// 真料 10、20 按顺序进 a、b
add(10, 20);

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

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

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

// 接住递出来的结果
let res = add(3, 5);

// 8
console.log(res);

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

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

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

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

一句话记住：函数=可反复用的榨汁机；命名函数整台提前装好、函数表达式必须先造后用；形参按顺序收实参；return 既递结果又停机，没 return 就是 undefined。

本页重点

API	作用	参数	返回值	代码示例
function f(){}	定义一个函数	无	函数对象	function sayHi() { alert("你好"); }
f()	调用函数，括号一喊就跑	实参	返回值	sayHi(); // 调用它
return x	把结果交回去并结束	要返回的值	该值	function add(a, b) { return a + b; }
不写 return	函数跑完啥也不交	无	undefined	function sayHi() { alert("你好"); } // 返回 undefined