尾随逗号

尾随逗号（有时称为“最终逗号”）在向 JavaScript 代码添加新元素、参数或属性时可能很有用。如果您想添加一个新属性，您可以在不修改先前最后一行的情况下添加一个新行，如果该行已经使用尾随逗号。这使得版本控制差异更清晰，编辑代码可能不那么麻烦。

从一开始，JavaScript 就允许在数组文字中使用尾随逗号。现在，尾随逗号也允许在对象文字、函数参数、命名导入、命名导出等中使用。

JSON 然而，不允许所有尾随逗号。

描述

JavaScript 允许在接受逗号分隔的值列表且在最后一个项目之后可能期望更多值的地方使用尾随逗号。这包括

在所有这些情况下，尾随逗号都是完全可选的，并且不会以任何方式改变程序的语义。

当在跨越多行的列表中添加、删除或重新排序项目时，它特别有用，因为它减少了需要更改的行数，这有助于编辑和查看差异。

差异
  [
    "foo",
+   "baz",
    "bar",
-   "baz",
  ]

示例

文字中的尾随逗号

数组

JavaScript 忽略数组文字中的尾随逗号

js
const arr = [
  1,
  2,
  3,
];

arr; // [1, 2, 3]
arr.length; // 3

如果使用多个尾随逗号，则会生成省略号（或空洞）。包含空洞的数组称为稀疏（密集数组没有空洞）。例如，当使用 Array.prototype.forEach() 或 Array.prototype.map() 迭代数组时，会跳过数组空洞。稀疏数组通常是不利的，因此您应该避免使用多个尾随逗号。

js
const arr = [1, 2, 3, , ,];
arr.length; // 5

对象

尾随逗号在对象文字中也是合法的

js
const object = {
  foo: "bar",
  baz: "qwerty",
  age: 42,
};

函数中的尾随逗号

尾随逗号也允许在函数参数列表中使用。

参数定义

以下函数定义对是合法的，并且彼此等效。尾随逗号不会影响函数声明的 length 属性或其 arguments 对象。

js
function f(p) {}
function f(p,) {}

(p) => {};
(p,) => {};

尾随逗号也适用于类或对象的 方法定义

js
class C {
  one(a,) {}
  two(a, b,) {}
}

const obj = {
  one(a,) {},
  two(a, b,) {},
};

函数调用

以下函数调用对是合法的，并且彼此等效。

js
f(p);
f(p,);

Math.max(10, 20);
Math.max(10, 20,);

不合法的尾随逗号

仅包含逗号的函数参数定义或函数调用将抛出 SyntaxError。此外，在使用 rest 参数 时，不允许使用尾随逗号

js
function f(,) {} // SyntaxError: missing formal parameter
(,) => {};       // SyntaxError: expected expression, got ','
f(,)             // SyntaxError: expected expression, got ','

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','

解构中的尾随逗号

在使用 解构赋值 时，尾随逗号也允许出现在左侧。

js
// array destructuring with trailing comma
[a, b,] = [1, 2];

// object destructuring with trailing comma
const o = {
  p: 42,
  q: true,
};
const { p, q, } = o;

同样，在使用 rest 元素时，将抛出 SyntaxError

js
const [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

JSON 中的尾随逗号

由于 JSON 基于 JavaScript 语法的非常有限的子集，因此JSON 中不允许使用尾随逗号。

这两行都将抛出 SyntaxError

js
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
// at line 1 column 14 of the JSON data

省略尾随逗号以正确解析 JSON

js
JSON.parse("[1, 2, 3, 4 ]");
JSON.parse('{"foo" : 1 }');

命名导入和命名导出中的尾随逗号

尾随逗号在 命名导入 和 命名导出 中是有效的。

命名导入

js
import {
  A,
  B,
  C,
} from "D";

import { X, Y, Z, } from "W";

import { A as B, C as D, E as F, } from "Z";

命名导出

js
export {
  A,
  B,
  C,
};

export { A, B, C, };

export { A as B, C as D, E as F, };

动态导入中的尾随逗号

尾随逗号仅在 动态导入 中允许，前提是运行时也实现了第二个 options 参数。

js
import("D",);
import(
  "D",
  { with: { type: "json" } },
);

量词前缀

注意： 量词中的尾随逗号实际上改变了它的语义，从匹配“正好 n 次”变为匹配“至少 n 次”。

js
/x{2}/; // Exactly 2 occurrences of "x"; equivalent to /xx/
/x{2,}/; // At least 2 occurrences of "x"; equivalent to /xx+/
/x{2,4}/; // 2 to 4 occurrences of "x"; equivalent to /xxx?x?/

规范

规范
ECMAScript 语言规范
# prod-Elision
ECMAScript 语言规范
# prod-ObjectLiteral
ECMAScript 语言规范
# prod-ArrayLiteral
ECMAScript 语言规范
# prod-Arguments
ECMAScript 语言规范
# prod-FormalParameters
ECMAScript 语言规范
# prod-CoverParenthesizedExpressionAndArrowParameterList
ECMAScript 语言规范
# prod-NamedImports
ECMAScript 语言规范
# prod-NamedExports
ECMAScript 语言规范
# prod-QuantifierPrefix
ECMAScript 语言规范
# prod-annexB-InvalidBracedQuantifier

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