JavaScript에서 열거 형을 정의하기 위해 선호되는 구문은 무엇입니까?

JavaScript에서 열거 형을 정의하기 위해 선호되는 구문은 무엇입니까? 다음과 같은 것 :

my.namespace.ColorEnum = {
    RED : 0,
    GREEN : 1,
    BLUE : 2
}

// later on

if(currentColor == my.namespace.ColorEnum.RED) {
   // whatever
}

아니면 더 바람직한 관용구가 있습니까?



답변

1.8.5부터 객체를 밀봉하고 고정 할 수 있으므로 위와 같이 정의하십시오.

const DaysEnum = Object.freeze({"monday":1, "tuesday":2, "wednesday":3, ...})

또는

const DaysEnum = {"monday":1, "tuesday":2, "wednesday":3, ...}
Object.freeze(DaysEnum)

그리고 짜잔! JS 열거 형.

그러나 이것이 바람직하지 않은 값을 변수에 할당하는 것을 방해하지는 않습니다. 이는 종종 열거 형의 주요 목표입니다.

let day = DaysEnum.tuesday
day = 298832342 // goes through without any errors

열거 형 또는 기타 형식으로 강력한 형식 안전성을 보장하는 한 가지 방법은 TypeScript 또는 Flow 와 같은 도구를 사용하는 것 입니다.

출처

따옴표는 필요하지 않지만 일관성을 위해 유지했습니다.


답변

이것은 많은 대답이 아니지만 개인적으로 잘 작동한다고 말하고 싶습니다.

값이 무엇이든 상관없이 (0, 1, 2를 사용 했음) 현재 값을 출력하려는 ​​경우 의미있는 문자열을 사용합니다.


답변

최신 정보

모든 지지자들에게 감사하지만 아래 답변이 JavaScript로 열거 형을 작성하는 가장 좋은 방법이라고 생각하지 않습니다. 자세한 내용은 내 블로그 게시물을 참조하십시오. Enums in JavaScript .


이름을 알리는 것은 이미 가능합니다 :

if (currentColor == my.namespace.ColorEnum.RED) {
   // alert name of currentColor (RED: 0)
   var col = my.namespace.ColorEnum;
   for (var name in col) {
     if (col[name] == col.RED)
       alert(name);
   }
}

또는 값을 객체로 만들 수 있으므로 케이크를 먹고 먹을 수도 있습니다.

var SIZE = {
  SMALL : {value: 0, name: "Small", code: "S"},
  MEDIUM: {value: 1, name: "Medium", code: "M"},
  LARGE : {value: 2, name: "Large", code: "L"}
};

var currentSize = SIZE.MEDIUM;
if (currentSize == SIZE.MEDIUM) {
  // this alerts: "1: Medium"
  alert(currentSize.value + ": " + currentSize.name);
}

JavaScript에서는 동적 언어이므로 나중에 세트에 열거 형 값을 추가 할 수도 있습니다.

// Add EXTRALARGE size
SIZE.EXTRALARGE = {value: 3, name: "Extra Large", code: "XL"};

열거의 필드 (이 예에서는 값, 이름 및 코드)는 신원 확인에 필요하지 않으며 단지 편의를 위해서만 있습니다. 또한 size 속성 자체의 이름을 하드 코딩 할 필요는 없지만 동적으로 설정할 수도 있습니다. 따라서 새로운 열거 형 값의 이름 만 알고 있다고 가정하면 문제없이 계속 추가 할 수 있습니다.

// Add 'Extra Large' size, only knowing it's name
var name = "Extra Large";
SIZE[name] = {value: -1, name: name, code: "?"};

물론 이것은 더 이상 가정을 할 수 없다는 것을 의미합니다 (예 : 값이 올바른 순서를 나타냄)

JavaScript에서 객체는 map 또는 hash table과 같습니다 . 이름-값 쌍의 집합입니다. 미리 알지 못하고 반복하거나 조작 할 수 있습니다.

