ES6函数的扩展

1 函数参数的默认值
ES6之前，不能直接为函数的参数指定默认值，方法如下：

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello')            // Hello World
log('Hello', 'China')   // Hello China
log('Hello', '')        // Hello World

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello')            // Hello World
log('Hello', 'China')   // Hello China
log('Hello', '')        // Hello

参数变量是默认声明的，所以不能用let或const再次声明

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

注意： 参数默认值不是传值的，而是每次都重新计算默认值表达式的值。

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101

与结构赋值默认值结合使用
参数默认值可以与解构复制的默认值，结合起来使用。

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({})             // undefined 5
foo({x: 1})         // 1 5
foo({x: 1, y: 2})   // 1 2
foo()               // TypeError: Cannot read property 'x' of undefined

以上代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数foo调用时没提供参数，变量x和y就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

解构赋值的例子:

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// error

双重默认值:

function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

上面的代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。
函数的length属性
指定了默认值之后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

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

作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用于。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2)        // 2

上面代码中，参数y的默认值等于变量x。调用函数f时 ，参数形成一个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2。

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

上面代码中，函数f调用时，参数y=x形成一个单独的作用于。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x。
应用
利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

上面代码，如果调用的时候没有参数，就会调用默认值throwIfMissing函数，从而抛出一个错误。
从上面代码还可以看到，参数mustBeprovided的默认值等于throwIfMissing函数的运行结果，这表明参数的默认值不是在定义时执行，而是在运行时执行。如果参数已经赋值，默认值中的函数就不会运行。
2 rest参数
ES6引入rest参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}

add(2, 5, 3)                // 10

上面代码的add函数是一个求和函数，利用rest参数，可以向该函数传入任意数目的参数。

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

注意： rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
3 name属性
函数的name属性，返回该函数的函数。

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

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

var f = function () {};

// ES5
f.name // ""

// ES6 当然现在的浏览器都已经支持返回"f"
f.name // "f"

将一个具名函数赋值给一个变量，则ES5和ES6的name属性都返回这个具名函数原本的名字。

const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

箭头函数
ES6允许使用”箭头”（=>）定义函数

var f = v => v;

上面的箭头函数等于：

var f = function(v) {
    return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

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

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

箭头函数可以与变量解构结合使用

const full = ({first, last} => first + ' ' + last);

// 等同于
function full(person) {
    return person.first + ' ' + person.last;
}

一个用处： 箭头函数简化回调函数

[1, 2, 3].map(function (x) {
    return x * x;
})

// 箭头函数写法
[1, 2, 3].map(x => x * x);

尾调用
尾调用是函数式编程的一个重要概念，本身非常简单，就是指某个函数的最后一步是调用另一个函数。

function f(x) {
    return g(x)
}

函数f的最后一部是调用函数g，这就叫尾调用。
以下三种情况，都不属于尾调用：

// 情况一
function f(x){
  let y = g(x);
  return y;
}

// 情况二
function f(x){
  return g(x) + 1;
}

// 情况三
function f(x){
  g(x);
}

情况一调用函数g之后，还有赋值操作，所以不属于尾调用。情况而也属于调用后还有操作，即使写在一行内。情况三等同于下面的代码。

function f(x) {
    g(x);
    return undefined;
}

尾调用不一定出现在函数尾部，只要是最后一步操作即可。

function f(x) {
    if (x>0) {
        return m(x);
    }
    return n(x);
}

上述，函数m和n都属于尾调用，因为它们都是函数f的最后一步操作。

尾调用优化
函数调用会在内存形成一个”调用记录”，又称为”调用帧”，保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用 帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个”调用栈”

function f() {
    let m = 1;
    let n = 2;
    return g(m + n);
}
f();

// 等同于
function f() {
    return g(3);
}
f();

// 等同于
g(3);

上面代码中，如果 函数g不是尾调用，函数f就需要保存内部变量m和n的值，g的调用信息等，但是由于调用g之后，函数f就结束了，所以执行到最后一步，完全可以删除f(x)的调用帧，只保留g(3)的调用帧。

这就叫做”尾调用优化”，即只保留内层函数的调用帧。如果所有函数 都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是 “尾调用优化”的意义。

尾递归
函数调用自身，称为递归。如果尾调用自身，就成为尾递归。
递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生”栈溢出”错误。但是对于尾递归来说，由于只存在一个调用帧，所以永远不会发生”栈溢出”错误。

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

阶乘函数，计算n的阶乘，最多需要保存n个调用记录，复杂度O(n);

如果修改成尾调用，只保留一个调用记录，复杂度O(1);

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

ES6明确规定，所有ECMAScript的实现，都必须部署”尾调用优化”，这就是说，ES6中只要使用尾递归，就不会发生栈溢出，相对节省内存。

本博客内容摘抄自
阮一峰老师写的ECMAScript6入门一书