在 ECMAScript 2017 中，新加入了一项特性：Trailing Commas。这项特性给前端开发带来了极大的便利，让开发更加灵活、高效。本篇文章将带你深入了解这项特性的使用方法，以及在实际开发中的应用。
Trailing Commas 是什么？
Trailing Commas 翻译过来是“尾随逗号”，也可以称为“末尾逗号”。顾名思义，它是指在对象、数组、函数的参数列表、函数的形参列表、函数的返回值列表中，在最后一个元素后面位置可以出现逗号，而这个逗号会被 JavaScript 引擎忽略掉。
比如下面这个数组就使用了 Trailing Commas：
----- --- - --- -- ----
多出来的逗号在实际使用时是无意义的，但是这个特性可以让我们在修改代码时更加方便，因为在添加或删除一个元素时，我们不用担心是否要加上或删除逗号：以前我们需要在倒数第二个元素之后判断是否要加逗号，而 Trailing Commas 会自动忽略掉这个逗号，所以不用担心这个逗号会对代码的执行造成影响。
如何使用 Trailing Commas？
在对象、数组、函数的参数列表中使用 Trailing Commas 非常简单，只需要在最后一个元素后面加上一个逗号即可。
对象
----- --- - - ----- -------- ---- --- --
数组
----- --- - --- -- ----
函数的参数列表
-------- --------------- - ------------------- ----------- -
函数的形参列表
----- ------- - ----- ----- -- - ----- ---- - ----- -------------- ------ ----- -
函数的返回值列表
-------- ------ --- - ------ - - -- -
需要注意的是，Trailing Commas 的使用对空元素有所不同。在数组、对象的定义中，如果想在中间插入一个空项，则必须使用两个逗号，否则会被视为省略最后一项。
----- --- - --- --- ----- ----- --- - - ----- -------- ---- --- -- ---- --------- --
Trailing Commas 在实际开发中的应用
Trailing Commas 的最大作用是简化代码维护和修改的难度。使用 Trailing Commas 的好处在于，在修改对象或函数参数等列表元素数量时，不需要考虑逗号的问题，同时也避免了由于漏加或多加逗号导致的语法错误。
在 React 中，使用 Trailing Commas 很容易保持修改 Git Diff 时，保持格式的一致性，使代码库更加易读易用。比如下面这个示例：
----- ------ - - - ----- ---------- ----------- --------- -- - ----- ----------- ----------- --------- -- - ----- ----- ------ ----------- -------- -- --
在添加或删除一条记录时，只需要在倒数第二行加上一个逗号，而不用考虑最后一条记录是否需要加上逗号。
另外，工具（例如 Prettier）也可以根据设置自动加上 Trailing Commas 以美化代码格式。
总结
本篇文章详细介绍了 ECMAScript 2017 中的 Trailing Commas 特性，重点讲述了如何使用和实际应用场景。在开发中，我们一定要善于使用这些便捷、高效的特性，以提高代码的可读性和维护性，并且要不断更新自己的技术视野，把握住时代的机遇。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64830ebd48841e989426fb3e