如何减少函数参数的输入

前几天在某论坛上看的一个问题，实际上这问题并不难，如何减少函数参数的输入，目前可以用两种方法来实现：

1. 柯里化：把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数；
2. 解构：基于ES6的变量解构

1. 柯里化 #

把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数。

比如有一个数据上报的函数A，在多次调用这个函数A时，有两个参数是固定的，这样我使用柯里化的原理来优先输入这两个固定的参数：

// bossid和pwd为数据必须的参数
// page为当前页面
// act为操作
function funcA(bossId, pwd, page, act) {
    let img = new Image();
    img.src = `xxx.com/?bossId=${bossId}&pwd=${pwd}&page=${page}&act=${act}`;
}
funcA(1234, 'qer45fg', 'mainpage', 'login');
funcA(1234, 'qer45fg', 'ownpage', 'withdraw');

使用柯里化来实现：

function curryFuncA(bossId, pwd) {
    return (page, act) => {
        let img = new Image();
        img.src = `xxx.com/?bossId=${bossId}&pwd=${pwd}&page=${page}&act=${act}`;
    }
}
const send = curryFuncA(1234, 'qer45fg');
send('mainpage', 'login');
send('ownpage', 'withdraw');

2. 解构 #

在ES6中提供了解构的概念，我们可以只获取并使用其中的某几个变量即可。

解构更详细的理解，可以参考阮一峰的文章：变量的解构赋值。

针对上面的函数funcA，我们也可以这样实现：

function funcA({
    bossId = 1234,
    pwd = 'qer45fg',
    page = '',
    act = ''
}) {
    let img = new Image();
    img.src = `xxx.com/?bossId=${bossId}&pwd=${pwd}&page=${page}&act=${act}`;
}
funcA({
    page: 'mainpage',
    act: 'login'
});

// 需要改变bossId和pwd的值时，可以直接传入即可
funcA({
    bossId: '5678',
    pwd: 'aabbcc',
    page: 'ownpage',
    act: 'withdraw'
})