---

author: 专注前端开发，分享JavaScript干货
title: JavaScript入门④｜函数详解，函数声明与箭头函数的区别
update: 2026-04-28
tags: JavaScript,函数,箭头函数,参数,返回值,前端入门

作者：专注前端开发，分享JavaScript干货
更新时间：2026年4月
适合人群：掌握基础语法，想学会封装代码逻辑的同学

---

前言：函数的本质

函数 = 封装好的、可重复使用的代码块。

比如"计算两个数的和"这件事，写成函数后，以后想用直接调用，不用重复写代码。

---

一、函数的四种声明方式

// 方式1：函数声明（最传统，有提升特性）
function add(a, b) {
    return a + b;
}

// 方式2：函数表达式（赋值给变量）
const multiply = function(a, b) {
    return a * b;
};

// 方式3：箭头函数（ES6+，现代写法）
const divide = (a, b) => {
    return a / b;
};

// 方式4：箭头函数简写（单行可省略{}和return）
const subtract = (a, b) => a - b;

---

二、函数提升（Hoisting）

// 函数声明可以提升，在定义之前调用也能用
console.log(add(2, 3)); // 5 ✅
function add(a, b) {
    return a + b;
}

// 函数表达式不能提升
console.log(multiply(2, 3)); // ❌ ReferenceError
const multiply = function(a, b) {
    return a * b;
};

---

三、箭头函数的特殊规则

3.1 简写形式

// 普通箭头函数
const double = (x) => {
    return x * 2;
};

// 只有一个参数，省略括号
const double = x => x * 2;

// 无参数或多个参数，必须括号
const greet = () => console.log("你好！");
const power = (a, b) => a ** b;

// 返回对象字面量，必须用括号包起来
const createUser = (name, age) => ({
    name: name,
    age: age,
    // 简写
    // name, age
});

3.2 箭头函数没有自己的 this

// 普通函数：this指向调用者
const person = {
    name: "张三",
    sayHi: function() {
        console.log("你好，我是" + this.name);
    }
};
person.sayHi(); // "你好，我是张三"

// 箭头函数：this继承外层作用域（重要！）
const person2 = {
    name: "李四",
    sayHi: () => {
        console.log("你好，我是" + this.name);
    }
};
person2.sayHi(); // "你好，我是undefined" ❌

⚠️ 结论：对象方法内不要用箭头函数，用普通函数。

3.3 箭头函数没有 arguments

// 普通函数有 arguments 对象
function sum() {
    console.log(arguments); // 可以拿到所有参数
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}
sum(1, 2, 3, 4, 5); // 15

// 箭头函数没有 arguments，用剩余参数替代
const sum2 = (...args) => {
    return args.reduce((a, b) => a + b, 0);
};
sum2(1, 2, 3, 4, 5); // 15

---

四、参数详解

4.1 默认参数

// ES6默认参数
function greet(name = "朋友", greeting = "你好") {
    return `${greeting}，${name}！`;
}

console.log(greet());              // "你好，朋友！"
console.log(greet("张三"));        // "你好，张三！"
console.log(greet("李四", "早上好"));// "早上好，李四！"

4.2 剩余参数（Rest Parameters）

// 用...接收多个参数
function max(...numbers) {
    return Math.max(...numbers);
}

console.log(max(1, 5, 3, 9, 2)); // 9
console.log(max(100, 200));      // 200

4.3 解构参数

// 参数解构
function createUser({ name, age, city = "未知" }) {
    return { name, age, city };
}

const user = createUser({ name: "张三", age: 25, city: "北京" });
console.log(user); // { name: "张三", age: 25, city: "北京" }

// 数组解构参数
function processCoords([x, y]) {
    return `坐标：(${x}, ${y})`;
}
console.log(processCoords([10, 20])); // "坐标：(10, 20)"

---

五、回调函数与高阶函数

// 高阶函数：参数是函数，或返回值是函数

// 1. forEach（遍历，不返回新数组）
[1, 2, 3].forEach(num => console.log(num));

// 2. map（返回新数组，每个元素经过处理）
const doubled = [1, 2, 3].map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// 3. filter（返回满足条件的元素组成的新数组）
const evens = [1, 2, 3, 4, 5].filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// 4. reduce（汇总为一个值）
const sum = [1, 2, 3, 4, 5].reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

// 5. find（返回第一个满足条件的元素）
const firstEven = [1, 3, 5, 6, 8].find(num => num % 2 === 0);
console.log(firstEven); // 6

// 6. some / every（布尔判断）
const hasEven = [1, 3, 5, 6].some(num => num % 2 === 0);
const allPositive = [1, 2, -3].every(num => num > 0);
console.log(hasEven);    // true
console.log(allPositive); // false

---

六、实战：购物车价格计算

const cart = [
    { name: "JavaScript高级教程", price: 89, count: 2 },
    { name: "Python爬虫实战", price: 59, count: 1 },
    { name: "Vue3实战", price: 79, count: 3 }
];

// 统计总金额
const totalPrice = cart.reduce((sum, item) => {
    return sum + item.price * item.count;
}, 0);

// 找出超过200元的商品
const expensiveItems = cart.filter(item => item.price * item.count > 100);

// 格式化购物车清单
const summary = cart.map(item =>
    `${item.name} × ${item.count} = ¥${item.price * item.count}`
).join("\n");

console.log("=== 购物车 ===");
console.log(summary);
console.log(`总计：¥${totalPrice}`);
console.log("高价商品：", expensiveItems.map(i => i.name).join("、"));

---

七、知识卡

特性	说明
函数声明	有提升，传统用法
函数表达式	赋值给变量，无提升
箭头函数	无this，无arguments，ES6+
默认参数	param = value
剩余参数	...args
this	箭头函数继承外层，方法内慎用

---

八、课后作业

1. 用箭头函数实现：传入一个数组，返回所有偶数的和
2. 用 reduce 实现数组去重
3. 用 map + filter + reduce 组合：筛选出价格>50的商品，计算总金额

有问题欢迎评论区留言，大家一起讨论！

---

标签：JavaScript | 函数 | 箭头函数 | 参数 | 返回值 | 前端入门 | ES6