一、函数的核心作用
函数是 JS 中封装可复用代码块的核心方式,能实现:
逻辑复用(比如多次计算 BMI、多次格式化时间);
代码解耦(把复杂逻辑拆分成多个小函数);
延迟执行(比如点击按钮才执行的逻辑)。
二、函数的 4 种定义方式(重点)
JS 函数定义方式比 Java 灵活,核心有 4 种,优先级:函数声明 > 箭头函数 > 函数表达式 > 构造函数
- 函数声明(最常用,推荐)
javascript
运行
// 语法:function 函数名(参数1, 参数2) { 逻辑代码 }
function add(a, b) {
// 函数体:要执行的逻辑
let sum = a + b;
// 返回值:把结果返回给调用者(无return则返回undefined)
return sum;
}
// 调用函数:函数名(参数值)
let result = add(3, 5);
console.log(result); // 8
- 箭头函数(ES6 新增,简化写法)
适合短逻辑、回调函数(比如数组遍历、事件处理),没有自己的 this(后续进阶)。
javascript
运行
// 语法:const 函数名 = (参数1, 参数2) => { 逻辑代码 }
// 极简版:单参数+单行返回,可省略()和{}和return
const double = num => num * 2;
console.log(double(4)); // 8
// 标准版:多参数+多行逻辑
const calculateBMI = (weight, height) => {
let bmi = weight / (height * height);
return bmi.toFixed(2); // 保留2位小数
};
console.log(calculateBMI(65, 1.75)); // 21.22
- 函数表达式(匿名函数赋值给变量)
javascript
运行
// 匿名函数表达式
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(2, 6)); // 12
// 命名函数表达式(便于调试)
const divide = function div(a, b) {
if (b === 0) return "除数不能为0";
return a / b;
};
console.log(divide(10, 0)); // 除数不能为0
- 构造函数(几乎不用,了解即可)
javascript
运行
// 不推荐:可读性差,易出错
const subtract = new Function('a', 'b', 'return a - b');
console.log(subtract(10, 3)); // 7
三、函数的参数(JS 核心特性:灵活)
JS 函数参数和 Java 差异极大,核心特点:不限制参数个数、支持默认值、剩余参数 - 参数不匹配(无报错,灵活处理)
javascript
运行
function sum(a, b) {
return a + b;
}
// 1. 传参少于定义:未传的参数为undefined
console.log(sum(5)); // NaN(5 + undefined = NaN)
// 2. 传参多于定义:多余参数可通过 arguments 获取
function total() {
let res = 0;
// arguments:类数组,存储所有传入的参数
for (let i = 0; i < arguments.length; i++) {
res += arguments[i];
}
return res;
}
console.log(total(1, 2, 3, 4)); // 10
- 默认参数(ES6 新增,解决参数缺失问题)
javascript
运行
// 语法:参数名 = 默认值
function add(a = 0, b = 0) {
return a + b;
}
console.log(add(5)); // 5(b 用默认值 0)
console.log(add()); // 0(a、b 都用默认值) - 剩余参数(ES6 新增,接收多余参数)
javascript
运行
// 语法:...参数名(生成真数组,比 arguments 好用)
function sum(first, ...rest) {
let res = first;
rest.forEach(item => res += item);
return res;
}
console.log(sum(1, 2, 3, 4)); // 10
四、函数的返回值
用 return 关键字返回结果,执行到 return 后函数立即结束;
无 return 时,函数默认返回 undefined;
可返回任意类型(数字、字符串、数组、对象、甚至另一个函数)。
javascript
运行
// 返回对象
function getUser() {
return {
name: "张三",
age: 18,
score: 90
};
}
let user = getUser();
console.log(user.name); // 张三
// 无return
function sayHi() {
console.log("你好");
}
let res = sayHi();
console.log(res); // undefined
五、JS 函数 vs Java 函数(核心区别)
特性 JavaScript 函数 Java 函数
参数限制 无限制个数,可传多 / 传少 必须严格匹配参数个数 / 类型
返回值 可返回任意类型,无 return 返回 undefined 必须匹配声明的返回类型,void 表示无返回
定义位置 可在任意位置定义(甚至函数内定义函数) 只能在类中定义(方法)
函数类型 函数是 “一等公民”(可赋值、传参、返回) 方法属于类 / 对象,不能单独赋值
六、新手常见误区
箭头函数的 this 陷阱:
箭头函数没有自己的 this,不能用于构造函数、事件处理函数(比如按钮点击);
参数默认值的顺序:
默认参数要放在普通参数后面,比如 function fn(a, b = 0) ✅,function fn(a = 0, b) ❌;
函数提升:
函数声明会 “提升” 到作用域顶部,可先调用后定义;但函数表达式 / 箭头函数不行。
javascript
运行
// 函数声明:提升生效,可先调用
console.log(add(2, 3)); // 5
function add(a, b) {
return a + b;
}
// 箭头函数:无提升,先调用会报错
// console.log(double(4)); // 报错:double is not defined
const double = num => num * 2;
总结
定义函数优先用函数声明(简单逻辑)和箭头函数(回调 / 短逻辑);
参数处理:用默认参数避免 undefined,用剩余参数接收多参数,替代 arguments;
核心特性:JS 函数是 “一等公民”,可赋值、传参、返回,灵活性远高于 Java 方法;
避坑重点:箭头函数无自己的 this,函数提升仅对函数声明生效。