异常教程

JavaScript 函数参数（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

JavaScript 函数参数：从基础到进阶的全面解析

前言

在 JavaScript 开发中，函数是程序逻辑的核心组成部分。而函数参数作为函数与外部交互的桥梁，直接影响代码的灵活性、可维护性和可扩展性。无论是编写简单的工具函数，还是构建复杂的业务逻辑，理解函数参数的特性与最佳实践都是关键。本文将从基础概念出发，逐步深入探讨 JavaScript 函数参数的使用场景、核心知识点以及常见问题，帮助开发者系统性地掌握这一主题。

一、函数参数的基础概念

1.1 函数参数是什么？

函数参数（Function Parameters）是函数定义时接收的输入值，用于在函数内部执行特定操作。例如：

function greet(name) {  
  return `Hello, ${name}!`;  
}  
greet("Alice"); // 输出 "Hello, Alice!"

在上述代码中，name 是函数 greet 的参数，而调用时传入的 "Alice" 是实参（Arguments）。参数的作用是让函数能够动态地处理不同的输入，避免代码重复。

1.2 参数与作用域的关系

函数参数属于函数的作用域，仅在函数内部可见。这意味着即使外部存在同名变量，也不会影响函数内部的参数。例如：

let name = "Global";  
function greet(name) {  
  return `Hello, ${name}!`; // 使用的是函数参数 name  
}  
console.log(greet("Alice")); // "Hello, Alice!"  
console.log(name); // "Global"

二、参数的类型与传递规则

2.1 基本类型参数与引用类型参数

JavaScript 中的参数传递遵循 按值传递 的规则，但需区分 基本类型（如数字、字符串、布尔值）和 引用类型（如对象、数组）。

  • 基本类型：传递的是值的拷贝，修改参数不会影响原始值。

    function changeNumber(num) {  
  num += 10;  
}  
let x = 5;  
changeNumber(x);  
console.log(x); // 5（未改变）

  • 引用类型：传递的是内存地址的拷贝，修改参数会直接影响原始对象。

    function changeObject(obj) {  
  obj.name = "New Name";  
}  
let user = { name: "Alice" };  
changeObject(user);  
console.log(user.name); // "New Name"

形象比喻：

  • 基本类型参数像 抄写一份文件，修改副本不会影响原文件。
  • 引用类型参数像 共享一个文档链接，所有人看到的都是同一份内容。

2.2 默认参数值

ES6 引入默认参数（Default Parameters），允许函数在未传入对应参数时使用预设值。例如：

function calculateDiscount(price, discount = 0.1) {  
  return price * (1 - discount);  
}  
console.log(calculateDiscount(100)); // 90（使用默认 10% 折扣）  
console.log(calculateDiscount(200, 0.2)); // 160

注意：默认值可以是表达式，甚至依赖其他参数：

function createItem(id, name = `Item ${id}`) {  
  return { id, name };  
}  
createItem(5); // { id: 5, name: "Item 5" }

三、进阶参数技巧与模式

3.1 解构赋值参数

结合对象/数组解构，可以优雅地处理复杂参数。例如：

function renderUser({ name, age, email }) {  
  return `${name} is ${age} years old, email: ${email}`;  
}  
const user = { name: "Bob", age: 25, email: "bob@example.com" };  
console.log(renderUser(user)); // "Bob is 25 years old..."

此模式常用于接收配置对象，提升可读性。

3.2 剩余参数与展开运算符

剩余参数（Rest Parameters） 用于收集多个参数为一个数组：

function sum(...numbers) {  
  return numbers.reduce((acc, num) => acc + num, 0);  
}  
console.log(sum(1, 2, 3, 4)); // 10

展开运算符（Spread Operator） 则用于将数组展开为参数：

const numbers = [1, 2, 3];  
console.log(sum(...numbers)); // 6

对比比喻：

  • 剩余参数像 “收集盒”，把多个参数装进一个数组。
  • 展开运算符像 “拆开快递”，把数组内容逐一分发。

3.3 this 的指向问题

在函数内部，this 的值由调用方式决定，而非定义方式。例如：

function greet() {  
  console.log(`Hello, ${this.name}`);  
}  
const person = { name: "Alice", greet };  
person.greet(); // "Hello, Alice"  
greet(); // "Hello, undefined"（全局 this 无 name）

解决方案：

  • 使用箭头函数绑定 this： 
    const greet = () => console.log(`Hello, ${this.name}`);
  • 显式绑定 this： 
    greet.call(person); // 显式指定 this 为 person

四、函数重载与参数多态性

JavaScript 本身不支持函数重载（即同一函数名不同参数列表），但可通过以下方式模拟：

function createItem(id, name, price) {  
  if (typeof name === "number") { // 参数 2 是 price  
    price = name;  
    name = undefined;  
  }  
  return { id, name, price };  
}  
createItem(1, "Book", 10); // { id:1, name:"Book", price:10 }  
createItem(2, 20); // { id:2, name:undefined, price:20 }

更推荐的方式是使用 对象参数：

function createItem({ id, name, price }) {  
  return { id, name, price };  
}  
createItem({ id:1, name:"Book", price:10 });  
createItem({ id:2, price:20 }); // 允许省略 name

五、实践案例与代码示例

5.1 购物车总价计算

function calculateTotal(items, discount = 0) {  
  return items.reduce((sum, item) => sum + item.price, 0) * (1 - discount);  
}  
const cart = [  
  { price: 100 },  
  { price: 50 },  
];  
console.log(calculateTotal(cart, 0.2)); // (150 * 0.8) = 120

5.2 动态参数收集（音乐节票务系统）

function processTickets(...tickets) {  
  return tickets.map(ticket => ({  
    price: ticket.price * 0.9, // 九折优惠  
    status: "confirmed",  
  }));  
}  
processTickets({ price: 50 }, { price: 70 }); // 返回处理后的票务数组

六、常见问题与解决方案

6.1 参数顺序混乱如何解决？

使用 对象解构 或 命名参数：

function makeCoffee({ size, milk = true }) {  
  // 参数顺序无关紧要  
}  
makeCoffee({ milk: false, size: "large" });

6.2 默认参数覆盖问题

确保默认值在参数列表末尾：

function logMessage(message, options = {}) {  
  // 正确：options 默认为空对象  
}

6.3 解构参数时的默认值处理

function render({ name = "Guest", age }) {  
  // 当 name 未传时使用 "Guest"  
}

结论

JavaScript 函数参数的设计既灵活又强大，从基础的按值传递到 ES6 的默认值、解构赋值，再到高级的 this 绑定和参数模式设计，开发者需要根据场景选择合适的技巧。通过本文的讲解，读者应能掌握参数的核心逻辑，并在实际项目中避免常见陷阱。记住：参数不仅是代码的输入，更是函数设计优雅与健壮的体现。

继续探索：

  • 深入理解 JavaScript 作用域与闭包
  • 学习 TypeScript 中的类型注解与函数重载
  • 掌握函数柯里化（Currying）与高阶函数

通过不断实践与优化，函数参数的使用将逐渐成为你编码时的自然习惯。

最新发布

查看更多文章