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