在前端开发中，我们经常会使用 JavaScript 进行编写。而 ECMAScript 2017（ES8）是 JavaScript 的一项技术规范，其中包含了一些新的语法特性，如 Trailing Commas，它可以帮助我们更高效地编写代码。
什么是 Trailing Commas？
Trailing Commas 是指在对象和数组最后一个元素后面允许存在一个逗号。这种写法并不会影响代码的执行结果，但却可以使我们更方便地添加、删除和移动元素。
在 ES8 之前，对于对象或数组的最后一个元素添加逗号是非法的，会导致语法错误。而在 ES8 中，使得这种写法合法化， 这意味着您不必担心在删除或添加元素时忘记或不小心添加或删除最后一个逗号所导致的错误。
如何使用 Trailing Commas？
在编写对象或数组的字面量时，只需要在最后一个元素后面添加逗号即可。以下是一些示例代码：
-- -------------------- ---- ------- -- -- ----- ------ - --------- --------- ----------- -- -- ----- ------ - - ----- ----- ---- --- ------- ------- --
可以看到，在上述示例代码中，在数组和对象的最后一个元素后均添加了一个逗号，这是合法的，而不会导致语法错误。
为什么使用 Trailing Commas？
代码维护更容易
当您需要添加、删除或移动一个数组或对象的元素时，如果最后一个元素后面有逗号，则可以减少修改代码时的出错概率。因此，使用 Trailing Commas 可以使代码的维护更加容易。
// 添加一种新水果 const fruits = ['apple', 'banana', 'orange', 'melon',]; // 删除最后一种水果 fruits.pop(); // 将 "orange" 移到第二个位置 fruits.splice(1, 0, 'orange');
在上述示例代码中，我们可以快速地添加、删除和移动元素，而无需担心逗号是否添加正确。
减少 Git 的 diff
由于 Trailing Commas 的存在，当您添加或删除一个元素时，只有最后一个元素后又有或没有逗号的差异。这将显著减少 Git 的 diff ，尤其是当您更改大的对象或数组时。
例如，在以下示例代码中，如果您需要将 email 从对象 person 中删除，则您只需要删除该行并去掉最后一个逗号即可。这将仅产生一个简单的 diff，而无需显示所有的内容。
const person = {
name: '张三',
age: 25,
gender: 'male',
email: 'zhangsan@example.com',
};更好的代码风格
有些开发者喜欢在数组或对象后添加逗号，因为这样做可以使代码看起来更清晰、整洁。当您遵循同样的格式时，代码的风格也将更加一致和统一。
注意事项
当使用 Trailing Commas 时，请注意以下几点：
- 不要忘记保留最后一个逗号。
- 当您不确定是否可以在特定上下文中使用 Trailing Commas 时，请查看相应的规范和文档。
总结
通过使用 ECMAScript 2017 中的 Trailing Commas 语法，我们可以更简单地编写可维护的代码、减少 Git 的 diff 和提高一致性。当然，在使用时仍需注意逗号的位置和规
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bc55c95b1f8cacd363fca