1. 首页
  2. IT资讯

「ES6基础」默认参数值

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F80e1e42ecae74a4cbab3988c451b2337″ img_width=”900″ img_height=”383″ alt=”「ES6基础」默认参数值” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E如果函数中定义的参数缺失,此参数变量的值则会是undefined。怎么给缺失的参数赋值默认值,在ES6之前,没有相关简单易用的方法分配给缺失参数默认值,但是我们一般可以这么编写代码解决缺失参数默认值:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(x, y, z) {u003Cbru003E x = x === undefined ? 1 : x;u003Cbru003E y = y === undefined ? 2 : y;u003Cbru003E z = z === undefined ? 3 : z;u003Cbru003E console.log(x, y, z); u002Fu002FOutput “6 7 3″u003Cbru003E }u003Cbru003E myFunction(6, 7);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在ES6中,我们可以用更简洁的语法进行实现,通过本篇文章类容你将学习到以下内容:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E使用ES6语法声明参数默认值u003Cu002Fliu003Eu003Cliu003E使用undefined传参u003Cu002Fliu003Eu003Cliu003E参数运算u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E本篇文章阅读时间2分钟u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E使用ES6语法声明参数默认值u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E我们可以使用ES6简洁的语法,如下示例进行声明函数参数的默认值:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(x = 1, y = 2, z = 3) {u003Cbru003E console.log(x, y, z); u003Cbru003E}u003Cbru003EmyFunction(6,7); u002Fu002F Outputs 6 7 3u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在上述代码示例中,我们在调用此函数中传递了前两个参数,因此参数的默认值(即x=1和y=2)将会被覆盖(即x=6和y=7)。由于第三个参数缺省,因此z使用默认值,将会是3。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E值使用undefined传参u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E如果我们想让具体某个参数使用默认值,我们可以使用undefined进行赋值,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(x = 1, y = 2, z = 3) {u003Cbru003E console.log(x, y, z); u002Fu002F Outputs “1 7 9″u003Cbru003E }u003Cbru003E myFunction(undefined,7,9);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E是不是很简单,只需要使用undefined,我们就可以指定具体某个参数使用默认值。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E参数运算u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E在ES6中我们不仅可以给参数默认赋值具体的参数,同时参数赋值支持参数的逻辑运算进行赋值,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction(x = 1, y = 2, z = x + y) {u003Cbru003E console.log(x, y, z); u002Fu002F Output “6 7 13″u003Cbru003E }u003Cbru003E myFunction(6,7);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在上述代码中,我们只传入了前两个参数,第三个参数缺省,第三个参数的值默认值是则会是前两个参数之和。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E今天的内容就到这里,当我们在开发一些工程应用通用组件时,都需要暴露一些接口以供使用。而这些接口的友好性是决定这个组件质量的一大指标,其中参数缺省值(默认值)的完善程度同时也影响接口的友好性,感谢ES6能让我们用如此简介的语法设置参数的缺省值。u003Cu002Fpu003Eu003Ch1u003EES6相关文章u003Cu002Fh1u003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6713733594054918663u002F?group_id=6713733594054918663″ target=”_blank”u003E「ES6基础」let和作用域u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714091462650233352u002F?group_id=6714091462650233352″ target=”_blank”u003E「ES6基础」const简介u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712258013375234568u002F?group_id=6712258013375234568″ target=”_blank”u003E「ES6基础」箭头函数(Arrow functions)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712646837519532551u002F?group_id=6712646837519532551″ target=”_blank”u003E「ES6基础」迭代器(iterator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712984431553937934u002F?group_id=6712984431553937934″ target=”_blank”u003E「ES6基础」生成器(Generator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信关注u003Cstrongu003E“前端达人”公众号u003Cu002Fstrongu003E!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「ES6基础」默认参数值

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10758.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code