for (var sz in SIZE) {
  // sz will be the names of the objects in SIZE, so
  // 'SMALL', 'MEDIUM', 'LARGE', 'EXTRALARGE'
  var size = SIZE[sz]; // Get the object mapped to the name in sz
  for (var prop in size) {
    // Get all the properties of the size object, iterates over
    // 'value', 'name' and 'code'. You can inspect everything this way.        
  }
} 

당신이 네임 스페이스에 관심이 있다면 그건 그렇고, 당신은 자바 스크립트에 대한 간단하지만 강력한 네임 스페이스와 의존성 관리에 대한 내 솔루션 좀보고 할 수 있습니다 : 패키지 JS를


답변

결론 : 할 수 없습니다.

당신은 그것을 가짜 할 수 있지만 유형 안전을 얻지 못할 것입니다. 일반적으로 정수 값에 매핑 된 문자열 값의 간단한 사전을 만들어이 작업을 수행합니다. 예를 들면 다음과 같습니다.

var DaysEnum = {"monday":1, "tuesday":2, "wednesday":3, ...}

Document.Write("Enumerant: " + DaysEnum.tuesday);

이 접근법의 문제점? 실수로 열거자를 재정의하거나 실수로 중복 열거 값을 가질 수 있습니다. 예를 들면 다음과 같습니다.

DaysEnum.monday = 4; // whoops, monday is now thursday, too

편집하다

Artur Czajka의 Object.freeze는 어떻습니까? 월요일에 목요일로 설정하는 것을 방지하기 위해 노력하지 않습니까? – 프라이 쿼드

물론, Object.freeze내가 불평 한 문제를 완전히 고칠 것입니다. 위의 글을 쓸 때 Object.freeze실제로 존재하지 않았다는 것을 모두에게 상기시키고 싶습니다 .

자 .. 이제 매우 흥미로운 가능성이 열립니다 .

편집 2
다음은 열거 형을 만드는 데 유용한 라이브러리입니다.

http://www.2ality.com/2011/10/enums.html

아마도 모든 유효한 열거 형 사용에 맞지는 않지만 매우 먼 길을갑니다.


답변

우리 모두가 원하는 것은 다음과 같습니다.

function Enum(constantsList) {
    for (var i in constantsList) {
        this[constantsList[i]] = i;
    }
}

이제 열거 형을 만들 수 있습니다.

var YesNo = new Enum(['NO', 'YES']);
var Color = new Enum(['RED', 'GREEN', 'BLUE']);

이렇게하면 상수를 일반적인 방식으로 액세스 할 수 있으며 (예, 예, 색, 녹색) 순차적 int 값 (NO = 0, YES = 1; RED = 0, GREEN = 1, BLUE = 2)을 얻습니다.

Enum.prototype을 사용하여 메소드를 추가 할 수도 있습니다.

Enum.prototype.values = function() {
    return this.allValues;
    /* for the above to work, you'd need to do
            this.allValues = constantsList at the constructor */
};

varargs를 사용하여 편집-작은 개선-이제 불행히도 IE에서 제대로 작동하지 않습니다 : S … 이전 버전을 사용해야합니다)

function Enum() {
    for (var i in arguments) {
        this[arguments[i]] = i;
    }
}

var YesNo = new Enum('NO', 'YES');
var Color = new Enum('RED', 'GREEN', 'BLUE');


답변

대부분의 최신 브라우저 에는 열거 형을 만드는 데 사용할 수 있는 기호 기본 데이터 형식이 있습니다. JavaScript는 각 기호 값이 고유함을 보장하므로 열거 형의 형식 안전성을 보장합니다 Symbol() != Symbol(). 예를 들면 다음과 같습니다.

const COLOR = Object.freeze({RED: Symbol(), BLUE: Symbol()});

디버깅을 단순화하기 위해 열거 형 값에 설명을 추가 할 수 있습니다.

