参数与返回值

JavaScript函数的参数处理非常灵活，支持默认参数、剩余参数和参数解构等特性。函数的返回值可以是任何类型，包括其他函数。本文将详细介绍JavaScript函数的参数和返回值处理机制。

函数参数基础

在JavaScript中，函数参数是函数定义中列出的变量名，用于接收传入函数的值。

基本语法

function functionName(parameter1, parameter2, ...) {
    // 函数体
}

参数传递

JavaScript中的参数传递遵循以下规则：

1. 基本类型（如数字、字符串、布尔值）按值传递
2. 对象类型（如对象、数组、函数）按引用传递

// 基本类型按值传递
function modifyValue(a) {
    a = 10;
    console.log('函数内部:', a); // 10
}

let x = 5;
modifyValue(x);
console.log('函数外部:', x); // 5，原值不变

// 对象类型按引用传递
function modifyObject(obj) {
    obj.property = '新值';
    console.log('函数内部:', obj); // {property: '新值'}
}

const myObj = {property: '原值'};
modifyObject(myObj);
console.log('函数外部:', myObj); // {property: '新值'}，原对象被修改

参数数量的灵活性

JavaScript函数不强制要求传入的参数数量与定义的参数数量一致：

function greet(name, greeting) {
    console.log(`${greeting}, ${name}!`);
}

// 传入正确数量的参数
greet('张三', '你好'); // 输出: 你好, 张三!

// 传入较少的参数
greet('李四'); // 输出: undefined, 李四!

// 传入较多的参数
greet('王五', '早上好', '额外参数'); // 输出: 早上好, 王五! (额外参数被忽略)

参数处理技术

默认参数

ES6引入了默认参数，允许在参数未传入或为undefined时使用默认值。

function greet(name = '访客', greeting = '你好') {
    console.log(`${greeting}, ${name}!`);
}

greet(); // 输出: 你好, 访客!
greet('张三'); // 输出: 你好, 张三!
greet('李四', '早上好'); // 输出: 早上好, 李四!
greet(undefined, '晚上好'); // 输出: 晚上好, 访客!

默认参数可以是任何表达式，包括函数调用：

function getDefaultGreeting() {
    return `今天是${new Date().toLocaleDateString()}，祝你有个好心情`;
}

function greet(name = '访客', greeting = getDefaultGreeting()) {
    console.log(`${greeting}, ${name}!`);
}

greet(); // 输出: 今天是2023/5/20，祝你有个好心情, 访客!

默认参数的计算顺序是从左到右，后面的默认参数可以引用前面的参数：

function createUser(name, role = 'user', id = generateId(name, role)) {
    return { name, role, id };
}

function generateId(name, role) {
    return `${name}-${role}-${Date.now()}`;
}

console.log(createUser('张三')); 
// 输出: {name: '张三', role: 'user', id: '张三-user-1621234567890'}

剩余参数

剩余参数（Rest Parameters）允许将不定数量的参数表示为一个数组。

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3, 4, 5)); // 15

剩余参数必须是函数参数列表中的最后一个参数：

function process(first, second, ...others) {
    console.log('第一个参数:', first);
    console.log('第二个参数:', second);
    console.log('其他参数:', others);
}

process('a', 'b', 'c', 'd', 'e');
// 输出:
// 第一个参数: a
// 第二个参数: b
// 其他参数: ['c', 'd', 'e']

arguments对象

在箭头函数出现之前，JavaScript提供了arguments对象来处理不定数量的参数。

function oldSum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(oldSum(1, 2, 3, 4)); // 10

arguments是一个类数组对象，不是真正的数组，但可以转换为数组：

function convertArgs() {
    // 转换为数组的方法
    const args1 = Array.from(arguments);
    const args2 = [...arguments];
    const args3 = Array.prototype.slice.call(arguments);
    
    console.log(args1);
    return args1;
}

console.log(convertArgs(1, 2, 3)); // [1, 2, 3]

注意：箭头函数没有自己的arguments对象，应使用剩余参数代替。

参数解构

ES6的解构赋值可以用于函数参数，使代码更简洁。

对象解构

// 不使用解构
function displayUser(user) {
    console.log(`姓名: ${user.name}, 年龄: ${user.age}, 职业: ${user.job}`);
}

// 使用对象解构
function displayUser({name, age, job}) {
    console.log(`姓名: ${name}, 年龄: ${age}, 职业: ${job}`);
}

const user = {
    name: '张三',
    age: 30,
    job: '工程师'
};

displayUser(user); // 输出: 姓名: 张三, 年龄: 30, 职业: 工程师

