[JS]函数进阶

本节目标

提升函数应用的灵活度

• 动态参数
• 剩余参数
• 展开运算符
• 箭头函数

动态参数

arguments是函数内部内置的伪数组变量, 它包含了调用函数时传入的所有实参

<script>
  // 需求: 求和函数, 不管用户传入几个实参, 都计算求和
  function getSunm() {
    let s = 0
    for (let i = 0; i < arguments.length; i++) {
      s += arguments[i]
    }
    console.log(s);
  }

  getSunm(2, 3) // 5
  getSunm(2, 2, 3) // 7
  getSunm(2, 2, 3, 5) // 12
</script>

总结:

1. arguments是一个伪数组, 只存在于普通函数中
2. 箭头函数中没有arguments
3. arguments的作用就是动态获取函数的实参

伪数组与数组的区别:

• 伪数组与真数组类似, 由元素+ 索引构成
• 伪数组没有数组常用的一些方法

剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

<script>
  function getSunm(a, b, ...arr) {
    console.log(arr);
  }

  getSunm(2, 3) // []
  getSunm(2, 2, 3) // [3]
  getSunm(2, 2, 3, 5) // [3,5]
</script>

总结:

1. ...是语法符号, 置于函数形参的最后, 用于获取多余的实参
2. 剩余参数得到的是一个真数组
3. 开发中推荐使用剩余参数

展开运算符

展开运算符 ( ... ) 可以将一个数组进行展开

<script>
  // 基础语法
  const arr1 = [1, 2, 3]
  console.log(...arr1) // 打印 1 2 3 => 实际 1, 2, 3

  // 求数组最大值
  Math.max(...arr1) // 3
  Math.min(...arr1) // 1

  // 合并数组
  const arr2 = [4, 5, 6]
  const arr3 = [...arr1, ...arr2]
  console.log(arr3)  // [1, 2, 3, 4, 5, 6]
</script>

总结:

• 展开运算符不修改原数组
• 剩余参数在函数中使用. 得到真数组
• 展开运算符配合数组使用, 把数组展开

箭头函数

引入箭头函数的目的是简化函数写法并且不绑定this, 箭头函数更适用替换匿名函数 (函数表达式)

基本语法

<script>
    // 基本写法
    const fn1 = () => {
      console.log(123)
    }
    fn1()

    // 只有一个形参, 可以省略小括号
    const fn2 = v => {
      console.log(v)
    }
    fn2(1)

    // 只有一行代码,可以省略大括号
    const fn3 = v => console.log(v)
    fn3(2)

    // 只有一行代码, 可以省略return
    const fn4 = (k, v) => k + v
    fn4(1, 2)

    // 直接返回对象需要()包裹
    const fn5 = (uname) => ({ name: uname })
    fn5('张三')
  </script>

小结:

• 只有一个参数可以省略小括号
• 如果函数体只有一行代码, 可以写到一行上, 并且无需写return, 直接返回值
• 加括号的函数体返回对象字面量表达式

this指向

箭头函数出现之前, 函数都是根据它是如何被调用的, 来定义函数的this, 令人讨厌

箭头不会创建自己的this, 而是沿用上一级作用域的this

<script>
  // 普通函数的this指向:  谁调用函数, this就指向谁 
  // 普通函数的this
  function fn() {
    console.log(this)  // window
  }
  fn() // window.fn()

  // 对象方法中的this
  const obj = {
    name: 'zs',
    sayHi: function () {
      console.log(this) // obj
    }
  }
  obj.sayHi()

  // 箭头函数的this指向:  指向上级作用域的this
  // 箭头函数的this
  const fn2 = () => {
    // this -> 上级作用域的this -> fn2()的this -> window
    console.log(this) // window
  }
  fn2() // window.fn2()

  // 对象方法中的this
  const obj2 = {
    name: 'zs',
    sayHi: () => {
      // this -> 上级作用域的this -> obj2的this -> window
      console.log(this) // window
    }
  }
  obj2.sayHi() // window.obj2.sayHi()

  // 对象方法中的this
  const obj3 = {
    name: 'zs',
    sayHi: function () {
      let i = 0
      const count = () => {
        // this -> 上级作用域的this -> sayHi的this -> obj3
        console.log(this) // obj3
      }
      count()
    }
  }
  obj3.sayHi()
</script>

<script>
  // 普通函数的this
  const btn = document.querySelector('#btn')
  btn.addEventListener('click', function () {
    console.log(this) // btn
  })

  // 箭头函数的this
  btn.addEventListener('click', () => {
    // this -> 上级作用域的this -> addEventListener的this -> window
    console.log(this) // window
  })
  
</script>

总结:

• 事件回调函数中不推荐使用箭头函数,
• 事件回调函数中使用箭头函数, this为全局的window