const COLOR = Object.freeze({RED: Symbol("RED"), BLUE: Symbol("BLUE")});

플 런커 데모

GitHub의 당신은 열거를 초기화하는 데 필요한 코드를 단순화하는 래퍼를 찾을 수 있습니다 :

const color = new Enum("RED", "BLUE")

color.RED.toString() // Symbol(RED)
color.getName(color.RED) // RED
color.size // 2
color.values() // Symbol(RED), Symbol(BLUE)
color.toString() // RED,BLUE


답변

????? ????????? ???????? ?????

파일 크기 문제를 바로 잡겠습니다. 여기에 나열된 다른 모든 답변은 코드를 극도로 부풀립니다. 최상의 성능, 코드의 가독성, 대규모 프로젝트 관리, 많은 코드 편집기의 구문 힌트 및 축소로 코드 크기를 줄이려면 열거를 수행하는 올바른 방법 인 밑줄 표기법 변수를 제시합니다.

v v w w

밑줄 표기법 변수

위의 차트와 아래 예제에서 알 수 있듯이 시작하기 쉬운 5 단계는 다음과 같습니다.

  1. 열거 그룹의 이름을 결정하십시오. 열거의 목적 또는 열거의 항목을 설명 할 수있는 명사를 생각해보십시오. 예를 들어, 사용자가 선택할 수있는 색상을 나타내는 열거 그룹은 COLORS보다 COLORCHOICES로 명명하는 것이 좋습니다.
  2. 그룹의 열거가 상호 배타적인지 독립적인지 결정하십시오. 상호 배타적 인 경우 열거 된 각 변수 이름을로 시작하십시오 ENUM_. 독립적이거나 나란히있는 경우을 사용하십시오 INDEX_.
  3. 각 항목에 대해 이름이 ENUM_또는로 시작 INDEX_하고 그룹 이름, 밑줄, 속성의 고유 한 이름을 갖는 새 로컬 변수를 작성 하십시오.
  4. 추가 ENUMLENGTH_, ENUMLEN_, INDEXLENGTH_, 또는 INDEXLEN_(여부 LEN_또는LENGTH_ 매우 끝에 개인적인 취향) 열거 변수를. 열거 형에 추가 항목을 추가하고이 값을 늘리면 코드가 손상되지 않도록 코드에서 가능한 한이 변수를 사용해야합니다.
  5. 말은 것을이 페이지에 대한 의견이 있습니다 0에서 시작하여, 마지막으로보다 각 연속 열거 변수에 값을 부여 0열거 값 때문으로 사용해서는 안 0 == null, 0 == false, 0 == "", 및 기타 JS 막무가내가. 나는이 문제를 피하고 동시에 성능을 향상시키기 위해 항상 (ex )를 제외하고는 코드에 나타나지 ===않도록 ==하십시오 . 을 사용하는 모든 해에 0을 열거 형 값으로 사용하는 데 문제가 없었습니다. 여전히 삐걱 거리면 많은 경우 성능 저하없이 열거 형의 열거 형이 아닌 열거 형 의 시작 값으로 사용할 수 있습니다 .typeoftypeof X == "string"===1ENUM_INDEX_
const ENUM_COLORENUM_RED   = 0;
const ENUM_COLORENUM_GREEN = 1;
const ENUM_COLORENUM_BLUE  = 2;
const ENUMLEN_COLORENUM    = 3;

// later on

if(currentColor === ENUM_COLORENUM_RED) {
   // whatever
}

여기에 사용할 때 내가 기억하는 방법입니다 INDEX_때 사용하는 방법과 ENUM_:

// Precondition: var arr = []; //
arr[INDEX_] = ENUM_;

그러나 ENUM_특정 상황에서 각 항목의 발생 횟수를 계산할 때와 같은 색인으로 적합 할 수 있습니다.

const ENUM_PET_CAT = 0,
      ENUM_PET_DOG = 1,
      ENUM_PET_RAT = 2,
      ENUMLEN_PET  = 3;

