ES6--函数扩展

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

  function log(x,y='world') {console.log(x,y);  }   log('hello');//hello world   log('hello','sky');//hello sky   log('hello','');//hello`

二：与解构赋值默认值结合使用

function log({x,y=5}) {    console.log(x,y);}console.log({});//undefined,5console.log({x:1});//1,5console.log({x:1,y=2});//1,2console.log();// TypeError: Cannot read property 'x' of undefined

分析：只有当函数的参数是一个对象时，变量x和y才会通过解构赋值而生成。如果函数调用时参数不是对象，变量x和y就不会生成，从而报错。如果参数对象没有y属性，y的默认值5才会生效！

function fetch(url,{ method = 'GET' } = {}) {    console.log(method);}fetch('www.baidu.com');//GET

分析：
结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

//一：function m1({x = 0, y = 0} = {}) {  return [x, y];}//二：function m2({x, y} = { x: 0, y: 0 }) {  return [x, y];}

上面两种写法都对函数的参数设定了默认值，区别是写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值；写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值

// 函数没有参数的情况m1() // [0, 0]m2() // [0, 0]// x和y都有值的情况m1({x: 3, y: 8}) // [3, 8]m2({x: 3, y: 8}) // [3, 8]// x有值，y无值的情况m1({x: 3}) // [3, 0]m2({x: 3}) // [3, undefined]// x和y都无值的情况m1({}) // [0, 0];m2({}) // [undefined, undefined]m1({z: 3}) // [0, 0]m2({z: 3}) // [undefined, undefined]

三：参数默认值的位置
当在一个函数中默认值的参数不是尾参数时，无法只省略该参数，而不省略它后面的参数，只能显式输入undefined！

四：函数的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。调用时，由于函数作用域内部的变量x已经生成，所以y等于参数x，而不是全局变量x

let x = 1;function f(y = x) {  let x = 2;  console.log(y);}f() // 1分析：函数调用时，y的默认值变量x尚未在函数内部生成，所以x指向全局变量function f(y = x) {  let x = 2;  console.log(y);}f() // ReferenceError: x is not defined分析：全局变量x不存在//1let foo = 'outer';function bar(func = x => foo) {  let foo = 'inner';  console.log(func()); // outer}bar();//2let foo = 'outer';let f = x => foo;function bar(func = f) {  let foo = 'inner';  console.log(func()); // outer}bar();六：应用利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误function throwIfMissing() {  throw new Error('Missing parameter');}function foo(mustBeProvided = throwIfMissing()) {  return mustBeProvided;}foo()// Error: Missing parameter

分析：
上面代码的foo函数，如果调用的时候没有参数，就会调用默认值throwIfMissing函数，从而抛出一个错误。
从上面代码还可以看到，参数mustBeProvided的默认值等于throwIfMissing函数的运行结果（即函数名之后有一对圆括号），这表明参数的默认值不是在定义时执行，而是在运行时执行（即如果参数已经赋值，默认值中的函数就不会运行）

另外，可以将参数默认值设为undefined，表明这个参数是可以省略的

function foo(optional = undefined) { ··· }

七：rest函数
ES6引入rest参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中,
rest参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量
注：1–rest参数之后不能再有其他参数（即只能是最后一个参数）
2–函数的length属性，不包括rest参数

function add(...values) {  let sum = 0;  for (var val of values) {    sum += val;  }  return sum;}add(2, 5, 3) // 10

八：扩展运算符
扩展运算符（spread）是三个点（…）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列！
注：1–该运算符主要用于函数调用

console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5function add(x, y) {  return x + y;}var numbers = [4, 38];add(...numbers) // 42

九：扩展运算符的应用
1–合并数组

var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e'];[...arr1, ...arr2, ...arr3]// [ 'a', 'b', 'c', 'd', 'e' ]

