Enums in Javascript mit ES6

Ich baue ein altes Java-Projekt in Javascript neu auf und habe festgestellt, dass es keine gute Möglichkeit gibt, Enumerationen in JS durchzuführen.

Das Beste was mir einfällt ist:

const Colors = {
    RED: Symbol("red"),
    BLUE: Symbol("blue"),
    GREEN: Symbol("green")
};
Object.freeze(Colors);

Das const hält Colors nicht neu zugewiesen werden, und das Einfrieren verhindert, dass die Schlüssel und Werte verändert werden. Ich verwende dafür Symbole Colors.RED ist ungleich zu 0oder irgendetwas anderes außer sich.

Gibt es ein Problem mit dieser Formulierung? Gibt es einen besseren Weg?

(Ich weiß, dass diese Frage ein bisschen wiederholt wird, aber alle vorherigen Fragen und Antworten sind ziemlich alt, und ES6 gibt uns einige neue Möglichkeiten.)

BEARBEITEN:

Eine andere Lösung, die sich mit dem Serialisierungsproblem befasst, aber meiner Meinung nach immer noch Bereichsprobleme hat:

const enumValue = (name) => Object.freeze({toString: () => name});

const Colors = Object.freeze({
    RED: enumValue("Colors.RED"),
    BLUE: enumValue("Colors.BLUE"),
    GREEN: enumValue("Colors.GREEN")
});

Durch die Verwendung von Objektreferenzen als Werte erhalten Sie die gleiche Kollisionsvermeidung wie bei Symbolen.

Gibt es ein Problem mit dieser Formulierung?

Ich sehe keine.

Gibt es einen besseren Weg?

Ich würde die beiden Aussagen zu einer zusammenfassen:

const Colors = Object.freeze({
    RED:   Symbol("red"),
    BLUE:  Symbol("blue"),
    GREEN: Symbol("green")
});

Wenn Sie die Boilerplate nicht mögen, mögen Sie die Wiederholung Symbol Aufrufe können Sie natürlich auch eine Hilfsfunktion schreiben makeEnum die dasselbe aus einer Liste von Namen erstellt.

Während der Verwendung Symbol Da der Enum-Wert für einfache Anwendungsfälle gut funktioniert, kann es praktisch sein, Enumerationen Eigenschaften zuzuweisen. Dies kann mit einem erfolgen Object als Aufzählungswert, der die Eigenschaften enthält.

Zum Beispiel können wir jedem der geben Colors Name und Hex-Wert:

/**
 * Enum for common colors.
 * @readonly
 * @enum {{name: string, hex: string}}
 */
const Colors = Object.freeze({
  RED:   { name: "red", hex: "#f00" },
  BLUE:  { name: "blue", hex: "#00f" },
  GREEN: { name: "green", hex: "#0f0" }
});

Das Einschließen von Eigenschaften in die Aufzählung vermeidet das Schreiben switch -Anweisungen (und möglicherweise neue Fälle in den switch-Anweisungen vergessen, wenn eine Aufzählung erweitert wird). Das Beispiel zeigt auch die mit dokumentierten Aufzählungseigenschaften und -typen JSDoc-Enum-Anmerkung.

Gleichstellung funktioniert wie erwartet mit Colors.RED === Colors.RED Sein trueund Colors.RED === Colors.BLUE Sein false.

Das ist mein persönlicher Ansatz.

class ColorType {
    static get RED () {
        return "red";
    }

    static get GREEN () {
        return "green";
    }

    static get BLUE () {
        return "blue";
    }
}

// Use case.
const color = Color.create(ColorType.RED);

Wie oben erwähnt, könnte man auch a schreiben makeEnum() Hilfsfunktion:

function makeEnum(arr){
    let obj = {};
    for (let val of arr){
        obj[val] = Symbol(val);
    }
    return Object.freeze(obj);
}

Verwenden Sie es wie folgt:

const Colors = makeEnum(["red","green","blue"]);
let startColor = Colors.red; 
console.log(startColor); // Symbol(red)

if(startColor == Colors.red){
    console.log("Do red things");
}else{
    console.log("Do non-red things");
}

Wenn Sie nicht brauchen rein ES6 und kann Typescript verwenden, es hat eine nette enum:

https://www.typescriptlang.org/docs/handbook/enums.html

Aktualisierung 11.05.2020:

Geändert, um statische Felder und Methoden einzuschließen, um das “echte” Enum-Verhalten näher zu replizieren.

Wenn Sie eine Aktualisierung planen, würde ich empfehlen, zu versuchen, eine sogenannte “Enum-Klasse” zu verwenden (mit Ausnahme von Browser- oder Laufzeitumgebungsbeschränkungen, die Sie nicht akzeptieren können). Es ist im Grunde ein sehr einfach und saubere Klasse, die private Felder und eingeschränkte Accessoren verwendet, um das Verhalten einer Aufzählung zu simulieren. Dies mache ich manchmal in C#, wenn ich mehr Funktionalität in eine Aufzählung einbauen möchte.

Mir ist klar, dass private Klassenfelder zu diesem Zeitpunkt noch experimentell sind, aber es scheint zu funktionieren, um eine Klasse mit unveränderlichen Feldern/Eigenschaften zu erstellen. Die Browserunterstützung ist ebenfalls anständig. Die einzigen “großen” Browser, die es nicht unterstützen, sind Firefox (was sie sicher bald tun werden) und IE (wen interessiert das).

HAFTUNGSAUSSCHLUSS:
Ich bin kein Entwickler. Ich habe dies nur zusammengestellt, um die Einschränkungen nicht vorhandener Aufzählungen in JS zu lösen, als ich an einem persönlichen Projekt arbeitete.

Beispielklasse

class Colors {
    // Private Fields
    static #_RED = 0;
    static #_GREEN = 1;
    static #_BLUE = 2;

    // Accessors for "get" functions only (no "set" functions)
    static get RED() { return this.#_RED; }
    static get GREEN() { return this.#_GREEN; }
    static get BLUE() { return this.#_BLUE; }
}

Sie sollten Ihre Enums jetzt direkt aufrufen können.

Colors.RED; // 0
Colors.GREEN; // 1
Colors.BLUE; // 2

Die Kombination aus privaten Feldern und eingeschränkten Accessoren bedeutet, dass die vorhandenen Enum-Werte gut geschützt sind (sie sind jetzt im Wesentlichen Konstanten).

Colors.RED = 10 // Colors.RED is still 0
Colors._RED = 10 // Colors.RED is still 0
Colors.#_RED = 10 // Colors.RED is still 0

Prüfen wie TypeScript es macht. Grundsätzlich machen sie folgendes:

const MAP = {};

MAP[MAP[1] = 'A'] = 1;
MAP[MAP[2] = 'B'] = 2;

MAP['A'] // 1
MAP[1] // A

Verwenden Sie Symbole, frieren Sie Objekte ein, was immer Sie wollen.