25.说一下函数形参、实参、剩余参数、默认参数、隐式参数.md

本题难度：⭐

答：

形参和实参

• 形参是定义函数的时候列举的变量。
• 实参是调用函数的时候传递给函数的值。

再看一个例子，分别展示函数、函数表达式和箭头函数的形参和实参

剩余参数

剩余参数，也叫 rest 参数，是 ES6 时引入的，形式为...变量名，用于获取函数的多余参数。

rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function sum (...rest) {
  return rest.reduce((acc, pre) => acc + pre)
}

console.log(add(1, 2, 3)) // 6

ES6 之前没有剩余参数，只能用 arguments对象处理。

arguments是伪数组，要先转成数组。

function sum () {
  const args = Array.prototype.slice.call(arguments)  
  return args.reduce((acc, pre) => acc + pre)
}

console.log(add(1, 2, 3)) // 6

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}

函数的length属性，不包括 rest 参数。

const fn1 = (a) => {}
console.log(fn1.length) // 1

const fn2 = (...a) => {}
console.log(fn2.length) // 0

const fn3 = (a, ...b) => {}
console.log(fn3.length) // 1

默认参数

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

function log (x, y = 'World') {
  console.log(x, y)
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

ES6 之前，要想实现相同的功能，就要这么写，

function log (x, y) {
  y = y || 'World'
  console.log(x, y)
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

function f (x = 1, y) {
  return x + y
}
console.log(f(2)) // 输出 NaN，因为运算的是 2 + undefined 
console.log(f(undefined, 2)) // 输出3，传入undefined，该参数等于默认值

上例中，x 有默认参数，如果调用函数时只传一个参数，以为传的就是 y 的话，就错了，程序只会以为你传了 x，没传 y，y 就是 undefined 了。

如果传入undefined，将触发该参数等于默认值。

函数的 length 属性，不包括默认参数

const fn1 = (a) => {}
console.log(fn1.length) // 1

const fn2 = (a = 1) => {}
console.log(fn2.length) // 0

const fn3 = (a, b, c = 1) => {}
console.log(fn3.length) // 2

隐式参数

JS 里的函数有两个隐式参数，一个是 arguments，一个是 this

function fn () {
  console.log(arguments)
  console.log(this)
}

fn(1, 2, 3)

说到 arguments，就会说到伪数组转数组，可以看这篇：

「前端每日一问（18）」JS 中伪数组怎么转成数组

关于 this，可以看文末链接。

结尾

如果我的文章对你有帮助，你的👍就是对我的最大支持^_^

我是阿林，输出洞见技术，再会！

上一篇：

「前端每日一问（24）」说一下 JS 中的 this

下一篇：

「前端每日一问（26）」箭头函数和普通函数有啥区别？