探讨JavaScript中的Rest参数和参数默认值


Posted in Javascript onJuly 29, 2015

Rest 参数

通常,我们需要创建一个可变参数的函数,可变参数是指函数可以接受任意数量的参数。例如,String.prototype.concat 可以接受任何数量的字符串作为参数。使用 Rest 参数,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; 
} 
  
function containsAll(haystack) { 
 for (var i = 1; i < arguments.length; i++) { 
 var needle = arguments[i]; 
 if (haystack.indexOf(needle) === -1) { 
  return false; 
 } 
 } 
 return true; 
}

该实现用到了 arguments 对象,该对象是一个类数组对象,包含函数被调用时的实参列表。这段代码正是我们想要的,但其可读性却不是最优的。函数只有一个形参 haystack,所以不可能一看就知道该函数需要多个参数,并且在遍历 arguments 时,需要特别注意遍历的开始索引为1 ,而不是常见的 0,因为 arguments[0] 就是函数定义时的形参 haystack。如果我们想在 haystack 参数之前或之后添加一些参数,我们不得不更新内部的循环。Rest 参数解决了这些问题,下面是使用 Rest 参数的实现方式:

function containsAll(haystack, ...needles) { 
 for (var needle of needles) { 
 if (haystack.indexOf(needle) === -1) { 
  return false; 
 } 
 } 
 return true; 
} 
  
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 前面的省略号表示它是一个 Rest 参数,剩余的所有实参将被放入一个数组中,并将该数组赋给 needles 遍量。在这个调用中,needles 的值为 ["b", "nan"]。然后,就是正常的函数执行了。

只能将函数的最后一个函数作为 Rest 参数,在函数被调用时,Rest 参数之前的参数都将被正常填充,之外的参数将被放入一个数组中,并将该数组作为 Rest 参数的值,如果没有更多的参数,那么 Rest 参数的值为一个空数组 [],Rest 参数的值永远都不会是 undefined。

参数的默认值

通常,调用一个函数时,不需要调用者传递所有可能的参数,那些没有传递的参数都需要一个合理的默认值。JavaScript 对那些没有传递的参数都有一个固定的默认值 undefined。在 ES6 中,引入了一种新方法来指定任意参数的默认值。

看下面例子:

function animalSentence(animals2="tigers", animals3="bears") { 
 return `Lions and ${animals2} and ${animals3}! Oh my!`; 
} 
  
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!`; 
} 
 
  
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) {...} 

等同于

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

   

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

抛弃 arguments

通过 Rest 参数和参数的默认值,我们可以完全抛弃 arguments 对象,使我们的代码可读性更高。此外,arguments 对象也加深了优化 JavaScript 的难题。

希望以上两个新特性可以完全取代 arguments。作为第一步,在使用 Rest 参数或参数的默认值时,请避免使用 arguments 对象,假如 arguments 对象还不会立即被移除,或者永远不会,那么也最好是避免在使用 Rest 参数或参数默认值时使用 arguments 对象。

兼容性

Firefox 15 以上的版本已经支持这两个新特性。然而,除此之外,还没有其他任何浏览器支持。最近,V8 的实验环境添加了对 Rest 参数的支持,而参数默认值还有一个 issue,JSC 也对 Rest 参数和参数默认值提了一些 issue。

Babel 和 Traceur 这两个编译器都已经支持了参数默认值,所以你可以大胆使用。

结论

尽管从技术层面上看,这两个新特性在并没有给函数引入新的行为,但它们可以使一些函数的声明更具表现力和可读性。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 #Javascript
js数组去重的方法汇总
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 #Javascript
JavaScript中的cacheStorage使用详解
Jul 29 #Javascript
JavaScript中数组继承的简单示例
Jul 29 #Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 #Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 #Javascript
You might like
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
安全检查管理制度
2014/02/02 职场文书
军神教学反思
2014/02/04 职场文书
2014年清明节寄语
2014/04/03 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
小学生运动会广播
2015/08/19 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server