https://jeffmo.github.io/es-trailing-function-commas 目前是一个 stage 3 的提案,Chakra 和 JSC 已经实现了,它允许我们在函数定义时的最后一个形参和函数调用时的最后一个实参的尾部加上逗号。

最后一个参数加上逗号有什么优点?

注意:最后一个参数加逗号的优点只在参数分行写时才能体现出来。

优点1:修改代码时不容易出错

假如当前的代码长这样:

function foo(
param1,
param2,
param3
)

而你此时要做的是删除 param3 参数的实现,这时你很有可能把光标定位到 param3 那一行,连续按下 Command+X 和 Command+S 了事(Sublime):

function foo(
param1,
param2,
)

一测试,SyntaxError!恍然大悟,回去再把逗号删掉。

假如是新增一个参数呢,问题也类似,你得留心给上一个参数补上逗号;调整参数的顺序(Sublime 用 Ctrl + Command + ↑↓)也类似。除了形参,函数调用时传入的实参也一个道理。

如果每个参数尾部都已经加上了逗号,那么就不存在上面说的这些问题了。

优点2:对 git/hg blame 更友好

我专门用 git 生成了一个演示用的仓库,里面有一个演示文件 test.js:

我现在想知道 param3 和对应的 arg3 是谁在哪个 commit 里加上去,所以我会执行 git blame test.js:

git blame 告诉我,是小李在 11e537fc 这次 commit 里加的。但当你查看那个 commit 的变更时,就会发现,错了,小李只是在实现 param4 时迫于无奈给 param3 补了个逗号,完整的 git log -p test.js 才能看到真相,真正实现 param3 的是小张,而且同时也能发现,小张在实现 param3 的时候也被迫改动了 param2 那一行:

如果每一行参数尾部都有逗号,那么开发人员就不需要修改和本次 commit 无关的行,从而就不会污染 git/hg blame。

参数分行写有什么优点?

有些同学就问了:“这提案对我没用啊,我所有的参数都是写在一行里的”。的确,如果你从不把参数分行写,那你压根用不上这个特性。不过,参数分行写的确是有用的:

优点1:能避免行过长

如果参数太多,或者某个实参是个长字符串,那么参数写在一行就会让编辑器出现横向滚动条,既不美观,也不好读。

优点2:对 git/hg blame 更友好

就像前面演示的,如果你所有的参数都写在一行里,你就无法 blame 到每个参数被添加的 commit。有些同学怀疑了?真的有人这么写吗?是真的,我电脑上刚好有个 V8 的仓库,我们用下面的 grep 命令查找一下:

grep -zoPR --include='*.js' 'function \w+\(\n([\s\w]+,(.+)?\n)+[\s\w]+\)'

果然找到了一个:

git blame 一下呢:

每个参数的 commit 都能方便的拿到!这在多人合作的开源项目里很重要。

优点3:避免分支冲突

显而易见,两个分支同时在一行上添加新的参数,必然会产生冲突。

优点4:方便加注释

如果你需要为每个参数添加注释,除了分行写还有什么选择吗?同样在 V8 的仓库里 grep 到了真实案例,是给每个实参加了注释:

上面说的这些对对象字面量和数组字面量也同样适用吧?

对,上面说的加逗号的优点和分行的优点对 {} 和 [] 同样适用,{} 是在 ES5 里支持尾部加逗号的,[] 从诞生时就支持,因为它需要支持稀疏数组,比如 [1,,,]。

JSON 呢?

“什么时候 json 规范能改,不统一掉很难受啊?” 是啊,我也想,但我也不知道什么时候能改。

能进 ES 几?

ES8(2017)还是 ES9(2018)?不要再 care 了,现在是先有实现后进规范,就像 Chrome 的版本号一样,随它涨去吧。目前 Spidermonkey 和 V8 还没开始实现,我已经给 V8 提了需求 https://bugs.chromium.org/p/v8/issues/detail?id=5051

几个语法限制

下面这些都是 SyntaxError:

