【ES6】ES6学习七：函数的扩展：可变参数、箭头函数

一、默认参数

{
  // ES5\ES3 默认参数的写法
  function f(x, y, z) {
    if (y === undefined) {
      y = 7;
    }
    if (z === undefined) {
      z = 42
    }
    return x + y + z
  }
  console.log(f(1, 3));//46
} 
{
  // ES6 默认参数
  function f(x, y = 7, z = 42) {
    return x + y + z
  }
  console.log(f(1, 3));//46
}

 参数变量是默认声明的，所以不能用let或const再次声明，否则会报错。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

应用：利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

{
  function checkParameter() {
    throw new Error('can\'t be empty')
  }
  function f(x = checkParameter(), y = 7, z = 42) {
    return x + y + z
  }

  try {
    f()
  } catch (e) {
    console.log(e);
  } finally { }
} 

 

二、函数的length属性

1、函数的length属性，将返回没有指定默认值的参数个数。指定了默认值后，length属性将失真。

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

2、如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

3、可变参数（ rest 参数）也不会计入length属性。

(function(...args) {}).length // 0

 

三、函数的name属性

函数的name属性，返回该函数的函数名。如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

function foo() {}
foo.name // "foo"

var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"

 

四、rest参数（可变参数）形式为...变量名

{
  // ES3,ES5 可变参数
  function f() {
    var a = Array.prototype.slice.call(arguments);
    var sum = 0;
    a.forEach(function (item) {
      sum += item * 1;
    })
    return sum
  }
  console.log(f(1, 2, 3, 6));//12
}
{
  // ES6 可变参数
  function f(...a) {
    var sum = 0;
    a.forEach(item => {
      sum += item * 1
    });
    return sum
  }
  console.log(f(1, 2, 3, 6));//12
}

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}

 

五、箭头函数

1、一个参数时：

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

2、不需要参数或者多个参数时：使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

3、如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

4、如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => console.log('hello');

注意：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，它是固定的。