在 JavaScript 的发展历程中，ES8 引入了一种新的语法细节：Trailing Commas。它允许在对象、数组、函数参数等复合结构的尾部添加一个逗号，即使这个逗号后面没有内容。这种语法细节看起来很微小，但是却有着重要的作用：可以提高代码的可读性和维护性。
为什么 Trailing Commas 可以提高可读性？
当我们在一个复合结构中添加新一项时，如果最后一项没有逗号，那么我们就需要修改最后一项的代码，添加逗号，再添加新的一项。这个过程非常麻烦，容易出现错误。而如果最后一项有逗号，我们只需要直接添加新的一项即可，非常简单和直接。
另外，Trailing Commas 可以避免因为拼写错误或者语法错误导致代码无法运行。比如下面这个例子：
const obj = {
name: 'Alice',
age: 18,
};如果我们忘记在 age 属性的结尾添加逗号，就会导致代码异常。而如果添加了逗号，即使结尾多了一个逗号也不会导致代码出现异常。
如何正确地使用 Trailing Commas？
在使用 Trailing Commas 时，需要遵循一些规则，以避免出现错误。
对象字面量
在对象字面量中，我们可以在最后一项的结尾添加逗号。但是不能在对象的结尾添加逗号。比如下面这个例子就是正确的：
const person = {
name: 'Bob',
age: 20,
};数组字面量
和对象字面量类似，我们可以在数组字面量中在最后一项的结尾添加逗号，但是不能在数组的结尾添加逗号。比如下面这个例子是正确的：
const arr = [1, 2, 3,];
函数参数
在函数参数中，我们可以在最后一个参数的结尾添加逗号。比如下面这个例子就是正确的：
function sum(a, b,) {
return a + b;
}一些注意事项
在使用 Trailing Commas 时，还需要注意一些细节：
- 在函数调用或者定义时不要使用 Trailing Commas，这会导致语法错误。
- 如果你的代码需要与旧的 JavaScript 引擎兼容，那就不要使用 Trailing Commas。不过现在大部分浏览器都支持 Trailing Commas 了。
示例代码
下面是一些使用 Trailing Commas 的示例代码：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- -- ----- --- - --- -- ---- -------- ------ --- - ------ - - -- -
以上代码中，我们都加了 Trailing Commas，这样方便了添加新的属性、元素和参数。代码更加简洁和易读。
总结
在使用 Trailing Commas 时，我们需要注意一些细节，以避免出现错误。但是如果使用得当，Trailing Commas 可以极大地提高代码的可读性和维护性。在日常开发中，我们应该充分发掘 Trailing Commas 的优点，写出更加简洁和易读的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f364e48841e9894ee37b6