作为前端切图仔，越发觉得自己离不开函数了。

说到JavaScript函数，脑子里都是匿名函数、普通函数、闭包函数、构造函数……然后还能说出一大堆函数的概念。如果你达到这个水平，那么函数对你来说没有难度，是一个前端老鸟了。

当我闭上眼睛，不看键盘，手指在键盘上敲击出一个排序函数的时候，我在想，还是回顾一下函数的基本知识才有意思。

函数的默认参数

在ES5中，我们给函数传参数，然后在函数体内设置默认值，如下面这种方式。

  1.     function a(num, callback) {
  2.       num = num || 6
  3.       callback = callback || function (data) {console.log('ES5: ', data)}
  4.       callback(num * num)
  5.     }
  6.     a() //ES5: 36，不传参输出默认值
  8.     //你还可以这样使用callback
  9.     a(10, function(data) {
  10.       console.log(data * 10) // 1000， 传参输出新数值
  11.     })

而在ES6中，我们使用新的默认值写法。

  1.     function a(num = 6, callback = function (data) {console.log('ES6: ', data)}) {
  2.       callback(num * num)
  3.     }
  5.     a() //ES6: 36， 不传参输出默认值
  7.     a(10, function(data) {
  8.       console.log(data * 10) // 1000，传参输出新数值
  9.     })

使用ES6的默认值写法可以让函数体内部的代码更加简洁优雅

默认值对arguments对象的影响

我们先要了解arguments对象是什么？准确一点来说它是一个类数组对象，它存在函数内部，它将当前函数的所有参数组成了一个类数组对象。

  1.     function a(num, b){
  2.       console.log(arguments) // {"0": 6, "1": 10}
  3.       console.log(arguments.length) // 2
  4.     }
  6.     a(6, 10)

上面的输出结果看起来很正常，那么，如果我们加上参数默认值会怎样呢？

  1.     function a(num = 1, b = 1){
  2.       console.log(arguments)
  3.     }
  4.     a() // {} 默认值不能被arguments识别。
  5.     a(6, 10) // {"0":6,"1":10}

下面我们看一下修改参数默认值对arguments的影响。

1、在ES5的非严格模式下，一开始输入的参数是1，那么可以获取到arguments[0]（表示第一个参数）全等于num，修改num = 2之后，arguments[0]也能更新到2。

  1.     function a(num){
  2.       console.log(num === arguments[0]) //true
  3.       num = 2 //修改参数默认值
  4.       console.log(num === arguments[0]) //true
  5.     }
  6.     a(1)

2、在ES5的严格模式下，arguments就不能在函数内修改默认值后跟随着跟新了。

  1.     "use strict"; //严格模式   
  2.     function a(num) {
  3.       console.log(num === arguments[0]); // true
  4.       num = 2;
  5.       console.log(num === arguments[0]); // false
  6.     }
  7.     a(1);

在ES6环境下，默认值对arguments的影响和ES5严格模式是同样的标准。

默认参数表达式

参数不仅可以设置默认值为字符串，数字，数组或者对象，还可以是一个函数。

  1.     function add() {
  2.       return 10
  3.     }
  4.     function a(num = add()){
  5.       console.log(num)
  6.     }
  7.     a() // 10

默认参数的临时死区

第一章我们提到了let和const什么变量的临时死区（TDZ），默认参数既然是参数，那么也同样有临时死区，函数的作用域是独立的，a函数不能共享b函数的作用域参数。

  1.     //这是个默认参数临时死区的例子，当初始化a时，b还没有声明，所以第一个参数对b来说就是临时死区。
  2.     function add(a = b, b){
  3.       console.log(a + b)
  4.     }
  5.     add(undefined, 2) // b is not define

无命名参数

上面说的参数都是命名参数，而无命名参数也是函数传参时经常用到的。当传入的参数是一个对象，不是一个具体的参数名，则是无命名参数。

  1.     function add(object){
  2.       console.log(object.a + object.b)
  3.     }
  4.     let obj = {
  5.       a: 1,
  6.       b: 2
  7.     }
  8.     add(obj) // 3

不定参数的使用：使用…（展开运算符）的参数就是不定参数，它表示一个数组。

  1.     function add(...arr){
  2.       console.log(a + b)
  3.     }
  4.     let a = 1,b = 2
  5.     add(a, b) // 3

不定参数的使用限制：必须放在所有参数的末尾，不能用于对象字面量setter中。

  1.     //错误的写法1
  2.     function add(...arr, c){
  3.       console.log(a + b)
  4.     }
  5.     let a = 1,b = 2,c = 3
  6.     add(a, b, c)
  8.     //错误的写法2
  9.     let obj = {
  10.       set add(...arr) {
  12.       }
  13.     }

