JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!

一、函数参数的基本使用

1.1 基本参数传递

javascript 复制代码
// 基本参数
function greet(name, message) {
    return `${name}, ${message}!`;
}

console.log(greet("Alice", "Good morning"));
// "Alice, Good morning!"

1.2 默认参数(ES6+)

javascript 复制代码
// 默认参数值
function createUser(name, role = "user", isActive = true) {
    return { name, role, isActive };
}

console.log(createUser("Bob"));
// { name: 'Bob', role: 'user', isActive: true }
console.log(createUser("Carol", "admin"));
// { name: 'Carol', role: 'admin', isActive: true }
console.log(createUser("Eve", "user", false));
// { name: 'Eve', role: 'user', isActive: false }

1.3 剩余参数(Rest Parameters)

javascript 复制代码
// 收集所有剩余参数
function sum(prefix, ...numbers) {
    const total = numbers.reduce((acc, val) => acc + val, 0);
    return `${prefix}: ${total}`;
}

console.log(sum("结果", 1, 2, 3, 4)); // "结果: 10"

1.4 函数自带的arguments关键字

javascript 复制代码
function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    console.log("结果:", total);  // "结果: 10"
}

sum(1, 2, 3, 4);

二、参数处理技巧

2.1 使用对象解构处理多个参数:提高可读性和可维护性

javascript 复制代码
// 对象参数解构
function displayUser({ name, age, email = "N/A" }) {
    console.log(`名称: ${name}`);
    console.log(`年龄: ${age}`);
    console.log(`邮箱: ${email}`);
}

const user = { name: "Dave", age: 30 };
displayUser(user);
// 名称: Dave
// 年龄: 30
// 邮箱: N/A

// 数组参数解构
function getFirstAndLast([first, , , last]) {
    return { first, last };
}

const colors = ["red", "green", "blue", "yellow"];
console.log(getFirstAndLast(colors));
// { first: 'red', last: 'yellow' }

2.2 优先使用默认参数 :代替逻辑或(||)操作符

javascript 复制代码
// 推荐
function greet(name = '访客') {}

// 不推荐
function greet(name) {
  name = name || '访客';
}

2.3 合理使用rest参数:代替arguments对象

javascript 复制代码
// 推荐 (ES6+)
function sum(...numbers) {}

// 不推荐 (ES5)
function sum() {
  var numbers = Array.prototype.slice.call(arguments);
}

总结

如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript开发干货。

相关推荐
阿芯爱编程3 小时前
2025前端面试题
前端·面试
前端小趴菜054 小时前
React - createPortal
前端·vue.js·react.js
晓13134 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo4 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
chao_7896 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼6 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原6 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf7 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js
爱编程的喵7 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js