JavaScript函数参数完全指南：从基础到高级技巧，一网打尽！

一、函数参数的基本使用

1.1 基本参数传递

// 基本参数
function greet(name, message) {
    return `${name}, ${message}!`;
}

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

1.2 默认参数（ES6+）

// 默认参数值
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）

// 收集所有剩余参数
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关键字

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 使用对象解构处理多个参数：提高可读性和可维护性

// 对象参数解构
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 优先使用默认参数 ：代替逻辑或（||）操作符

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

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

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

// 推荐 (ES6+)
function sum(...numbers) {}

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

总结

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