Trailing commas

Mô tả

JavaScript cho phép trailing comma ở bất kỳ đâu danh sách giá trị được phân cách bằng dấu phẩy được chấp nhận và có thể có thêm giá trị sau item cuối cùng. Điều này bao gồm:

• Array literal
• Object literal
• Định nghĩa tham số
• Lời gọi hàm
• Named import
• Named export
• Dynamic import
• Array và object destructuring

Trong tất cả các trường hợp này, trailing comma hoàn toàn tùy chọn và không thay đổi ngữ nghĩa của chương trình theo bất kỳ cách nào.

Nó đặc biệt hữu ích khi thêm, xóa hoặc sắp xếp lại các item trong danh sách trải dài nhiều dòng, vì nó giảm số lượng dòng cần thay đổi, điều này giúp ích cho cả việc chỉnh sửa và xem xét diff.

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

Ví dụ

Trailing comma trong literal

Array

JavaScript bỏ qua trailing comma trong array literal:

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

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

Nếu nhiều hơn một trailing comma được dùng, sẽ có elision (hoặc hole). Một array có hole được gọi là sparse (array dense không có hole). Khi lặp qua array ví dụ bằng Array.prototype.forEach() hoặc Array.prototype.map(), array hole được bỏ qua. Sparse array thường không được ưa thích, vì vậy bạn nên tránh có nhiều trailing comma.

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

Object

Trailing comma trong object literal cũng hợp lệ:

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

Trailing comma trong hàm

Trailing comma cũng được cho phép trong danh sách tham số hàm.

Định nghĩa tham số

Các cặp định nghĩa hàm sau là hợp lệ và tương đương nhau. Trailing comma không ảnh hưởng đến thuộc tính length của khai báo hàm hoặc đối tượng arguments của chúng.

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

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

Trailing comma cũng hoạt động với định nghĩa phương thức cho lớp hoặc đối tượng:

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

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

Lời gọi hàm

Các cặp lời gọi hàm sau là hợp lệ và tương đương nhau.

f(p);
f(p,);

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

Trailing comma không hợp lệ

Định nghĩa tham số hàm hoặc lời gọi hàm chỉ chứa dấu phẩy sẽ ném SyntaxError. Ngoài ra, khi dùng rest parameter, trailing comma không được phép:

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 comma trong destructuring

Trailing comma cũng được phép trong destructuring pattern:

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

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

Tuy nhiên, trailing comma không được phép sau rest element, nếu có

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

Trailing comma trong JSON

Vì JSON dựa trên tập hợp cú pháp JavaScript rất hạn chế, trailing comma không được phép trong JSON.

Cả hai dòng này sẽ ném 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

Bỏ trailing comma để phân tích cú pháp JSON đúng:

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

Trailing comma trong named import và named export

Trailing comma hợp lệ trong named import và named export.

Named import

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 export

export {
  A,
  B,
  C,
};

export { A, B, C, };

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

Trailing comma trong dynamic import

Trailing comma chỉ được phép trong dynamic import nếu runtime cũng triển khai tham số options thứ hai.

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

Tiền tố quantifier

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

Specifications

Browser compatibility

See also

• Grammar and types guide