尾随逗号

¥Description

只要接受逗号分隔的值列表，JavaScript 就允许使用尾随逗号，并且在最后一项之后可能会出现更多值。这包括：

¥JavaScript allows trailing commas wherever a comma-separated list of values is accepted and more values may be expected after the last item. This includes:

• 数组文字
• 对象字面量
• 参数定义
• 函数调用
• 命名导入
• 命名导出
• 数组和对象解构

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

¥In all these cases, the trailing comma is entirely optional and doesn't change the program's semantics in any way.

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

¥It is particular useful when adding, removing, or reordering items in a list that spans multiple lines, because it reduces the number of lines that need to be changed, which helps with both editing and reviewing the diff.

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

¥Examples

¥Trailing commas in literals

数组

¥Arrays

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

¥JavaScript ignores trailing commas in arrays literals:

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

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

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

¥If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped. Sparse arrays are generally unfavorable, so you should avoid having multiple trailing commas.

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

对象

¥Objects

对象字面量中的尾随逗号也是合法的：

¥Trailing commas in object literals are legal as well:

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

¥Trailing commas in functions

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

¥Trailing commas are also allowed in function parameter lists.

参数定义

¥Parameter definitions

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

¥The following function definition pairs are legal and equivalent to each other. Trailing commas don't affect the length property of function declarations or their arguments object.

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

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

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

¥The trailing comma also works with method definitions for classes or objects:

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

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

函数调用

¥Function calls

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

¥The following function invocation pairs are legal and equivalent to each other.

f(p);
f(p,);

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

非法尾随逗号

¥Illegal trailing commas

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

¥Function parameter definitions or function invocations only containing a comma will throw a SyntaxError. Furthermore, when using rest parameters, trailing commas are not allowed:

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 ','

¥Trailing commas in destructuring

使用 解构赋值 时，左侧也允许有尾随逗号：

¥A trailing comma is also allowed on the left-hand side when using destructuring assignment:

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

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

同样，当使用剩余元素时，将抛出 SyntaxError：

¥Again, when using a rest element, a SyntaxError will be thrown:

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

¥Trailing commas in JSON

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

¥As JSON is based on a very restricted subset of JavaScript syntax, trailing commas are not allowed in JSON.

这两行都会抛出 SyntaxError：

¥Both lines will throw a SyntaxError:

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：

¥Omit the trailing commas to parse the JSON correctly:

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

¥Trailing commas in named imports and named exports

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

¥Trailing commas are valid in named imports and named exports.

命名导入

¥Named imports

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

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

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

命名导出

¥Named exports

export {
  A,
  B,
  C,
};

export { A, B, C, };

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

¥Quantifier prefix

注意：quantifier 中的尾随逗号实际上将其语义从匹配“恰好 n”更改为匹配“至少 n”。

¥Note: The trailing comma in a quantifier actually changes its semantics from matching "exactly n" to matching "at least n".

/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?/

¥See also

• 语法和类型 指南