esnext:最后一个参数后面也允许加逗号了
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:最后一个参数后面也允许加逗号了的更多相关文章
- 为什么只有一个元素的tuple要加逗号?
如果要定义一个空的tuple,可以写成(): >>> t = () >>> t () 但是,要定义一个只有1个元素的tuple,如果你这么定义: >>& ...
- php json_decode() 如果想要强制生成PHP关联数组,json_decode()需要加一个参数true
php json_decode()该函数用于将json文本转换为相应的PHP数据结构.下面是一个例子:$json = '{"foo": 12345}';$obj = json_de ...
- 解决父类加载iframe,src参数过大导致加载失败
原文:解决父类加载iframe,src参数过大导致加载失败 <iframe src="*******.do?param=****" id="leftFrame&qu ...
- 预编译那些事#define后面只跟一个“参数”
一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条件时对一组语句进行编译,而当条 ...
- SDWebImage使用——一个可管理远程图片加载的类库
SDWebImage使用——一个可管理远程图片加载的类库 SDWebImage使用——一个可管理远程图片加载的类库 SDWebImage托管在github上.https://github.co ...
- 一个简单的AMD模块加载器
一个简单的AMD模块加载器 参考 https://github.com/JsAaron/NodeJs-Demo/tree/master/require PS Aaron大大的比我的完整 PS 这不是一 ...
- IE push方法,最后一个参数后面不能跟",",否则报语法错误
var columns = [[]]; columns[0].push( { field: 'ADDNAME', title: '添加人', width: 80, }, { field: 'ADDDT ...
- 源码学习:一个express().get方法的加载与调用
刚刚接触express,它的中间件确实把我搞得头晕.get的回调中要不要加next?不加载还会执行下一个中间件么?给get指定'/'路径是不是所有以'/'开头的访问在没有确切匹配时都能执行?use件又 ...
- 为PartialView传递一个参数
看这篇之前,得先了解这个<在MVC应用程序中动态加载PartialView>http://www.cnblogs.com/insus/p/3547985.html. 因为是从这篇重构而来. ...
随机推荐
- 关于linx中man命令内容中第一行数字的含义
我们知道linux中man这玩意特别厉害,我们要查么个命令的使用方法.如man ls 出现如下内容 关于这写数字的含义如下表格
- 【小白的CFD之旅】15 四种境界
天气不错,小白一大早就起床了,吃过早餐就往奔实验室而去.路上碰到了同去实验室的小牛师兄. "小白,这么早啊",小牛师兄老远就发现了小白,打招呼道. "早啊,牛师兄,刚吃完 ...
- MySQL命令行下执行.sql脚本详解
本文主要介绍一个在MySQL命令行下执行脚本文件的例子,通过这个例子让我们来了解一下在命令行下MySQL是怎样执行脚本的吧.现在我们开始介绍这一过程. 1.首先编写sql脚本,保存为的:book.sq ...
- Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...
- Microsoft-Office-Professional-Plus-2007
Microsoft-Office-Professional-Plus-2007password:(也有自带的)DP37G-8BBDM-9Y4BW-WT2K8-2WRMJ P64QH-V3F2K-RXY ...
- NOIP2010pj三国游戏[博弈论]
题目描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有 N 位武将(N为偶数且不小于 4),任意两个武将之 ...
- intel和AMD CPU性能对比(2016年CPU天梯图)组装电脑必读!
http://www.365pcbuy.com/article-411.html 特别提示:此文已经于2016年10月12日更新!内容变动较大,请细细品鉴! 如何为客户推荐高性价比机型是我站的重要工作 ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
- CSS背景图像位置属性background-position百分比详解
百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...
- knockoutJS学习笔记08:表单域绑定
前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...