ES6 中新的函数特性–不定参数,默认参数与解构赋值

ES6 中三种新的特性:不定参数和默认参数,解构赋值;使 JavaScript 函数语法更富表现力(推荐使用 FireFox)。

参考博文一:ES6 In Depth:Rest parameters and defaults

参考博文二:ES6 In Depth:Destructuring

不定参数

我们通过一个简单的可变参数函数containsAll给大家演示不定参数的用法。函数containsAll可以检查一个字符串中是否包含若干个子串,例如:containsAll("javascript", "java", "script")返回true

首先使用传统方法来实现这个函数:

在这个实现中,我们用到了神奇的arguments对象,它是一个类数组对象,其中包含了传递给函数的所有参数。这段代码实现了我们的需求,但它的可读性却不是最理想的。函数的参数列表中只有一个参数word,我们无法一眼就看出这个函数实际上接受了多个参数。另外,我们一定要注意,应该从 1 开始迭代,而不是从 0 开始,因为arguments[0]相当于参数word。如果我们想要在word前后添加另一个参数,我们一定要记得更新循环体。不定参数恰好可以解决可读性与参数索引的问题。下面是用ES6不定参数特性实现的containsAll函数:

这一版中使用了一个特殊的...alphas语法,传递进来的第一个参数"javascript"赋值给参数wordalpha前的省略号表明它是一个不定参数,所有传递进来的其它参数都被放到一个数组中,赋值给变量alphas。对于我们的调用示例而言,alpha被赋值为["java", "script"]

在所有函数参数中,只有最后一个才可以被标记为不定参数。函数被调用时,不定参数前的所有参数都正常填充,任何“额外的”参数都被放进一个数组中并赋值给不定参数。如果没有额外的参数,不定参数就是一个空数组,它永远不会是undefined

默认参数

通常来说,函数调用者不需要传递所有可能存在的参数,没有被传递的参数可由感知到的默认参数进行填充。JavaScript有严格的默认参数格式,未被传值的参数默认为undefined。ES6 引入了一种新方式,可以指定任意参数的默认值。

下面是一个简单的示例(反撇号表示模板字符串,参考博文):

默认参数有几个要点需要注意:

  • 默认值表达式在函数调用时自左向右求值;

将上一段代码稍做修改:

fullname("lai")返回“My name is laichuanfeng”

  • 传递undefined值等效于不传值;
  • 没有默认值的参数隐式默认为,undefined,所以:

是合法的,并且等效于:

解构赋值

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰。
可以这样将数组的元素赋值给三个变量:

以及对象的解构赋值:

当属性名与变量名一致时,可以通过一种实用的句法简写:

当你要解构的属性未定义时你可以提供一个默认值:

解构赋值在函数中的应用

我们通常使用默认与可变的参数对象来配置插件参数,比如$.extend()方法使参数变得更具灵活性。

如果options中有值,便覆盖默认值,可以传全部参数eventHandler({digit:false,min:0,max:10,toFixed:2}),也可传个别参数eventHandler({digit:false,min:0}),以及乱序eventHandler({digit:false,toFixed:2,min:0,max:10})

解构赋值可以让你不借助插件而实现上面的特性。

函数参数定义

解构赋值可以使我们忘记参数的顺序:

如此调用description({firstname:"lai",gender:"male",lastname:"chuanfeng"})

配置对象参数

延伸一下之前的示例,我们同样可以给需要解构的对象属性赋予默认值。当我们构造一个提供配置的对象,并且需要这个对象的属性携带默认值时,解构赋值中默认值特性就派上用场了,将上段代码修改:

如此传参:description({firstname:"xiao"})。遗憾的是,对象的默认值简写语法仍未在Firefox中实现,所以我们将代码修改为数组的默认值简写:

传参方式也随之改变,description([firstname="xiao"]);

多重返回值

JavaScript 语言中尚未整合多重返回值的特性,但是无须多此一举,因为你自己就可以返回一个数组并将结果解构赋值:

或者,你可以用一个对象作为容器并为返回值命名:

这种方式,变量名必须与返回值的键名保持一致,但都比额外保存一个临时变量要好得多:

文后小结

在我看来,解构赋值给 JavaScript 中的函数带来的改变是巨大的,用简洁语法实现很多以前梦寐以求的实用特性,渐渐地,你会在每天使用的语言中加入解构这个新特性,它可以让你的代码变得更加精简整洁。

《ES6 中新的函数特性–不定参数,默认参数与解构赋值》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注