JavaScript函数参数的基本知识

学习JavaScript函数参数的基本知识

一个函数可以接受一个或多个参数。

const dosomething = () => {
  //do something
}

const dosomethingElse = foo => {
  //do something
}

const dosomethingElseAgain = (foo, bar) => {
  //do something
}

从ES6/ES2015开始，函数可以为参数设置默认值。

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

这允许你调用一个函数，而无需填写所有参数。

dosomething(3)
dosomething()

ES2018为参数引入了尾部逗号，这一特性有助于减少在移动参数时因缺少逗号而产生的bug（例如将最后一个移到中间）。

const dosomething = (foo = 1, bar = 'hey',) => {
  //do something
}

dosomething(2, 'ho!')

在调用你的函数时，在最后一个参数后加上尾音逗号也是可以的。

你可以把所有的参数包在一个数组中，并在调用函数时使用 传播操作符在调用函数时使用

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}
const args = [2, 'ho!']
dosomething(...args)

对于许多参数，记住顺序可能很困难。使用对象，去结构化允许保留参数名称。

const dosomething = ({ foo = 1, bar = 'hey' }) => {
  //do something
  console.log(foo) // 2
  console.log(bar) // 'ho!'
}
const args = { foo: 2, bar: 'ho!' }
dosomething(args)

函数现在支持默认参数。

const foo = function(index = 0, testing = true) { /* ... */ }
foo()

默认参数值已在ES2015中引入，并在现代浏览器中广泛实现。

这是一个doSomething 函数，它接受param1 。

const doSomething = (param1) => {

}

如果函数被调用时没有指定参数，我们可以为param1 添加一个默认值。

const doSomething = (param1 = 'test') => {

}

当然，这对更多的参数也是适用的。

const doSomething = (param1 = 'test', param2 = 'test2') => {

}

如果你有一个独特的对象，里面有参数值，怎么办？

很久以前，如果我们必须向一个函数传递一个选项对象，为了在其中一个选项没有被定义的情况下获得这些选项的默认值，你必须在函数中添加一点代码。

const colorize = (options) => {
  if (!options) {
    options = {}
  }

  const color = ('color' in options) ? options.color : 'yellow'
  ...
}

通过对象重构，你可以提供默认值，这大大简化了代码。

const colorize = ({ color = 'yellow' }) => {
  ...
}

如果在调用我们的colorize 函数时没有传递任何对象，同样地，我们可以默认分配一个空对象。

const spin = ({ color = 'yellow' } = {}) => {
  ...
}