[javascript] ES6을 사용하는 Javascript의 열거 형

Javascript에서 오래된 Java 프로젝트를 다시 작성 중이며 JS에서 열거 형을 수행하는 좋은 방법이 없다는 것을 깨달았습니다.

내가 생각해 낼 수있는 최선은 다음과 같습니다.

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

const계속 Colors재 할당되는 것을, 그리고이 키와 값을 돌연변이 방지 동결. 나는 Symbols를 사용하여 Colors.RED같지 않기 때문에 0또는 자체 이외의 다른 것을 사용 하지 않습니다 .

이 제제에 문제가 있습니까? 더 좋은 방법이 있습니까?


(이 질문은 약간의 반복이지만, 이전의 모든 Q / A 는 상당히 오래되었으며 ES6는 새로운 기능을 제공합니다.)


편집하다:

직렬화 문제를 다루는 다른 솔루션이지만 여전히 영역 문제가 있다고 생각합니다.

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

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

객체 참조를 값으로 사용하면 기호와 동일한 충돌 방지를 얻을 수 있습니다.



답변

이 제제에 문제가 있습니까?

나는 보이지 않는다.

더 좋은 방법이 있습니까?

두 문장을 하나로 축소했습니다.

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

반복 Symbol호출 과 같이 상용구가 마음에 들지 않으면 makeEnum이름 목록에서 동일한 것을 만드는 도우미 함수 를 작성할 수도 있습니다.


답변

사용하는 동안 Symbol간단한 유스 케이스에는 열거 형 값으로 하는 것이 좋지만 열거 형에 속성을 제공하는 것이 편리 할 수 ​​있습니다. 이 Object속성을 포함하는 열거 형 값으로 를 사용하여 수행 할 수 있습니다 .

예를 들어 각각의 Colors이름과 16 진수 값 을 지정할 수 있습니다 .

/**
 * 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" }
});

열거 형에 속성을 포함하면 switch명령문을 작성할 필요가 없으며 열거 형이 확장 될 때 switch 명령문에 대한 새로운 사례를 잊어 버릴 수 있습니다. 이 예제는 JSDoc 열거 형 주석으로 문서화 된 열거 형 속성 및 유형도 보여줍니다. .

평등은 Colors.RED === Colors.RED존재 true하고 Colors.RED === Colors.BLUE존재 하면서 예상대로 작동합니다 false.


답변

위에서 언급했듯이 makeEnum()도우미 함수를 작성할 수도 있습니다 .

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

다음과 같이 사용하십시오.

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");
}


답변

이것은 나의 개인적인 접근이다.

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);


답변

TypeScript가 어떻게 작동하는지 확인하십시오 . 기본적으로 그들은 다음을 수행합니다.

const MAP = {};

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

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

기호를 사용하고 원하는대로 물체를 고정하십시오.


답변

순수한 ES6이 필요하지 않고 Typescript를 사용할 수 있다면 좋은 기능이 있습니다 enum.

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


답변

ES6 열거 형을위한 매우 훌륭하고 기능이 뛰어난 라이브러리 인 Enumify 를 확인할 수 있습니다 .