解构参数可以设置默认值：

function displayUser({name = '匿名', age = 0, job = '未知'} = {}) {
    console.log(`姓名: ${name}, 年龄: ${age}, 职业: ${job}`);
}

displayUser(); // 输出: 姓名: 匿名, 年龄: 0, 职业: 未知
displayUser({name: '李四'}); // 输出: 姓名: 李四, 年龄: 0, 职业: 未知

数组解构

function displayCoordinates([x, y]) {
    console.log(`X坐标: ${x}, Y坐标: ${y}`);
}

displayCoordinates([10, 20]); // 输出: X坐标: 10, Y坐标: 20

数组解构也可以设置默认值：

function displayCoordinates([x = 0, y = 0] = []) {
    console.log(`X坐标: ${x}, Y坐标: ${y}`);
}

displayCoordinates(); // 输出: X坐标: 0, Y坐标: 0
displayCoordinates([10]); // 输出: X坐标: 10, Y坐标: 0

参数验证

JavaScript没有内置的参数类型检查，但可以手动实现：

function divide(a, b) {
    // 参数类型检查
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new TypeError('参数必须是数字');
    }
    
    // 参数值检查
    if (b === 0) {
        throw new Error('除数不能为零');
    }
    
    return a / b;
}

try {
    console.log(divide(10, 2)); // 5
    console.log(divide('10', 2)); // 抛出TypeError
    console.log(divide(10, 0)); // 抛出Error
} catch (error) {
    console.error(error.message);
}

函数返回值

JavaScript函数可以返回任何类型的值，包括基本类型、对象、数组和函数。

基本返回值

function add(a, b) {
    return a + b; // 返回数字
}

function createGreeting(name) {
    return `你好，${name}！`; // 返回字符串
}

function isAdult(age) {
    return age >= 18; // 返回布尔值
}

console.log(add(2, 3)); // 5
console.log(createGreeting('张三')); // 你好，张三！
console.log(isAdult(20)); // true

返回对象

function createPerson(name, age) {
    return {
        name,
        age,
        isAdult() {
            return this.age >= 18;
        }
    };
}

const person = createPerson('张三', 30);
console.log(person.name); // 张三
console.log(person.isAdult()); // true

返回数组

function getMinMax(numbers) {
    const min = Math.min(...numbers);
    const max = Math.max(...numbers);
    return [min, max];
}

const [min, max] = getMinMax([3, 1, 5, 2, 4]);
console.log(`最小值: ${min}, 最大值: ${max}`); // 最小值: 1, 最大值: 5

返回函数（闭包）

函数可以返回另一个函数，这是创建闭包的常见方式：

function createMultiplier(factor) {
    // 返回一个新函数
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

多值返回

JavaScript函数只能返回一个值，但可以通过对象或数组返回多个值：

// 使用对象返回多个值
function getUserStats(userId) {
    // 假设这是从数据库获取的数据
    return {
        posts: 42,
        followers: 1024,
        following: 128
    };
}

const { posts, followers } = getUserStats('user123');
console.log(`帖子数: ${posts}, 粉丝数: ${followers}`); // 帖子数: 42, 粉丝数: 1024

// 使用数组返回多个值
function getNameParts(fullName) {
    const parts = fullName.split(' ');
    return [parts[0], parts[1]];
}

const [firstName, lastName] = getNameParts('张 三');
console.log(`姓: ${lastName}, 名: ${firstName}`); // 姓: 三, 名: 张

提前返回

return语句会立即结束函数执行并返回指定的值：

function getDiscount(price, userType) {
    // 提前返回特殊情况
    if (price <= 0) {
        return 0;
    }
    
    if (userType === 'vip') {
        return price * 0.2; // VIP用户20%折扣
    }
    
    if (userType === 'regular') {
        return price * 0.1; // 普通用户10%折扣
    }
    
    return 0; // 其他用户无折扣
}

console.log(getDiscount(100, 'vip')); // 20
console.log(getDiscount(100, 'regular')); // 10
console.log(getDiscount(100, 'guest')); // 0
console.log(getDiscount(-50, 'vip')); // 0

无返回值

如果函数没有return语句，或者return后没有表达式，则返回undefined：

function logMessage(message) {
    console.log(message);
    // 没有return语句
}

function emptyReturn() {
    return; // 没有返回表达式
}

const result1 = logMessage('测试消息'); // 输出: 测试消息
console.log(result1); // undefined

const result2 = emptyReturn();
console.log(result2); // undefined

高级参数处理技术

柯里化（Currying）

柯里化是将一个接受多个参数的函数转换为一系列接受单个参数的函数的技术：

// 普通函数
function add(a, b, c) {
    return a + b + c;
}

// 柯里化版本
function curriedAdd(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

// 使用箭头函数简化
const curriedAddArrow = a => b => c => a + b + c;

console.log(add(1, 2, 3)); // 6
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAddArrow(1)(2)(3)); // 6

柯里化的实际应用：

// 创建一个通用的柯里化函数
function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return function(...args2) {
                return curried.apply(this, args.concat(args2));
            };
        }
    };
}

