JavaScript学习-函数剩余参数

797 阅读2分钟

这是我参与11月更文挑战的第9天,活动详情查看:2021最后一次更文挑战

几篇文章--列表 学习了几个 JavaScript 并不完美但是不影响其运行的一些神奇小"bug":

上一篇写到 函数的可选参数, 本篇记录学习 JavaScript 函数的剩余参数, 这就很有用了.

JavaScript 函数剩余参数

函数的参数可以不传也可以传(当然也可以传递很多很多个),

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

注意: 剩余参数 这是一个真数组, 而 arguments对象可不是真正的数组

什么是剩余参数, 及其作用

函数可以接收任意数量的参数, 这一点很有用, 对于我们封装函数工具就很方便. 比如可以通过Math.min()计算给定所有参数的最小值:

对于函数的多个参数, 可以用一种简单的方法表示: 即在函数最后一个参数前写上三个点 ... 比如:

function myFunc(arg1, arg2, ...numbers) {
  //...函数体
}

这些剩余参数被绑定在 这个 变量名 的后续参数的数组(numbers)中, 可以通过循环遍历拿到这些参数. 而剩余参数前面的参数(arg1, arg2等等)都不在这个数组中

封装一个多个参数的方法函数

// 封装 多个参数的函数 min

function min(...numbers) {
  let res = Infinity
  for(let num of numbers){
    if(num < res) {
      res = num
    }
  }
  return res
}

// 使用函数:

console.log(min(5, 6, 8, -1, 2, 9, -7, 13))
// 输出 -7 找到了最小的那个参数, 而我们封装的函数并没有把每一个参数都写上

封装函数时, 通过...变量名表示剩余参数, 在调用时传递的多个参数就通过这个变量表示了, 而我们封装的函数并没有把每一个参数都写上, 没有这个表示法,那如果传递很多个参数要一个个写上就太麻烦了..

要注意 剩余参数 和 arguments对象的区别

  • arguments 对象表示了函数的参数的集合(类/伪数组), 而剩余参数是只包含哪些没有对应形参的实参(个人理解就是在参数里面没有体现出来(因为它们在剩余参数里面一并包括了))
  • arguments 对象还包含一些其他的方法: (callee属性等)
  • 还有就是开头说过的 是否是一个真数组的区别.

参考文档

MDN 官方文档 : 函数的剩余参数 | MDN