var favoritePets = [ENUM_PET_CAT, ENUM_PET_DOG, ENUM_PET_RAT,
                    ENUM_PET_DOG, ENUM_PET_DOG, ENUM_PET_CAT,
                    ENUM_PET_RAT, ENUM_PET_CAT, ENUM_PET_DOG];

var petsFrequency = [];

for (var i=0; i<ENUMLEN_PET; i=i+1|0)
  petsFrequency[i] = 0;

for (var i=0, len=favoritePets.length|0, petId=0; i<len; i=i+1|0)
  petsFrequency[petId = favoritePets[i]|0] = (petsFrequency[petId]|0) + 1|0;

console.log({
    "cat": petsFrequency[ENUM_PET_CAT],
    "dog": petsFrequency[ENUM_PET_DOG],
    "rat": petsFrequency[ENUM_PET_RAT]
});

위의 코드에서 새로운 종류의 애완 동물을 추가하는 것이 정말 쉽다는 것을 관찰하십시오. 다음에 새 항목을 추가해야합니다. ENUM_PET_RATENUMLEN_PET 그에 따라 업데이트하면 됩니다. 다른 열거 형 시스템에 새 항목을 추가하는 것이 더 어려울 수 있습니다.

Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww

?????? ????????? ????????? ???? ????????

또한이 열거 구문을 사용하면 아래와 같이 명확하고 간결한 클래스 확장이 가능합니다. 클래스를 확장하려면 LEN_상위 클래스 의 항목에 증분 숫자를 추가하십시오 . 그런 다음 서브 클래스를 자체 LEN_항목으로 완료 하여 나중에 서브 클래스를 더 확장 할 수 있도록하십시오.

추가 확장 다이어그램

(function(window){
    "use strict";
    var parseInt = window.parseInt;

    // use INDEX_ when representing the index in an array instance
    const INDEX_PIXELCOLOR_TYPE = 0, // is a ENUM_PIXELTYPE
          INDEXLEN_PIXELCOLOR   = 1,
          INDEX_SOLIDCOLOR_R    = INDEXLEN_PIXELCOLOR+0,
          INDEX_SOLIDCOLOR_G    = INDEXLEN_PIXELCOLOR+1,
          INDEX_SOLIDCOLOR_B    = INDEXLEN_PIXELCOLOR+2,
          INDEXLEN_SOLIDCOLOR   = INDEXLEN_PIXELCOLOR+3,
          INDEX_ALPHACOLOR_R    = INDEXLEN_PIXELCOLOR+0,
          INDEX_ALPHACOLOR_G    = INDEXLEN_PIXELCOLOR+1,
          INDEX_ALPHACOLOR_B    = INDEXLEN_PIXELCOLOR+2,
          INDEX_ALPHACOLOR_A    = INDEXLEN_PIXELCOLOR+3,
          INDEXLEN_ALPHACOLOR   = INDEXLEN_PIXELCOLOR+4,
    // use ENUM_ when representing a mutually-exclusive species or type
          ENUM_PIXELTYPE_SOLID = 0,
          ENUM_PIXELTYPE_ALPHA = 1,
          ENUM_PIXELTYPE_UNKNOWN = 2,
          ENUMLEN_PIXELTYPE    = 2;

    function parseHexColor(inputString) {
        var rawstr = inputString.trim().substring(1);
        var result = [];
        if (rawstr.length === 8) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_ALPHA;
            result[INDEX_ALPHACOLOR_R] = parseInt(rawstr.substring(0,2), 16);
            result[INDEX_ALPHACOLOR_G] = parseInt(rawstr.substring(2,4), 16);
            result[INDEX_ALPHACOLOR_B] = parseInt(rawstr.substring(4,6), 16);
            result[INDEX_ALPHACOLOR_A] = parseInt(rawstr.substring(4,6), 16);
        } else if (rawstr.length === 4) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_ALPHA;
            result[INDEX_ALPHACOLOR_R] = parseInt(rawstr[0], 16) * 0x11;
            result[INDEX_ALPHACOLOR_G] = parseInt(rawstr[1], 16) * 0x11;
            result[INDEX_ALPHACOLOR_B] = parseInt(rawstr[2], 16) * 0x11;
            result[INDEX_ALPHACOLOR_A] = parseInt(rawstr[3], 16) * 0x11;
        } else if (rawstr.length === 6) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_SOLID;
            result[INDEX_SOLIDCOLOR_R] = parseInt(rawstr.substring(0,2), 16);
            result[INDEX_SOLIDCOLOR_G] = parseInt(rawstr.substring(2,4), 16);
            result[INDEX_SOLIDCOLOR_B] = parseInt(rawstr.substring(4,6), 16);
        } else if (rawstr.length === 3) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_SOLID;
            result[INDEX_SOLIDCOLOR_R] = parseInt(rawstr[0], 16) * 0x11;
            result[INDEX_SOLIDCOLOR_G] = parseInt(rawstr[1], 16) * 0x11;
            result[INDEX_SOLIDCOLOR_B] = parseInt(rawstr[2], 16) * 0x11;
        } else {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_UNKNOWN;
        }
        return result;
    }

    // the red component of green
    console.log(parseHexColor("#0f0")[INDEX_SOLIDCOLOR_R]);
    // the alpha of transparent purple
    console.log(parseHexColor("#f0f7")[INDEX_ALPHACOLOR_A]);
    // the enumerated array for turquoise
    console.log(parseHexColor("#40E0D0"));
})(self);