function formatMessage(template, name, date) {
    return template.replace('{name}', name).replace('{date}', date);
}

const curriedFormat = curry(formatMessage);

// 创建特定模板的格式化函数
const welcomeTemplate = '欢迎{name}！今天是{date}。';
const formatWelcome = curriedFormat(welcomeTemplate);

// 创建特定用户的欢迎函数
const welcomeUser = formatWelcome('张三');

// 使用最终函数
console.log(welcomeUser('2023年5月20日')); // 欢迎张三！今天是2023年5月20日。

偏函数应用（Partial Application）

偏函数应用是固定一个函数的一些参数，然后产生另一个更小元的函数：

function partial(fn, ...args) {
    return function(...moreArgs) {
        return fn(...args, ...moreArgs);
    };
}

function greet(greeting, name) {
    return `${greeting}, ${name}!`;
}

const sayHello = partial(greet, '你好');
const sayGoodbye = partial(greet, '再见');

console.log(sayHello('张三')); // 你好, 张三!
console.log(sayGoodbye('李四')); // 再见, 李四!

函数组合（Function Composition）

函数组合是将多个函数组合成一个函数的过程：

function compose(...fns) {
    return function(x) {
        return fns.reduceRight((value, fn) => fn(value), x);
    };
}

const double = x => x * 2;
const increment = x => x + 1;
const square = x => x * x;

// (3 * 2 + 1)² = 49
const composed = compose(square, increment, double);
console.log(composed(3)); // 49

参数与返回值的最佳实践

参数命名与顺序

• 使用描述性的参数名称
• 将必需参数放在前面，可选参数放在后面
• 相关参数应该放在一起
• 对于多个可选参数，考虑使用对象参数

// 不好的设计
function createUser(name, admin, active, email, age) {
    // ...
}

// 更好的设计
function createUser(name, email, { age = 18, isAdmin = false, isActive = true } = {}) {
    // ...
}

// 使用
createUser('张三', 'zhangsan@example.com', { age: 30, isAdmin: true });

参数验证与错误处理

• 验证必需参数
• 为可选参数提供默认值
• 使用明确的错误消息

function transferMoney(fromAccount, toAccount, amount) {
    // 验证必需参数
    if (!fromAccount) throw new Error('转出账户不能为空');
    if (!toAccount) throw new Error('转入账户不能为空');
    
    // 验证参数类型
    if (typeof amount !== 'number') {
        throw new TypeError('金额必须是数字');
    }
    
    // 验证参数值
    if (amount <= 0) {
        throw new RangeError('金额必须大于零');
    }
    
    // 业务逻辑验证
    if (fromAccount.balance < amount) {
        throw new Error('余额不足');
    }
    
    // 执行转账...
}

返回值一致性

• 保持返回值类型的一致性
• 避免返回不同类型的值
• 考虑使用对象包装不同类型的返回值

// 不好的实践 - 返回不同类型
function findUser(id) {
    const user = database.find(id);
    if (user) {
        return user;
    } else {
        return false; // 混合返回对象和布尔值
    }
}

// 更好的实践 - 返回一致的类型
function findUser(id) {
    const user = database.find(id);
    return user || null; // 始终返回对象或null
}

// 或者使用对象包装不同的结果
function findUser(id) {
    const user = database.find(id);
    if (user) {
        return { success: true, data: user };
    } else {
        return { success: false, error: '用户不存在' };
    }
}

避免副作用

• 函数应该主要依赖参数而不是外部状态
• 避免修改传入的参数
• 明确声明函数的副作用

// 有副作用的函数
function addItem(cart, item) {
    cart.push(item); // 修改了传入的参数
    return cart;
}

// 无副作用的函数
function addItem(cart, item) {
    return [...cart, item]; // 返回新数组，不修改原数组
}

特殊参数模式

配置对象模式

当函数需要多个可选参数时，使用配置对象模式可以提高可读性：

// 不使用配置对象
function createElement(type, id, classes, attributes, content) {
    // ...
}

