es6关于function的更新

Posted 2021-03-06 zhaoyang007

1. 函数参数的默认值
   1. es5
      function f (x, y, z) { // 如何对待参数缺省的处理，利用这种方式实现了默认值。 if (y === undefined) { y = 7 } if (z === undefined) { z = 42 } return x + y + z }
      这个函数有3个参数x,y,z，x是必须的参数，yz是可选的参数，既然是可选也就是说允许它为空，这是必须传
      和可选的参数的区别，同时对于可选的参数，我们一般情况下希望它提供默认值。
   2. es6
      1. 我们在写这个参数的时候，就同时指定了默认值。要把没有默认值的参数往前写，有默认值的往后靠。
         function f (x, y = 7, z = 42) { return x + y + z } console.log(f(1, 8, 43))
      2. 中间的参数需要使用默认值时传undefined就行了。
         console.log(f(1, undefined, 43))
      3. 参数的默认值可以是包含其他参数的表达式
         function f (x, y = 7, z = x + y) { return x + y + z }
      4. 有的时候我们在函数内部很想知道这个函数到底传入的几个参数，arguments它的作用就是告诉你当前函数的
         参数情况，函数真正被执行的时候传入了多少个参数都在arguments这个伪数组里面，这是es5中的做法。在
         es6的时候函数内部禁止使用arguments，那怎么办呢。
         1. 如果你只是想判断传入了多少个参数，换一个做法就是取你函数的length，f.length，也就是函数体本身
            的length属性。这个时候就分情况了，有默认值的和没默认值的。当你不让我用arguments来获取我输入
            的参数的时候，我用函数体的length属性能获取到没有默认值的参数的个数，也就是说它获取的不是你执行
            的时候输入的参数的个数，而是你定义的时候没有默认值的参数的个数。
2. 不确定参数的问题
   1. es5
      
      使用arguments
      function sum () { let num = 0 // es5伪数组转数组方式 // Array.prototype.forEach.call(arguments, function (item) { // num += item * 1 // }) // es6伪数组转数组方式 Array.from(arguments).forEach(function (item) { num += item * 1 }) return num }
   2. es6
      
      使用rest，它的含义是，用...表示这个函数的所有参数都放在nums这个变量中。
      function sum (...nums) { let num = 0 nums.forEach(function (item) { num += item * 1 }) return num }
      rest有两个用处
      
      1. rest参数是用来获取所有的参数的，而且是函数被执行的时候的参数
      2. nums它是数组，不是伪数组
      3. 它还可以拆开，也就是说把所有输出的参数你先指定1,2,3，剩余的不确定的参数都放到它这里面去。就可以啦。
3. spread
   
   上面我们讲述了rest参数它用来处理不确定参数的内容，也就是说我的这个函数在定义的时候，参数是不确定的。我
   用rest这个操作来获取这个问题的解决方式。那么还有一种情况是跟它相反的，我的这个函数在设计参数的时候是固定
   的，但是传入的数据是数组，也就是不确定的内容。
   demo: 计算三角形周长
   1. es5

     function sun (x = 1, y = 2, z = 3) {
       return x + y + z
     }
     let data = [4, 5, 6] // 后端返回数据
     sum(data[0], data[1], data[2])

   我们只能把这个数组中的数据按照索引分别取出来对应我们的x,y,z
   sum.apply(this, data)
   使用apply传参是数组的特性，它允许把函数的参数收敛到一个数组中去调用，它会帮你自动的去做0,1,2跟函数的参数
   的对应。

   1. es6
      

     sum(...data)

   它跟rest理解为是一个反操作，这个反操作是说这个数据是一个数组，我利用...就把数组的内容打散到我指定的x,y,z
   这个上面去。而rest是说你给的这个x,y,z的三个参数我收敛到数组中去。这就是它们两个是相反操作的原因。一个是收
   一个是散。
4. rest, spread总结
   
   rest解决的问题是说当参数不确定的时候，我把所有的参数收敛到我的这个数组中来。跟它相反的情况是说我函数定义
   的时候的参数是确定的，但我传入的数据是一个收敛到一个数组中的所有元素，我希望把数组中的按照索引0,1,2分给
   函数定义时的三个参数x,y,z，它是一个相反的操作。
5. es6的箭头函数
   
   () => {}
   1. es5声明函数

     function hello () {}
     let hello = function () {}

   在es6之前声明函数无非就这两种形式
   1. es6

     let hello = () => {}

   1. 有且只有一个参数的时候()可以省略
   2. 返回值是表达式时，可以省略{}和return，如果返回值是一个字面量对象，外面要加一个()，这个小括号就当作运算表达式
      的作用。
   3. this问题
      
      普通函数和箭头函数对this的指向定义不同了，普通函数是谁在调用这个函数this就指向谁，箭头函数是我在定义的时候this
      指向的是什么，我在执行的时候this还是什么。