(길이 : 2,450 바이트)

일부는 이것이 다른 솔루션보다 실용적이지 않다고 말할 수 있습니다. 허리 톤 공간, 쓰기에 오랜 시간이 걸리며 설탕 구문으로 코팅되지 않았습니다. 코드를 축소하지 않으면 사람들이 옳을 것입니다. 그러나 합리적인 사람은 최종 제품에 축소되지 않은 코드를 남길 수 없습니다. 이 축소를 위해 클로저 컴파일러는 아직 찾지 못했습니다. 온라인 액세스는 여기 에서 찾을 수 있습니다 . 클로저 컴파일러는이 열거 데이터를 모두 가져 와서 인라인 할 수있어 자바 스크립트를 매우 작게 만들고 빠르게 듀퍼를 실행할 수 있습니다. 따라서 폐쇄 컴파일러로 최소화하십시오. 관찰하십시오.

Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww

?????? ???? ??????? ????????

클로저 컴파일러는 다른 자바 스크립트 축소 기의 용량을 넘어서는 추론을 통해 매우 놀라운 최적화를 수행 할 수 있습니다. 클로저 컴파일러는 기본 변수를 고정 값으로 인라인 할 수 있습니다. Closure Compiler는 이러한 인라인 된 값을 기반으로 추론 할 수 있으며 if 문과 루프에서 사용되지 않는 블록을 제거 할 수 있습니다.

클로저 컴파일러를 통한 코드 연결

'use strict';(function(e){function d(a){a=a.trim().substring(1);var b=[];8===a.length?(b[0]=1,b[1]=c(a.substring(0,2),16),b[2]=c(a.substring(2,4),16),b[3]=c(a.substring(4,6),16),b[4]=c(a.substring(4,6),16)):4===a.length?(b[1]=17*c(a[0],16),b[2]=17*c(a[1],16),b[3]=17*c(a[2],16),b[4]=17*c(a[3],16)):6===a.length?(b[0]=0,b[1]=c(a.substring(0,2),16),b[2]=c(a.substring(2,4),16),b[3]=c(a.substring(4,6),16)):3===a.length?(b[0]=0,b[1]=17*c(a[0],16),b[2]=17*c(a[1],16),b[3]=17*c(a[2],16)):b[0]=2;return b}var c=
e.parseInt;console.log(d("#0f0")[1]);console.log(d("#f0f7")[4]);console.log(d("#40E0D0"))})(self);

