研究下JavaScript中的Rest参数和参数默认值

研究下JavaScript中的Rest参数和参数默认值

本文将讨论使 JavaScript 函数更有表现力的两个特性:Rest 参数和参数默认值。

Rest 参数

通常,我们需要创建一个可变参数的函数,可变参数是指函数可以接受任意数量的参数。例如,String.prototype.concat 可以接受任何数量的字符串作为参数。使用 Rest 参数,ES6 为我们提供一种新的方式来创建可变参数的函数。

我们来实现一个示例函数 containsAll,用于检查一个字符串中是否包含某些子字符串。例如,containsAll("banana", "b", "nan") 将返回true,containsAll("banana", "c", "nan") 将返回 false。

下面是传统的实现方式(参考: http://www.aichengxu.com/view/62895):

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
参数的实现方式:

//http://www.aichengxu.com
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 这两个编译器都已经支持了参数默认值,所以你可以大胆使用。

结论

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-09-30 23:27:40

研究下JavaScript中的Rest参数和参数默认值的相关文章

javascript中获取标准URL的参数

/** * 获取标准URL的参数 * @_key:字符串,不支持数组参数(多个相同的key) * @_url:字符串,(window).location.href,使用时别误传入非window对象 * @_spliter:字符串,参数间分隔符 * 注意: * 1.如不存在指定键,返回空字符串,方便直接显示,使用时注意判断 * 2.非标准URL勿用 * 3.query(?)与hash(#)中存在键值一样时,以数组返回 */ function getUrlParams(_key, _url, _sp

GridView列添加下拉框,绑定数据源并设置默认值

添加下拉框:   注意:默认值只能在界面初始化直接中设置 DataGridViewComboBoxColumn dataGridViewComboBoxColumn = new DataGridViewComboBoxColumn(); dataGridViewComboBoxColumn.Name = "dgvcbcSeatType"; dataGridViewComboBoxColumn.DataPropertyName = "SeatType"; dataGr

javascript中无法通过div.style.left获取值的问题

一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTimeout ( function () { var div = document.getElementById("div4"); //var left = parseInt(div.style.left) + 5; var left = div.offsetLeft + 5; div.sty

Javascript 中的【false】,【零值】,【null】,【undefined】和【空字符串】

在Javascript中,我们经常会接触到题目中提到的这5个比较特别的对象--false.0.空字符串.null和undefined.这几个对象很容易用错,因此在使用时必须得小心. 类型检测 我们下来看看他们的类型分别是什么: <script type="text/javascript">     alert(typeof(false) === 'boolean');     alert(typeof(0) === 'number');     alert(typeof(&

.NET DateTime类型变量作为参数时设置默认值

一个小的 Tips. .NET 中函数参数的默认值需要是编译时常量.如果参数是引用类型,可以设置Null,如果是值类型,可以设置相应的编译时常量,如整型可以用整数,但对于DateTime(结构体,值类型)想要设置默认类型时要如何处理? 通常情况下会给 DateTime 结构体默认当时时间,即 DateTime.Now,但 DateTime.Now 不是编译时常量,因此无法通过编译. 如以下代码无法通过编译: public const DateTime defaultDateTime = Date

判断参数并赋予默认值

一个有用的code,判断用户给的参数(UserEnterFile)是否存在,如果不存在则用(EnterNothing)作为默认值 filename=${UserEnterFile:-"EnterNothing"}

函数中,如何修改形参的默认值

""" 默认形参:在函数定义阶段,提前赋值给形参, 当你实参传值的时候,实参传的值会覆盖形参的默认值. 下面的案例中,age的值从18,变成了30. """ def guess_age(age=18): while True: inp_age=int(input('输入年龄:').strip()) if age == inp_age: print('duile') break else: print('error') guess_age(30)

C#使用OleDB操作ACCESS插入数据时提示:参数 @p_Contract 没有默认值

OleDbParameter param = new OleDbParameter("" + dc.ColumnName, dc.DataType); 出现该问题的原因是创建了Parameter,却没有为Parameter.value指定一个值.

None还可以是函数定义可选参数的一个默认值,设置成默认值时实参在调用该函数时可以不输入与None绑定的元素

1 >>> def add_and_maybe_multiply(a,b,c=None): 2 result = a+b 3 if c is not None: 4 result = result*c 5 return result 6 7 >>> add_and_maybe_multiply(2,3,' ')#实参为空格,返回空格 8 ' ' 9 >>> add_and_maybe_multiply(2,3,'')#实参为空,返回为空 10 '' 1