第二十一天：函数 — 把逻辑封装成可复用的积木
蜗牛往上爬 · 前端工业可视化学习笔记 第 21 篇
昨天的条件和循环让程序有了"逻辑"，但如果同样的代码要写 10 遍呢？函数就是解决方案——把一段逻辑打包，起个名字，随处调用。今天学函数的声明、参数、返回值、作用域和变量提升。
目录
一、函数的两种写法
// 方式一：函数声明（推荐）
function checkDevice(name, temp) {
if (temp > 80) {
return name + " 温度过高";
}
return name + " 正常";
}
// 方式二：函数表达式
var checkDevice2 = function (name, temp) {
return temp > 80 ? name + " 温度过高" : name + " 正常";
};
// 调用方式相同
console.log(checkDevice("CNC-001", 85));
两者的区别：函数声明会整体提升（可以先调用后定义），函数表达式不会。
二、参数与返回值
/**
* 计算平均温度
* @param {number[]} temps 温度数组
* @returns {number} 平均值
*/
function calcAverage(temps) {
var sum = 0;
for (var i = 0; i < temps.length; i++) {
sum += temps[i];
}
return sum / temps.length;
}
var avg = calcAverage([65, 70, 75, 80]);
console.log("平均温度：" + avg); // 72.5
// 参数不传时是 undefined → 用 || 设置默认值
function greet(name) {
name = name || "未知设备";
return "你好，" + name;
}
console.log(greet()); // "你好，未知设备"
三、return 的注意事项
// return 立即结束函数
function findFirstOffline(devices) {
for (var i = 0; i < devices.length; i++) {
if (devices[i].online === false) {
return devices[i]; // 找到第一个就返回
}
}
return null; // 都在线
}
// 没写 return → 返回 undefined
function noReturn() {
var x = 1 + 2;
}
console.log(noReturn()); // undefined
四、arguments 对象
// arguments：函数内的"伪数组"，包含所有实参
function sum() {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
arguments 有 length 和下标，但没有 push/map 等数组方法。ES6 的 rest 参数（
...args）会替代它。
五、作用域：全局与局部
var factoryName = "一号车间"; // 全局变量
function showInfo() {
var deviceName = "CNC-001"; // 局部变量
console.log(factoryName); // ✅ 函数内可访问全局
}
showInfo();
console.log(factoryName); // ✅ 全局可访问
// console.log(deviceName); // ❌ 报错：deviceName is not defined
规则：函数内部能访问外部变量，外部不能访问函数内部变量（这正是闭包的基础）。
六、变量提升
// var 声明提升，赋值不提升
console.log(a); // undefined（不报错！）
var a = 10;
// 等价于：
var a; // 声明提升到顶部
console.log(a); // undefined
a = 10;
// 函数声明整体提升 → 可以先调用后声明
sayHi(); // ✅ "Hi"
function sayHi() { console.log("Hi"); }
// 函数表达式不会提升
// bye(); // ❌ bye is not a function
var bye = function () { console.log("Bye"); };
变量提升是
var的"坑"。ES6 的 let/const 没有这个问题，第 11 周详细对比。
七、实战：封装计算器
/**
* 简易计算器
* @param {number} a 第一个数
* @param {string} op 运算符
* @param {number} b 第二个数
* @returns {number|string} 结果或错误提示
*/
function calculator(a, op, b) {
switch (op) {
case "+": return a + b;
case "-": return a - b;
case "*": return a * b;
case "/":
if (b === 0) return "错误：除数不能为 0";
return a / b;
default: return "错误：不支持的运算符";
}
}
console.log(calculator(10, "+", 5)); // 15
console.log(calculator(10, "/", 0)); // "错误：除数不能为 0"
八、总结
🎯 函数是代码复用的基石。明天深入两个进阶概念：闭包和 this——JS 面试的必考点。