(길이 : 605 바이트)

Closure Compiler는 더 축소 된 파일 크기로 조직화 된 코드를 처벌하는 반면, 많은 Minifier가 더 작은 파일 크기로 조직화 된 코드를 처벌하는 반면, Closure Compiler는 트릭을 사용하는 경우 더 작은 파일 크기를 출력하기 위해 모든 청결과 정성을 거칠 수 있기 때문에 변수 이름 열거와 같습니다. 이것이 하나의 마음에 코딩의 성배입니다. 작은 크기로 코드를 지원하고 더 나은 프로그래밍 습관을 훈련하여 마음을 돕는 도구입니다.

Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww

??????? ???? ????

이제 열거 형이없는 등가 파일의 크기를 살펴 보겠습니다.

열거를 사용하지 않는 소스 (길이 : 1,973 바이트 (열거 된 코드보다 477 바이트 짧음!))
열거를 사용하지 않고 축소 된 (길이 : 843 바이트 ( 열거 된 코드보다 238 바이트 ))

코드 크기 차트

알 수 있듯이 열거가 없으면 축소 된 코드가 클수록 소스 코드가 짧아집니다. 나는 당신에 대해 모른다; 그러나 나는 최종 제품에 소스 코드를 포함시키지 않는다는 것을 확실히 알고 있습니다. 따라서이 형식의 열거 형은 파일 크기가 작을수록 훨씬 우수합니다.

Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww

??????????? ? ??? ??????

이 형식의 열거에 대한 또 다른 장점은 축소 된 코드 크기를 희생하지 않고도 대규모 프로젝트를 쉽게 관리하는 데 사용할 수 있다는 것입니다. 다른 많은 사람들과 함께 대규모 프로젝트를 작업 할 때 코드를 만든 사람으로 변수 이름을 명시 적으로 표시하고 레이블을 지정하면 코드의 원래 작성자를 공동 버그 수정을 위해 빠르게 식별 할 수 있습니다.

// JG = Jack Giffin
const ENUM_JG_COLORENUM_RED   = 0,
      ENUM_JG_COLORENUM_GREEN = 1,
      ENUM_JG_COLORENUM_BLUE  = 2,
      ENUMLEN_JG_COLORENUM    = 3;

// later on

if(currentColor === ENUM_JG_COLORENUM_RED) {
   // whatever
}

// PL = Pepper Loftus
// BK = Bob Knight
const ENUM_PL_ARRAYTYPE_UNSORTED   = 0,
      ENUM_PL_ARRAYTYPE_ISSORTED   = 1,
      ENUM_BK_ARRAYTYPE_CHUNKED    = 2, // added by Bob Knight
      ENUM_JG_ARRAYTYPE_INCOMPLETE = 3, // added by jack giffin
      ENUMLEN_PL_COLORENUM         = 4;

// later on

if(
  randomArray === ENUM_PL_ARRAYTYPE_UNSORTED ||
  randomArray === ENUM_BK_ARRAYTYPE_CHUNKED
) {
   // whatever
}

???????? ???????????

또한이 형식의 열거는 축소 후에도 훨씬 빠릅니다. 일반적인 명명 된 속성에서 브라우저는 해시 맵을 사용하여 속성이 객체의 어디에 있는지 찾아야합니다. JIT 컴파일러는 객체에서이 위치를 지능적으로 캐시하지만 객체에서 낮은 속성을 삭제하는 등의 특수한 경우로 인해 여전히 엄청난 오버 헤드가 있습니다.

