Nachgestellte Kommata

JavaScript erlaubt nachgestellte Kommata überall dort, wo eine kommagetrennte Liste von Werten akzeptiert wird und mehr Werte nach dem letzten Element erwartet werden können. Dazu gehören:

• Array-Literale
• Objektliterale
• Parameterdefinitionen
• Funktionsaufrufe
• Benannte Importe
• Benannte Exporte
• Dynamischer Import
• Array- und Objekt-Destructuring

In all diesen Fällen ist das nachgestellte Komma völlig optional und ändert in keiner Weise die Semantik des Programms.

Es ist besonders nützlich beim Hinzufügen, Entfernen oder Neuordnen von Elementen in einer Liste, die sich über mehrere Zeilen erstreckt, da es die Anzahl der zu ändernden Zeilen reduziert, was sowohl das Bearbeiten als auch das Überprüfen des Diffs erleichtert.

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

Arrays

JavaScript ignoriert nachgestellte Kommata in Array-Literalen:

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

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

Wenn mehr als ein nachgestelltes Komma verwendet wird, wird eine Elision (oder Lücke) erzeugt. Ein Array mit Lücken wird als spärlich bezeichnet (ein dichtes Array hat keine Lücken). Beim Iterieren von Arrays, zum Beispiel mit Array.prototype.forEach() oder Array.prototype.map(), werden Array-Lücken übersprungen. Spärliche Arrays sind im Allgemeinen ungünstig, daher sollten Sie vermeiden, mehrere nachgestellte Kommata zu haben.

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

Objekte

Nachgestellte Kommata in Objektliteralen sind ebenfalls zulässig:

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

Nachgestellte Kommata sind auch in Funktionsparameterlisten erlaubt.

Parameterdefinitionen

Die folgenden Funktionsdefinitionen sind rechtlich und gleichwertig zueinander. Nachgestellte Kommata beeinflussen nicht die Eigenschaft length von Funktionsdeklarationen oder deren arguments-Objekt.

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

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

Das nachgestellte Komma funktioniert auch mit Methodendefinitionen für Klassen oder Objekte:

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

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

Funktionsaufrufe

Die folgenden Funktionsaufrufe sind rechtlich und gleichwertig zueinander.

f(p);
f(p,);

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

Ungültige nachgestellte Kommata

Funktionsparameterdefinitionen oder Funktionsaufrufe, die nur ein Komma enthalten, werfen einen SyntaxError. Außerdem sind bei Verwendung von Rest-Parametern keine nachgestellten Kommata erlaubt:

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

Ein nachgestelltes Komma ist auch auf der linken Seite erlaubt, wenn die Destructuring-Zuweisung verwendet wird:

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

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

Auch hier wird bei Verwendung eines Rest-Elements ein SyntaxError ausgelöst:

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

Da JSON auf einer sehr eingeschränkten Untermenge der JavaScript-Syntax basiert, sind nachgestellte Kommata in JSON nicht erlaubt.

Beide Zeilen werfen ein 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

Lassen Sie die nachgestellten Kommata weg, um das JSON korrekt zu parsen:

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

Nachgestellte Kommata sind in benannten Importen und benannten Exporten zulässig.

Benannte Importe

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

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

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

Benannte Exporte

export {
  A,
  B,
  C,
};

export { A, B, C, };

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

Nachgestellte Kommata sind nur bei dynamischen Importen erlaubt, wenn die Laufzeit auch den zweiten options-Parameter implementiert.

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

• Grammatik und Typen Leitfaden