说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏:剩余参数和默认参数

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第五篇,带你了解ES6的剩余参数和默认参数。

ES6作为新一代JavaScript标准,正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,供大家学习借鉴。本文为该系列的第五篇。

本文讲述的是有关ES6剩余参数(Rest parameters)和默认参数(Defaults parameters)的使用。

剩余参数(Rest parameters)

当需要创建一个可变函数API时,该函数需要实现任意数目参数的输入。例如,String.prototype.concat方法可接受任意数目的字符串参数输入。而在ES6中,可利用剩余参数来转变实现思路。

以下将结合实例说明。containsAll是一个可变函数,用于检测字符串是否包含成分子串。例如,containsAll("banana", "b", "nan")返回true,containsAll("banana", "c", "nan")则返回false。

采用传统写法的代码如下:

function containsAll(haystack) {  for (var i = 1; i < arguments.length; i++) {    var needle = arguments[i];    if (haystack.indexOf(needle) === -1) {      return false;    }  }  return true;}

该方法的核心是利用了参数对象,以数组的方式向函数传入参数。它完全满足需求,但可读性差。其函数参数仅是唯一的haystack,因此很难一眼就看出到底包含了哪些参数。此外,在进行递归运算时,需要注意初始位置的索引号是1而不是0,因为arguments[0]对应的是haystack参数。最后假若需要在haystack的前或后添加别的参数,那么就不得不对循环进行更新。如果换用剩余参数,这些问题皆可一一迎刃而解。

使用剩余参数的代码如下:

function containsAll(haystack, ...needles) {  for (var needle of needles) {    if (haystack.indexOf(needle) === -1) {      return false;    }  }  return true;}

该方法实现了与传统写法一样的功能,区别是使用了特殊的语法...needles。那么对于containsAll("banana", "b", "nan"),其运算过程是怎么样的呢?首先haystack被第一个参数banana填充;位于needles前的符号...表明needles为剩余参数;以后的其它参数会被放入一个数组然后再分配给变量needles,本例中为["b", "nan"];之后的判断过程按常规执行。(注:这里使用了for-of 循环语法)

要提醒一点,只有位于最末的参数可被标记为剩余参数。位于剩余参数之前的参数与普通参数的处理方式是一样的。所有的额外参数都会被放入一个数组然后再分配给剩余参数。如果没有额外参数,剩余参数则为一个空数组;剩余参数不能被赋值为undefined。

默认参数(Default parameters)

很多时候,函数对传入的参数不一定全都进行处理,同时默认参数亦可以替代传入参数来进行使用。JavaScript一直以来在默认参数的处理上都显得比较笨拙;无值参数会被看作undefined。ES6里引入了特殊的默认参数处理方式。

请看下面的例子。

function animalSentence(animals2="tigers", animals3="bears") {    return `Lions and ${animals2} and ${animals3}! Oh my!`;}

对上述函数中每个参数来说,=之后的赋值表达式作用是为参数进行默认取值。因此, animalSentence() 返回“Lions and tigers and bears! Oh my!”,animalSentence("elephants") 返回“Lions and elephants and bears! Oh my!”,animalSentence("elephants", "whales") 返回“Lions and elephants and whales! Oh my!”。

使用默认参数时,有几点需要留意。

  • 不同于Python,默认值表达式在函数调用的时候进行求值。也就是说,默认表达式可以使用已定义的参数值。例如把上述动物例子的函数改为较特别的方式:

function animalSentenceFancy(animals2="tigers",    animals3=(animals2 == "bears") ? "sealions" : "bears"){  return `Lions and ${animals2} and ${animals3}! Oh my!`;}

其结果是:animalSentenceFancy("bears") 返回的是 “Lions and bears and sealions. Oh my!”。

  • 取值undefined的作用等于是没有传入任何东西。因此,animalSentence(undefined, "unicorns") 返回的是 "Lions and tigers and unicorns! Oh my!"
  • 没有显式定义的默认参数等同于undefined,因此:

function myFunc(a=42, b) {...}

等同于

function myFunc(a=42, b=undefined) {...}

小结

ES6对剩余参数和默认参数使得JS函数的声明更具可读性和表达性,不妨动手试试。(译者:伍昆 责编:陈秋歌)

原文链接:ES6 In Depth: Rest parameters and defaults

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏:ES6简介

【探秘ES6】系列专栏:迭代器和for-of循环

【探秘ES6】系列专栏:生成器

【探秘ES6】系列专栏:模版字符串

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