그러나 스파 스가 아닌 정수 인덱싱 된 PACKED_ELEMENTS 배열을 사용하면 내부 배열의 값 인덱스가 이미 지정되어 있으므로 브라우저에서 해당 오버 헤드를 대부분 건너 뛸 수 있습니다. 예, ECMAScript 표준에 따르면 모든 속성은 문자열로 취급됩니다. 그럼에도 불구하고 ECMAScript 표준의 이러한 측면은 모든 브라우저가 배열의 숫자 인덱스에 대해 특별히 최적화되어 있기 때문에 성능에 대해 매우 오해의 소지가 있습니다.

/// Hashmaps are slow, even with JIT juice
var ref = {};
ref.count = 10;
ref.value = "foobar";

위 코드와 아래 코드를 비교하십시오.

/// Arrays, however, are always lightning fast
const INDEX_REFERENCE_COUNT = 0;
const INDEX_REFERENCE_VALUE = 1;
const INDEXLENGTH_REFERENCE = 2;

var ref = [];
ref[INDEX_REFERENCE_COUNT] = 10;
ref[INDEX_REFERENCE_VALUE] = "foobar";

열거 형이있는 코드에 일반 객체가있는 코드보다 훨씬 길어 보이는 것처럼 보일 수도 있지만 외모는 속일 수 있습니다. 서사시 폐쇄 컴파일러를 사용할 때 소스 코드 크기는 출력 크기에 비례하지 않는다는 점을 기억해야합니다. 관찰하십시오.

/// Hashmaps are slow, even with JIT juice
var a={count:10,value:"foobar"};

열거가없는 축소 된 코드는 위에 있고 열거가있는 축소 된 코드는 아래에 있습니다.

/// Arrays, however, are always lightning fast
var a=[10,"foobar"];

위의 예제는 성능이 우수 할뿐만 아니라 열거 된 코드가 파일 크기를 최소화하는 것을 보여줍니다.

Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww

???? ?????????

또한이 개인 체리 는 Javascript 모드에서 CodeMirror 텍스트 편집기 와 함께이 열거 형을 사용하고 있습니다. CodeMirror의 Javascript 구문 강조 모드는 현재 범위에서 로컬 변수를 강조 표시합니다. 이렇게하면 변수 이름을 var키워드로 선언 한 경우 변수 이름이 특수한 색 (기본적으로 청록색)이 되기 때문에 변수 이름을 올바르게 입력하면 즉시 알 수 있습니다 . CodeMirror를 사용하지 않더라도 적어도 브라우저는 도움이됩니다.[variable name] is not defined 잘못 입력 된 열거 이름을 가진 코드를 실행할 때 예외 있습니다. 또한 JSLint 및 Closure Compiler와 같은 JavaScript 도구는 열거 변수 이름을 잘못 입력하면 알려줍니다. CodeMirror, 브라우저 및 다양한 Javascript 도구를 함께 사용하면 이러한 열거 형식을 매우 간단하고 쉽게 디버깅 할 수 있습니다.

CodeMirror 강조 데모

const ENUM_COLORENUM_RED   = 0,
      ENUM_COLORENUM_GREEN = 1,
      ENUM_COLORENUM_BLUE  = 2,
      ENUMLEN_COLORENUM    = 3;
var currentColor = ENUM_COLORENUM_GREEN;

if(currentColor === ENUM_COLORENUM_RED) {
   // whatever
}

if(currentColor === ENUM_COLORENUM_DNE) {
   // whatever
}

위의 스 니펫 ENUM_COLORENUM_DNE에는 존재하지 않기 때문에 오류가 발생했습니다 .

Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww

?????????? ☑

이 열거 방법론은 실제로 최소화 된 코드 크기뿐만 아니라 성능, 디버깅 및 공동 작업을 수행하는 가장 좋은 방법이라고 말하는 것이 안전하다고 생각합니다.

유용한 질문을 읽은 후 질문 상자의 왼쪽 상단 화살표를 클릭하여 글에 시간을 쏟아 준 저자에게 감사합니다. 각 답변 상자에는 이러한 위쪽 화살표 중 하나가 있습니다.


답글 남기기