前言
在前端开发的过程中，我们经常需要写一些对象、数组的字面量。在 ECMAScript 规范中，这些字面量的最后一个元素或属性后面的逗号是可选的，也就是说可以有或没有。而从 ECMAScript 2017 开始，规范新增了 trailing commas（尾逗号）这个特性，即在字面量的最后一个元素或属性后面允许有一个额外的逗号。这篇文章将介绍这个新特性的具体内容以及使用方法。
什么是 trailing commas？
在 JavaScript 中，逗号经常用来分隔不同的元素，如数组中的各项、对象中的属性等。在以前的规范中，如果在一个数组或对象字面量中最后一个元素或属性后面添加一个逗号，则会被视为语法错误，如下所示：
const arr = [1, 2, 3,]; // Uncaught SyntaxError: Unexpected token ','
const obj = { x: 1, y: 2, }; // Uncaught SyntaxError: Unexpected token ','但是从 ECMAScript 2017 开始，这种写法已经合法了，即允许在数组或对象字面量的最后一个元素或属性后添加一个逗号，如下所示：
const arr = [1, 2, 3,]; // no error
const obj = { x: 1, y: 2, }; // no error这种在字面量的最后一个元素或属性后添加逗号的形式称为 trailing commas，或者叫尾逗号。
为什么要使用 trailing commas？
使用 trailing commas 的主要目的是为了方便后续的修改和维护。因为在 JavaScript 开发中，我们经常需要修改、添加和删除数组或对象字面量的元素或属性，而如果该字面量的最后一个元素或属性后面有逗号，这时我们就可以直接在最后添加新的元素或属性，而无需考虑前面的元素或属性是否有逗号。这极大地提高了代码的可读性和可维护性。
另外，使用 trailing commas 还有助于避免一些由于逗号导致的错误，如下所示：
-- -------------------- ---- ------- ----- --- - - -- -- - -- ------------------------ -- - ----- ---- - - -- -- -- -- ------------------------- -- -
在上面的代码中，由于 arr2 声明时使用了 trailing commas，所以在打印其 length 属性时，会输出正确结果 3，而如果不使用 trailing commas，如 arr，则会输出错误结果 4。
如何使用 trailing commas？
在实际开发中，我们可以根据需要在数组或对象字面量的最后一个元素或属性后添加逗号。在对象字面量中使用 trailing commas 需要注意，如果该属性是最后一个属性，则无需添加逗号，否则就需要添加逗号，如下所示：
const obj = {
x: 1,
y: 2, // trailing comma
};值得注意的是，使用 trailing commas 在 ES5 中会有兼容性问题，因此需要通过对代码进行编译或者使用一些特定的插件来解决。
示例代码
下面是一组示例代码，用来演示使用 trailing commas 的效果：
-- -------------------- ---- ------- -- ----- ----- ---- - --- -- ---- -- -------- ----- ----- ---- - - ------ ------ ------ -- -------- ----- -- -- ----- ----- ---- - - -- -- -- -- -- -------- ----- -- ----- ---- - - -- ------ -- ------ -- ------ -- -------- ----- --
结论
ECMAScript 2017 新特性：trailing commas，允许在数组或对象字面量的最后一个元素或属性后添加一个额外的逗号。使用该特性可以提高代码的可读性和可维护性，同时避免一些由于逗号导致的错误。在实际开发中，我们可以根据需要在数组或对象字面量的最后一个元素或属性后添加逗号。但是需要注意的是，在 ES5 中使用 trailing commas 会有兼容性问题，因此需要通过对代码进行编译或者使用一些特定的插件来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67514f108bd460d3ad884dd8