带参数默认值的函数

1 es5中模拟函数默认值

function makeRequest(url,timeout,callback){
    timeout = timeout || 2000;
    callback= callback || function(){};
    //瑕疵 timeout有效值为0的情况,会导致timeout的值被替换为2000
}

改进后的代码

function makeRequest(url,timeout,callback){
    timeout = (typeof timeout !== "undefined") ? timeout : 2000
    callback= (typeof callback !== "undefined") ? callback : function(){}
    //瑕疵 书写了过多的代码
}

2 es6能更容易为参数提供默认值,它使用了初始化的形式,以便在参数未被正式传递进来时使用。

function makeRequest(url,timeout=2000,callback=function(){})

只有在未传递参数,或明确将第二个参数指定为undefined时,timeout的默认值才会被使用,即便传递null也不会使用timeout的默认值

使用不具名参数

先来看下es5中的不具名参数的实现

function pick(object){
    let result = Object.create(null);
    //从第二个参数开始处理
    for(let i=1,len = arguments.length;i<len;i++){
        result[arguments[i]] = object[arguments[i]];
    }
    return result;
}
let book = {
    title : 'undersstant es6',
    author : 'nico',
    year : 2015
}
let bookData = pick(book,"author",'year');
console.log(bookData.author)
console.log(bookData.year)

为了解决上述问题,es6引入剩余参数来解决问题
剩余参数由三个点(...)与一个紧跟着的具名参数指定,它会是包含传递给函数的
其余参数的一个数组。

function pick(object,...keys){
    let result = Object.create(null);
    //从第二个参数开始处理
    for(let i=0,len = keys.length;i<len;i++){
        result[keys[i]] = object[keys[i]];
    }
    return result;
}
let book = {
    title : 'undersstant es6',
    author : 'nico',
    year : 2015
}
let bookData = pick(book,"author",'year');
console.log(bookData.author)
console.log(bookData.year)

当然剩余参数有些限制条件
1 一个函数只能有一个剩余参数,并且必须被放在最后
2 剩余参数不能再对象字面量的setter属性中使用。因为对象字面量的setter被限定只能使用单个参数。

同时剩余参数也能和arguments配合使用
arguments对象总能正确反映被传入函数的参数,而无视剩余参数的使用

扩展运算符

与剩余参数关联最密切的就是扩展运算符。剩余参数允许你把多个独立的参数合并到一个数组,而扩展运算符则允许将一个数组分隔,并将各个项作为分离的参数传递给函数

es6前的写法

let values = [25,50,75,100]
console.log(Math.max.apply(Math,values))

用扩展运算符的写法

let values = [25,50,75,100]
console.log(Math.max(...values))

--未完待续


小溪流
144 声望5 粉丝