AsyncTask对比Thread加Handler Android Drawable叠加处理方法 android.os.Debug调试工具使用方法 Android多点触控开发原理 inent调用代码总结,不断完善中 onRetainNonConfigurationInstance和getLastNonConfigurationInstance Android中String资源文件的format方法 Android工程内嵌资源文件的两种方法 Android AIDL全攻略三 - AIDL框架 Android AIDL全攻略二 - Service绑定 自定义Android主题风格theme.xml方法 Android开发之模拟按下Home键的效果 Android AIDL全攻略一 Android Picture和PictureDrawable的用处 Android自定义View以及layout属性全攻略 Android通过Intent发送电子邮件含附件 Android调试技巧之Eclipse行号和Logcat Android Txt文本读写类源代码 Android游戏开发之旅20 双按事件捕获 Android游戏开发之旅19 分辨率大全 保护你的Android付费软件-LVL全攻略(二) 保护你的Android付费软件-LVL全攻略 android调试工具monkey压力测试实战 Android开发工具-App Inventor Android游戏开发之旅18 SoundPool类 Android多线程下载远程图片 Android读写Txt文本文件代码 Android游戏开发之旅17 图像渐变特效 Android游戏开发之旅16 异步音乐播放 Android游戏开发之旅15 按键中断处理 Android游戏开发之旅14 游戏开发实战一 cookie 只能已天为单位 来过期么? :( 30分钟就国旗 用什么? 请教高手 有些IE不能瀏覽flash文件﹐請問在哪有下載? 求购时间控件,用去web开发 如何才能按照分类显示视图的内容呢? 同志们 再见 接分! 再发一次,ie版本问题怎么解决,100分 请教:在Rational rose中如何去设计数据库表? 为什么wndows2k pro一访问windows2k server就有"打印机"和"任务计划"的共享,可不可以消除? win2k server下,iis5.0有问题,我想卸载,再重新安装,怎么做? treeview的使用小结(一) INDY 资料! 请分析这段代码,谢谢 怎样获得DataGrid的DataSource? 有关struts的问题,返回页面结果不对!在线等待,以解决就结帖 怎么改变快捷菜单PopupMenu1的颜色? 用OWC组件做柱状图,需要显示不同颜色的柱状以及显示不同颜色的图例 VS.NET中如何让自定义的事件出现在属性编辑器中? javascript 中有没有能返回指定某年某月中总天数的函数 如何将主窗体中的变量传到报表中,以供dataset查询用,急急急!!! 新手探路 不知道这是不是一个bug 函数返回值类型问题 兄弟我现在改行搞传统的邮政商业信函业务!给点建议!来者有分! 装有isa客户端的机器不能用FlashGet或者蚂蚁下载 网路多少钱才要交税? Kingofark关于英语及外语学习的50个观点 adotable定位记录有哪些方法?如何使用? 超高难度求sql语句,非高手莫进,在线等.......... petshop有些代碼不明白。。。。。。。。。。。 哎,运算符重载把我卡住了!求救!!! 最后 请问函数传递,设置默认值问题! 通过ODBC连接INFORMIX的问题!急!急!急! 有没有VC高手想在上海找工作? 求一个发送邮件的例子(急!!) 有谁碰到过多人同时改写几十个xml文件从而导致xml文件混乱的情况? 我在datawindow中设置initial vlaue=0,为什么写到数据库里的值还是null 请问联众和中游客户端的聊天大厅是基于chtmlview还是crichedit编程的? WINDOWS高级用户或技术支持人员请进! 通过ODBC连接INFORMIX的问题!急!急!急! 将数据保存到数据库问题 ???急。。。在线等待。。。 一个动态模板列的问题 请各位兄弟姐妹扔个FontTwister1.3的注册码上来,谢过了。 高分求救:怎么时查询后的记录成高亮状态! jsp中如何得到 select 控件的值??? 初学者求救!!!! NetBSD China站点开通<CSTC团队> 从数据库读出字段类型为int型的数据,如何转换成字符型的? 想用C来做个东西,但不知做什么好 exchange 2003 rc1版安装后后没有M盘?就是没有M盘,还是安装的问题? 放马金鞍是什么意思、清楚‘应该是"玉马金鞍"和“放马华山”的讹误 "玉马金鞍"是好坐骑,可以表征主人富贵之极,相当于现在的劳斯莱斯 “放马华山”,周武王在太公望辅助下灭商,于是偃武 bone和bones有什么区别啊 求“Just jump his bones already”的翻译Vampire Diary 第一季第二集,字幕组给出的翻译是“猛的扑上去”,但我查不到这个词组啊,求解释 baby-G和G-shock系列有什么区别 咋做.数学初二通分 假如让你穿越时空隧道,回到春秋时期群雄并起的年代,当上齐国国君的你,是如何管理 春秋时期,齐国首先争霸的原因有哪些 如何退关? 退运 与 退关 的区别? 甲乙两地相距450千米,一辆汽车从甲地到乙地用了10小时,返回用了8小时,汽车往返平均速度是多少这是到练习题,因为明天就要交, 港角是什么意思很多人说 这个东西很有港角 或者 猫是多么有港角的动物啊 什么意思啊 叙利亚中部城市发生自杀式炸弹袭击 致美海军核潜艇服役 穿了一身“怪衣服”外交部:CNN同情“10 28”涉男子被卡两栋大楼中动弹不得 消防员破男子加油站点烟引燃汽油 妻子瞬间变“澳洲癌症死亡率调查:农村地区高于城市澳大利亚人口出生率回升 总量破230德国惊现1.8吨二战炸弹 逾2万人撤俄罗斯将对中国过境游客实行72小时免叙利亚中部城市发生自杀式炸弹袭击 致俄将对20国过境游客实行72小时免签泛亚有色金属助力中国CIGS薄膜太阳弹吧联手360, 独家推出钢琴视频在东亚杯8月武汉开打 中国男、女足过招中国研成首台温等静压成形成套设备 打广平各中小学开展环保宣传活动 迎接世【一图解读】切割开舱救援的作用是什么衡水:“火红”十三中学师生科学备考迎加纳一加油站发生大火96人丧生上海科创中心建设新政策落地:股东变更上海:人才引进政策年内出台 助力科创河南大部遭遇降雨影响麦收
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