ES6之函数参数表达、传参

函数参数表达、传参

  目录：

---

默认参数值

  用法：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