ES6中的构造函数Function新增了支持默认参数和不定参数。

展开运算符（…）

展开运算符的作用是解构数组，然后将每个数组元素作为函数参数。

有了展开运算符，我们操作数组的时候，就可以不再使用apply来指定上下文环境了。

  1.     //ES5的写法
  2.     let arr = [10, 20, 50, 40, 30]
  3.     let a = Math.max.apply(null, arr)
  4.     console.log(a) // 50
  6.     //ES6的写法
  7.     let arr = [10, 20, 50, 40, 30]
  8.     let a = Math.max(...arr)
  9.     console.log(a) // 50

块级函数

严格模式下：在ES6中，你可以在块级作用域内声明函数，该函数的作用域只限于当前块，不能在块的外部访问。

  1.     "use strict";
  2.     if(true) {
  3.       const a = function(){
  5.       }
  6.     }

非严格模式：即使在ES6中，非严格模式下的块级函数，他的作用域也会被提升到父级函数的顶部。所以大家写代码尽量使用严格模式，避免这些奇葩情况。

箭头函数（=>）

如果看到你这里，你发现你还没有在项目中使用过箭头函数，没关系，你并不low，而是学习不够努力。

  1.     const arr = [5, 10]
  2.     const s = arr.reduce((sum, item) => sum + item)
  3.     console.log(s) // 15

箭头函数和普通函数的区别是：

1、箭头函数没有this，函数内部的this来自于父级最近的非箭头函数，并且不能改变this的指向。

2、箭头函数没有super

3、箭头函数没有arguments

4、箭头函数没有new.target绑定。

5、不能使用new

6、没有原型

7、不支持重复的命名参数。

箭头函数的简单理解

1、箭头函数的左边表示输入的参数，右边表示输出的结果。

  1.     const s = a => a
  2.     console.log(s(2)) // 2

2、箭头函数中，最重要的this报错将不再成为你每天都担心的bug。

3、箭头函数还可以输出对象，在react的action中就推荐这种写法。

  1.     const action = (type, a) => ({
  2.       type: "TYPE",
  3.       a
  4.     })

4、支持立即执行函数表达式写法

  1.     const test = ((id) => {
  2.       return {
  3.         getId() {
  4.           console.log(id)
  5.         }
  6.       }
  7.     })(18)
  8.     test.getId() // 18

5、箭头函数给数组排序

  1.     const arr = [10, 50, 30, 40, 20]
  2.     const s = arr.sort((a, b) => a - b)
  3.     console.log(s) // [10,20,30,40,50]

尾调用优化

尾调用是什么鬼？

尾调用是指在函数return的时候调用一个新的函数，由于尾调用的实现需要存储到内存中，在一个循环体中，如果存在函数的尾调用，你的内存可能爆满或溢出。

ES6中，引擎会帮你做好尾调用的优化工作，你不需要自己优化，但需要满足下面3个要求：

1、函数不是闭包

2、尾调用是函数最后一条语句

3、尾调用结果作为函数返回

一个满足以上要求的函数如下所示：

  1.     "use strict";   
  2.     function a() {
  3.       return b();
  4.     }

下面的都是不满足的写法：

  1.     //没有return不优化
  2.     "use strict";
  3.     function a() {
  4.       b();
  5.     }
  7.     //不是直接返回函数不优化
  8.     "use strict";
  9.     function a() {
  10.       return 1 + b();
  11.     }
  13.     //尾调用是函数不是最后一条语句不优化
  14.     "use strict";
  15.     function a() {
  16.       const s = b();
  17.       return s
  18.     }
  20.     //闭包不优化
  21.     "use strict";
  22.     function a() {
  23.       const num = 1
  24.       function b() {
  25.         return num
  26.       }
  27.       return b
  28.     }

尾调用实际用途——递归函数优化

在ES5时代，我们不推荐使用递归，因为递归会影响性能。

但是有了尾调用优化之后，递归函数的性能有了提升。

  1.     //新型尾优化写法
  2.     "use strict";  
  3.     function a(n, p = 1) {
  4.       if(n <= 1) {
  5.         return 1 * p
  6.       }
  7.       let s = n * p
  8.       return a(n - 1, s)
  9.     }
  10.     //求 1 x 2 x 3的阶乘
  11.     let sum = a(3)
  12.     console.log(sum) // 6

总结

函数这一章涉及到的知识点比较多，默认参数，命名参数，不定参数，展开运算符，箭头函数，尾调用优化。

第一次学习这些知识的人可以关注箭头函数和展开运算符的使用，这是最重要也最常用的知识，如果你已经在项目中使用过这些知识，那么作为巩固也是有帮助的，俗话说温故知新。