JavaScript实现参数可选择的几种方式的总结

问题描述：

在JavaScript语言中如果使用默认参数或者要使用可变参数个数会出现以下问题：

//定义
function testArgs(optionalParam1,optionalParam2,stableParam1=0,stableParam2=10){
    console.log(optionalParam1,optionalParam2,stableParam1,stableParam2)    
}

//调用
testArgs();//可选参数undefined，重要参数使用默认值,输出  undefined undefined 0 10
testArgs(stableParam1=1,stableParam2=20) //es5没有关键字传参，输出  1 20 0 10

为解决以上问题，可以有如下几种做法：

1.ES6解构

          ES6允许按照一定的模式从数组或者对象中提取值对变量赋值，此为解构，如果解构失败，变量值为undefined。

/*
*使用es6解构
*/
//定义
function testArgs({optionalParam1,optionalParam2,stableParam1=0,stableParam2=10}={}){
    console.log(optionalParam1,optionalParam2,stableParam1,stableParam2)    
}

//调用
testArgs();//输出  undefined undefined 0 10
testArgs({stableParam1:1,stableParam2:20}) //输出 undefined undefined 1 20

2.对象传值（与解构相似，只不过参数解析不一样）

/*
*使用对象传值，根据判断值是否为undefined，完成默认赋值
*/
//定义
function testArgs(obj){
    obj.stableParam1 = obj.stableParam1  || 0;
    obj.stableParam2= obj.stableParam2|| 10;
    console.log(obj.optionalParam1,obj.optionalParam2,obj.stableParam1,obj.stableParam2)    
}

//调用
testArgs();//无法输出，报错
testArgs({stableParam1:1,stableParam2:20}) //输出 undefined undefined 1 20


//大致思路如此，但是在不传递参数的时候，obj中的内容为undefined，obj.undefined会报错

3.柯里化

          柯里化是指将使用多个参数的函数转换成一系列使用一个参数的函数的技术。从而达到函数只运行一次的效果。

          可以根据实际情况决定哪些参数是不容易改变的，哪些参数是比较容易变动的。

/*
*使用函数柯里化
*/
//定义
function testArgsDetail(optionalParam1,optionalParam2,stableParam1,stableParam2){
    console.log(optionalParam1,optionalParam2,stableParam1,stableParam2)    
}
function testArgs(stableParam1=0,stableParam2=10){
    return (optionalParam1,optionalParam2) =>     
           testArgsDetail(optionalParam1,optionalParam2,stableParam1,stableParam2)
}

//调用,temp相当于是stableParam1=0,stableParam2=10的句柄
temp = testArgs();

temp();     //输出  undefined undefined 0 10
temp("可选参数1","可选参数2")  //输出 可选参数1 可选参数2 0 10

temp = testArgs(1,20);
temp();     //输出 undefined undefined 1 20
temp("可选参数1","可选参数2")  //输出 可选参数1 可选参数2 1 20