函数参数表达、传参
目录:
默认参数值
用法:function name(arg = defaultValue) { … }
function fn(arg = 'foo'){
console.log(arg);
}
fn(); // foo
fn('bar'); // bar
剩余参数
在 ES6 发布之前函数的定义中存在一个名为 arguments 的对象,该对象用于在函数体内访问当前被调用时所传入的参数列表。这个 arguments 是一个类数组对象(Array-like Object),即 arguments 以自然数(0、1、2等)作为属性名并以相对应的传入参数值作为属性值,所以 arguments 对象并不具备数组类型所具有的方法等,因此在开发中经常会使用 Array.slice 来将 arguments 转换为一个真正的数组。
在 ES6 中同样为 Array 这个对象添加了一个新的方法 Array.from,这个方法作用就是将一些可以被转换为数组的对象转换为数组,其中最主要的就是类数组对象。
function fn(){
console.log(Array.from(arguments));
}
fn(1, 2, 3, 4, 5); // 1 2 3 4 5
剩余参数用法:function fn([arg, ] ...restArgs){}
function fn(foo, ...rest){
console.log(`foo: ${foo}`);
console.log(`Rest Arguments: ${rest.join(',')}`);
}
fn(1, 2, 3, 4, 5);
//foo: 1
//Rest Arguments: 2,3,4,5
注意事项
语法使用的注意事项
一旦一个函数的参数列表中使用了剩余参数的语法糖,便不可以再添加任何参数,否则会抛出错误。
function fn1(...rest) { /* ... */ } // Correct
function fn2(...rest, foo) { /* ... */ } // Syntax Error
arguments 与剩余参数
虽然从语言角度看,arguments 和 …args 是可以同时使用的,但有一种情况除外—— argements 在箭头函数中,会跟随上下文绑定到上层,所以在不确定上下文绑定结果的情况下,尽可能不要在箭头函数中使用 arguments ,而要使用 …args,除非在特殊的场景下需要使用到 arguments.callee 和 arguments.caller。
解构传参
使用数组作为传入参数以控制函数的调用情况,但不会替换函数调用中的上下文。
function sum(...numbers){
return numbers.reduce((a, b) => a+b);
}
sum(...[1,2,3]); // 6