ES6 中形参使用技巧

引言

ES6 是 JavaScript 的一个重要版本,它带来了许多新的特性和语法,其中包括箭头函数、解构赋值、类和模块等。在 ES6 中,形参的使用也有了一些新的技巧,本文将从多个方面详细介绍 ES6 中形参的使用技巧,帮助读者更好地理解和应用 ES6 中的形参语法。

默认参数

在 ES6 中,可以为函数的形参设置默认值,这样在调用函数时如果没有传递对应的参数,就会使用默认值。例如:

-------- ----- - --- - - --- -
  -------------- ---
-

------ -- -- -- --
-------- -- -- -- --
-------------- ---- -- -- -- --

在上面的例子中,函数 foo 的形参 xy 都设置了默认值,如果在调用函数时没有传递参数,就会使用默认值。需要注意的是,只有传递 undefined 才会触发默认值,传递 null 不会触发默认值。

剩余参数

在 ES6 中,还可以使用剩余参数语法来表示函数接收任意数量的参数。例如:

-------- ------------ -
  --- ------ - --
  --- ---- --- -- ----- -
    ------ -- ----
  -
  ------ -------
-

------------------ -- ---- -- -- -
------------------ -- -- ---- -- -- --

在上面的例子中,函数 sum 的形参使用了剩余参数语法 ...nums,这样就可以接收任意数量的参数,并将它们放入一个数组中。在函数体内部,可以使用 for...of 循环来遍历这个数组,并计算它们的和。

需要注意的是,剩余参数必须放在所有形参的最后一个,否则会报错。

解构赋值

在 ES6 中,还可以使用解构赋值语法来快速获取函数的形参中的属性值。例如:

-------- ------- --- -
  -------------- ---
-

--- --- - --- --- -- ----
--------- -- -- -- --

在上面的例子中,函数 bar 的形参使用了解构赋值语法 {x, y},这样就可以快速获取传递进来的对象中的 xy 属性值。在调用函数时,将一个包含 xy 属性的对象传递给函数即可。

需要注意的是,如果传递进来的对象中没有 xy 属性,则会报错。

箭头函数

在 ES6 中,还引入了箭头函数语法,它可以更简洁地定义函数。例如:

--- --- - --- -- -- -
  -------------- ---
-

------- ---- -- -- -- --

在上面的例子中,使用箭头函数语法定义了一个函数 baz,它接收两个形参 xy,并在函数体内部打印它们的值。需要注意的是,箭头函数没有自己的 this,它会继承父级作用域的 this

总结

本文介绍了 ES6 中形参的使用技巧,包括默认参数、剩余参数、解构赋值和箭头函数等。这些技巧可以帮助开发者更好地理解和应用 ES6 中的形参语法,提高代码的可读性和可维护性。读者可以根据自己的需求选择合适的技巧来优化自己的代码。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65d02c05add4f0e0ff937a8b