QCon 演讲火热征集中,快来分享技术实践与洞见! 了解详情
写点什么

深入浅出 ES6(五):不定参数和默认参数

  • 2015-07-06
  • 本文字数:2618 字

    阅读完需:约 9 分钟

编者按:ECMAScript 6 已经正式发布了,作为它最重要的方言,Javascript 也即将迎来语法上的重大变革,InfoQ 特开设“深入浅出ES6 ”专栏,来看一下ES6 将给我们带来哪些新内容。本专栏文章来自 Mozilla Web 开发者博客,由作者授权翻译并发布。

今天这篇文章将为你带来两个使 JavaScript 函数语法更富表现力的新特性:不定参数和默认参数。

不定参数

我们通常使用可变参函数来构造 API,可变参函数可接受任意数量的参数。例如, String.prototype.concat 方法就可以接受任意数量的字符串参数。ES6 提供了一种编写可变参函数的新方式——不定参数。

我们通过一个简单的可变参数函数 containsAll 给大家演示不定参数的用法。函数 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;
}

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

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

这一版 containsAll 函数与前者有相同的行为,但这一版中使用了一个特殊的…needles 语法。我们来看一下调用 containsAll(“banana”, “b”, “nan”) 之后的函数调用过程,与之前一样,传递进来的第一个参数"banana"赋值给参数 haystack,needles 前的省略号表明它是一个不定参数,所有传递进来的其它参数都被放到一个数组中,赋值给变量 needles。对于我们的调用示例而言,needles 被赋值为 [“b”, “nan”],后续的函数执行过程一如往常。(注意啦,我们已经使用过 ES6 中 for-of 循环。)

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

默认参数

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

下面是一个简单的示例(反撇号表示模板字符串,上周已经讨论过。):

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

默认参数的定义形式为 [param1[ = defaultValue1 ][, …, paramN[ = defaultValueN ]]],对于每个参数而言,定义默认值时 = 后的部分是一个表达式,如果调用者没有传递相应参数,将使用该表达式的值作为参数默认值。相关示例如下:

复制代码
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) {...}## 停止使用 arguments

现在我们已经看到了 arguments 对象可被不定参数和默认参数完美代替,移除 arguments 后通常会使代码更易于阅读。除了破坏可读性外,众所周知,针对 arguments 对象对 JavaScript 虚拟机进行的优化会导致一些让你头疼不已的问题。

我们期待着不定参数和默认参数可以完全取代 arguments,要实现这个目标,标准中增加了相应的限制:在使用不定参数或默认参数的函数中禁止使用 arguments 对象。曾经实现过 arguments 的引擎不会立即移除对它的支持,当然,现在更推荐使用不定参数和默认参数。

浏览器支持

Firefox 早在第 15 版的时候就支持了不定参数和默认参数。

不幸的是,尚未有其它已发布的浏览器支持不定参数和默认参数。V8 引擎最近增添了针对不定参数的实验性的支持,并且有一个开放状态的V8 issue 给实现默认参数使用,JSC 同样也有一个开放的 issue 来给不定参数默认参数使用。

Babel Traceur 编译器都支持默认参数,所以从现在起就可以开始使用。

文后盘点

尽管技术上不支持任何新的行为,不定参数和参数默认值还是可以使一些 JavaScript 函数定义更富有表现力并且更加可读。调用时自然也更加舒爽!

鸣谢:感谢 Benjamin Peterson 在 Firefox 中实现了这些特性,同时感谢他对于整个项目的贡献,以及他用心撰写了本篇文章。

在下一篇文章中,我们将介绍另外一个简单、优雅、实用,同样是你每天都会用到的 ES6 特性。这篇文章中用到了你平时用来写数组和对象的熟悉的语法,并为这些语法润色,产生一个新的、简洁的方式来拆解数组和对象。那意味着什么呢?为什么要拆解对象?敬请期待 Mozilla 工程师 Nick Fitzgerald 为我们带来的《深入浅出 ES6 解构》。

2015-07-06 07:1651937
用户头像

发布了 63 篇内容, 共 133.5 次阅读, 收获喜欢 38 次。

关注

评论

发布
暂无评论
发现更多内容

信息架构升级|宜搭邀你体验「沉浸式」应用搭建

一只大光圈

钉钉 低代码 数字化 钉钉宜搭

【LeetCode】最短补全词Java题解

Albert

算法 LeetCode 12月日更

[Pulsar] Consumer 确认消息原理

Zike Yang

Apache Pulsar 12月日更

万字长文--基于业务视角的上云实践

hackstoic

DevOps 运维 云原生 架构设计 签约计划第二季

活动预告|Feature Store Meetup

第四范式开发者社区

OpenMLDB Feature Store

【Promise 源码学习】第十五篇 - 了解 generator 生成器

Brave

源码 Promise 12月日更

聊聊程序员35岁危机

全栈潇晨

程序员 大前端 35岁危机

Maven进阶(三):配置多仓库

No Silver Bullet

maven 12月日更

react源码解析6.legacy模式和concurrent模式

buchila11

React

8.《重学 JAVA》-- 数组

杨鹏Geek

Java 25 周年 28天写作 12月日更

钉钉宜搭招募爱心极客:用低代码传递爱与温暖

一只大光圈

钉钉 低代码 数字化 公益 钉钉宜搭

Redis(一):单线程为何还能这么快?

IT巅峰技术

redis 分布式 架构师 分布式缓存 Java Redis

团队基建系列 - 组织知识传承 4 破局

搬砖的周狮傅

团队成长

架构实战营模块一作业

黄秀明

「架构实战营」

架构实战营-第4期-模块一作业

Evan

「架构实战营」

把管理做简单

Ian哥

项目管理 十六个字 阿里管理箴言

SAP Spartacus Session affinity

汪子熙

后端 28天写作 12月日更 Spartacus 会话

[架构实战营] 模块一作业:微信业务架构与学生管理系统

Geek_0ed632

「架构实战营」

钉钉宜搭亮相“第二届ISIG中国产业智能大会”:云钉低代码,构建企业酷应用

一只大光圈

钉钉 低代码 数字化 钉钉宜搭 ISIG

架构实战营 第一周作业

姬凌伟

【架构实战营】-模块一作业

糖糖学编程

架构实战营

拆分电商系统为微服务

Steven

架构实战营

面试官:你是怎样理解Fiber的

全栈潇晨

React react fiber

Keep Going

Nydia

架构训练营 -4- 模块一作业

glenny

「架构实战营」

DataPipeline携手云南开放大学,以实时数据融合助力高校精细化管理

DataPipeline数见科技

数据库 中间件 Big Data 数据融合 高校

Flutter 2.8 的新特性【Flutter 专题 20】

坚果

flutter 28天写作 12月日更

react源码解析3.react源码架构

buchila11

React react fiber

Flutter 自定义 ACEFoldTextView 折叠文本

阿策小和尚

28天写作 0 基础学习 Flutter 内容合集 签约计划第二季 12月日更

模块一学习总结

糖糖学编程

架构实战营

给弟弟的信第8封|计算机专业应该掌握的知识

大菠萝

28天写作

深入浅出ES6(五):不定参数和默认参数_JavaScript_Benjamin Peterson_InfoQ精选文章