2–与解构赋值结合使用<扩展运算符可以与解构赋值结合起来，用于生成数组>
注：如果将扩展运算符用于数组赋值，只能放在参数的最后一位
3–函数的返回值
JavaScript的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象
4–字符串<扩展运算符还可以将字符串转为真正的数组>
5–实现了Iterator接口的对象<任何Iterator接口的对象，都可以用扩展运算符转为真正的数组>
6–Map和Set结构，Generator函数

十：name属性
1–匿名函数

var func1 = function () {};// ES5func1.name // ""// ES6func1.name // "func1"

2–有函数名

const bar = function baz() {};// ES5bar.name // "baz"// ES6bar.name // "baz"

3–Function构造函数返回的函数实例，name属性的值为“anonymous”

(new Function).name // "anonymous"

4–bind返回的函数，name属性值会加上“bound ”前缀

function foo() {};foo.bind({}).name // "bound foo"(function(){}).bind({}).name // "bound "

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

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

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

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

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

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

3–由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号

var getTempItem = id => ({ id: id, name: "Temp" });

4–箭头函数可以与变量解构结合

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

5–箭头函数的一个用处是简化回调函数

使用注意点
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数

function foo() {  setTimeout( () => {    console.log("id:", this.id);  },100);}var id = 21;foo.call( { id: 42 } );// id: 42

分析：
上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42
注；箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数！
1–多层嵌套

let insert = (value) => ({into: (array) => ({after: (afterValue) => {  array.splice(array.indexOf(afterValue) + 1, 0, value);  return array;}})});insert(2).into([1, 3]).after(1); //[1, 2, 3]

十二：尾函数调用
尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数！
注：尾调用不一定出现在函数尾部，只要是最后一步操作即可
函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）！

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

只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化！

function addOne(a){  var one = 1;  function inner(b){    return b + one;  }  return inner(a);}

分析：上面的函数不会进行尾调用优化，因为内层函数inner用到了外层函数addOne的内部变量one

十三：尾递归
函数调用自身，称为递归。如果尾调用自身，就称为尾递归

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数！

1--function factorial(n) {  if (n === 1) return 1;  return n * factorial(n - 1);}factorial(5) // 1202--优化后：function factorial(n, total) {  if (n === 1) return total;  return factorial(n - 1, n * total);}factorial(5, 1) // 1203--参数默认值function factorial(n, total = 1) {  if (n === 1) return total;  return factorial(n - 1, n * total);}factorial(5) // 120

函数式编程有一个概念，叫做柯里化（currying），意思是将多参数的函数转换成单参数的形式。这里也可以使用柯里化！

十四：
怎么做可以减少调用栈呢？就是采用“循环”换掉“递归”！
蹦床函数（trampoline）可以将递归执行转为循环执行！

function trampoline(f) {  while (f && f instanceof Function) {    f = f();  }  return f;}

分析：蹦床函数的一个实现，它接受一个函数f作为参数。只要f执行后返回一个函数，就继续执行。注意，这里是返回一个函数，然后执行该函数，而不是函数里面调用函数，这样就避免了递归执行，从而就消除了调用栈过大的问题

蹦床函数并不是真正的尾递归优化，下面的代码实现了真正的尾递归优化：

function tco(f) {  var value;  var active = false;  var accumulated = [];  return function accumulator() {    accumulated.push(arguments);    if (!active) {      active = true;      while (accumulated.length) {        value = f.apply(this, accumulated.shift());      }      active = false;      return value;    }  }}var sum = tco(function(x, y) {  if (y > 0) {    return sum(x + 1, y - 1)  }  else {    return x  }});sum(1, 100000)// 100001

分析：上面代码中，tco函数是尾递归优化的实现，它的奥妙就在于状态变量active。默认情况下，这个变量是不激活的。一旦进入尾递归优化的过程，这个变量就激活了。然后，每一轮递归sum返回的都是undefined，所以就避免了递归执行；而accumulated数组存放每一轮sum执行的参数，总是有值的，这就保证了accumulator函数内部的while循环总是会执行。这样就很巧妙地将“递归”改成了“循环”，而后一轮的参数会取代前一轮的参数，保证了调用栈只有一层！