// 调用时不清楚每个参数的含义
createElement('div', 'main', 'container large', { style: 'color: red' }, '内容');

// 使用配置对象
function createElement(type, options = {}) {
    const { id, classes, attributes, content } = options;
    // ...
}

// 调用时更清晰
createElement('div', {
    id: 'main',
    classes: 'container large',
    attributes: { style: 'color: red' },
    content: '内容'
});

方法链（Method Chaining）

返回this可以实现方法链，使API更流畅：

class QueryBuilder {
    constructor() {
        this.query = {};
    }
    
    where(field, value) {
        this.query[field] = value;
        return this; // 返回this以支持链式调用
    }
    
    limit(count) {
        this.query.limit = count;
        return this;
    }
    
    sort(field, order = 'asc') {
        this.query.sort = { field, order };
        return this;
    }
    
    build() {
        return this.query;
    }
}

// 链式调用
const query = new QueryBuilder()
    .where('status', 'active')
    .limit(10)
    .sort('createdAt', 'desc')
    .build();

console.log(query);
// 输出: { status: 'active', limit: 10, sort: { field: 'createdAt', order: 'desc' } }

函数重载模拟

JavaScript没有原生的函数重载，但可以通过检查参数类型和数量来模拟：

function calculate() {
    // 根据参数数量和类型执行不同操作
    if (arguments.length === 1) {
        const arg = arguments[0];
        if (typeof arg === 'number') {
            return arg * arg; // 单个数字参数：计算平方
        }
        if (Array.isArray(arg)) {
            return arg.reduce((sum, val) => sum + val, 0); // 数组参数：计算总和
        }
    } else if (arguments.length === 2) {
        if (typeof arguments[0] === 'number' && typeof arguments[1] === 'number') {
            return arguments[0] + arguments[1]; // 两个数字参数：相加
        }
    }
    
    throw new Error('不支持的参数类型或数量');
}

console.log(calculate(5)); // 25 (5²)
console.log(calculate([1, 2, 3, 4])); // 10 (1+2+3+4)
console.log(calculate(10, 20)); // 30 (10+20)

异步函数的参数与返回值

Promise作为返回值

异步函数通常返回Promise对象：

function fetchUserData(userId) {
    return fetch(`https://api.example.com/users/${userId}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('获取用户数据失败');
            }
            return response.json();
        });
}

// 使用Promise
fetchUserData('123')
    .then(user => console.log(user))
    .catch(error => console.error(error));

async/await函数

使用async/await可以使异步代码更易读：

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('获取用户数据失败');
        }
        return await response.json();
    } catch (error) {
        console.error('获取用户数据时出错:', error);
        throw error; // 重新抛出错误以便调用者处理
    }
}

// 使用async/await调用
async function displayUserInfo(userId) {
    try {
        const user = await fetchUserData(userId);
        console.log(`用户名: ${user.name}, 邮箱: ${user.email}`);
    } catch (error) {
        console.error('无法显示用户信息:', error);
    }
}

回调函数作为参数

虽然Promise和async/await是现代JavaScript中处理异步的首选方式，但回调函数仍然被广泛使用：

function loadData(url, onSuccess, onError) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            onSuccess(xhr.responseText);
        } else {
            onError(new Error(`请求失败，状态码: ${xhr.status}`));
        }
    };
    
    xhr.onerror = function() {
        onError(new Error('网络错误'));
    };
    
    xhr.send();
}

// 使用回调
loadData(
    'https://api.example.com/data',
    data => console.log('加载的数据:', data),
    error => console.error('错误:', error)
);

总结

JavaScript函数的参数和返回值处理非常灵活，提供了多种方式来适应不同的编程需求：

• 参数处理：默认参数、剩余参数、解构赋值和参数验证等技术使函数更加健壮和灵活
• 返回值：函数可以返回任何类型的值，包括对象、数组和其他函数
• 高级技术：柯里化、偏函数应用和函数组合等技术可以创建更加模块化和可重用的代码
• 最佳实践：良好的参数命名、一致的返回值类型和避免副作用可以提高代码质量

掌握这些概念和技术可以帮助你编写更加清晰、灵活和可维护的JavaScript代码。

练习

1. 创建一个函数，接受任意数量的数字参数并返回它们的平均值
2. 实现一个柯里化函数，可以将任何多参数函数转换为柯里化版本
3. 编写一个函数，接受一个对象和一个属性路径（如'user.address.city'），安全地获取嵌套属性值
4. 创建一个函数，可以根据不同类型的输入（数字、字符串、数组）返回不同的结果
5. 实现一个异步函数，可以重试失败的操作指定次数