function foo(,){} // 没参数只有个逗号
function foo(param1,,){} // 连续的两个逗号
function foo(param1,...rest,){} // 剩余参数后面还有逗号,因为剩余参数必须是最后一个参数

esnext:最后一个参数后面也允许加逗号了的更多相关文章

  1. 为什么只有一个元素的tuple要加逗号?

    如果要定义一个空的tuple,可以写成(): >>> t = () >>> t () 但是,要定义一个只有1个元素的tuple,如果你这么定义: >>& ...

  2. php json_decode() 如果想要强制生成PHP关联数组,json_decode()需要加一个参数true

    php json_decode()该函数用于将json文本转换为相应的PHP数据结构.下面是一个例子:$json = '{"foo": 12345}';$obj = json_de ...

  3. 解决父类加载iframe,src参数过大导致加载失败

    原文:解决父类加载iframe,src参数过大导致加载失败 <iframe src="*******.do?param=****" id="leftFrame&qu ...

  4. 预编译那些事#define后面只跟一个“参数”

    一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条件时对一组语句进行编译,而当条 ...

  5. SDWebImage使用——一个可管理远程图片加载的类库

    SDWebImage使用——一个可管理远程图片加载的类库     SDWebImage使用——一个可管理远程图片加载的类库 SDWebImage托管在github上.https://github.co ...

  6. 一个简单的AMD模块加载器

    一个简单的AMD模块加载器 参考 https://github.com/JsAaron/NodeJs-Demo/tree/master/require PS Aaron大大的比我的完整 PS 这不是一 ...

  7. IE push方法,最后一个参数后面不能跟",",否则报语法错误

    var columns = [[]]; columns[0].push( { field: 'ADDNAME', title: '添加人', width: 80, }, { field: 'ADDDT ...

  8. 源码学习:一个express().get方法的加载与调用

    刚刚接触express,它的中间件确实把我搞得头晕.get的回调中要不要加next?不加载还会执行下一个中间件么?给get指定'/'路径是不是所有以'/'开头的访问在没有确切匹配时都能执行?use件又 ...

  9. 为PartialView传递一个参数

    看这篇之前,得先了解这个<在MVC应用程序中动态加载PartialView>http://www.cnblogs.com/insus/p/3547985.html. 因为是从这篇重构而来. ...

随机推荐

  1. eclipse svn账号更换

    在eclipse下用 svn的时候,我们习惯将用户名和密码保存.前天公司将svn的账号全部更换了,这时原来的eclipse保存的svn账号密码就失效了.那怎么样才能切换账号了,eclipse svn插 ...

  2. Vsphere初试——基本安装

    现有工具: 一台Dell PowerEdge R820服务器 VMware-VMvisor-Installer-5.5.0.update01-1623387.x86_64(ESXi).iso VMwa ...

  3. [django]表格的添加与删除实例(可以借鉴参考)

    自己并未采用任何表格插件,参考网上例子,自己编写出来的django网页实例,请各位参考! 首先看图做事,表格布局采用bootstrap,俗话说bootstrap橹多了就会css了,呵呵,下面看图: 上 ...

  4. Spring基础[IOC/DI、AOP]

    一.Spring作用:管理项目中各种业务Bean(service类.Dao类.Action类),实例化类,属性赋值 二.Spring IOC(Inversion of Control )控制反转,也被 ...

  5. [No000078]Python3 字符串操作

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- '''Python 字符串操作 string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分 ...

  6. php 时间加减

    <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d",time() ...

  7. ajax实现下拉菜单无刷新加载更多

    $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; va ...

  8. usb驱动开发之大结局

    从usb总线的那个match函数usb_device_match()开始到现在,遇到了设备,遇到了设备驱动,遇到了接口,也遇到了接口驱动,期间还多次遇到usb_device_match(),又多次与它 ...

  9. JAVA IDE IntelliJ IDEA使用简介(一)—之界面元素

    (注:简介基于IDEA的版本为:11.0,下载地址:http://www.jetbrains.com/idea/) 打开IDEA,(当第一次打开的时候出现的是一个欢迎页面,随便创建一个project来 ...

  10. 老生长谈:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...