Cú pháp ưa thích để xác định enum trong JavaScript là gì? Cái gì đó như:

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

// later on

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

Hoặc có một thành ngữ thích hợp hơn?

Kể từ 1.8.5, có thể niêm phong và đóng băng đối tượng, vì vậy hãy xác định các mục trên là:

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

hoặc là

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

và Voila! Enum JS.

Tuy nhiên, điều này không ngăn bạn gán giá trị không mong muốn cho một biến, thường là mục tiêu chính của enums:

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

Một cách để đảm bảo mức độ an toàn của loại mạnh hơn (với enums hoặc cách khác) là sử dụng một công cụ như TypeScript hoặc Flow .

Nguồn

Báo giá không cần thiết nhưng tôi giữ chúng cho thống nhất.

Đây không phải là nhiều câu trả lời, nhưng tôi nói rằng nó hoạt động tốt, cá nhân

Phải nói rằng, vì các giá trị là gì (bạn đã sử dụng 0, 1, 2) không quan trọng, tôi sẽ sử dụng một chuỗi có ý nghĩa trong trường hợp bạn muốn xuất giá trị hiện tại.

CẬP NHẬT

Cảm ơn tất cả những người ủng hộ tất cả mọi người, nhưng tôi không nghĩ câu trả lời của tôi dưới đây là cách tốt nhất để viết enum trong JavaScript nữa. Xem bài đăng trên blog của tôi để biết thêm chi tiết: Enums in JavaScript .

Thông báo tên đã có thể:

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

Ngoài ra, bạn có thể tạo các giá trị đối tượng, vì vậy bạn có thể có bánh và ăn nó:

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

Trong JavaScript, vì là ngôn ngữ động, thậm chí có thể thêm các giá trị enum vào tập sau:

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

Hãy nhớ rằng, các trường của enum (giá trị, tên và mã trong ví dụ này) không cần thiết cho việc kiểm tra danh tính và chỉ ở đó để thuận tiện. Ngoài ra, tên của thuộc tính kích thước không cần phải được mã hóa cứng, nhưng cũng có thể được đặt tự động. Vì vậy, giả sử bạn chỉ biết tên cho giá trị enum mới của mình, bạn vẫn có thể thêm nó mà không gặp vấn đề gì:

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

Tất nhiên điều này có nghĩa là một số giả định không còn có thể được thực hiện (giá trị đó đại diện cho thứ tự chính xác cho kích thước chẳng hạn).

Hãy nhớ rằng, trong JavaScript một đối tượng giống như bảng bản đồ hoặc bảng băm . Một tập hợp các cặp tên-giá trị. Bạn có thể lặp qua chúng hoặc thao túng chúng mà không cần biết nhiều về chúng trước.

Thí dụ

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.        
  }
} 

Và nhân tiện, nếu bạn quan tâm đến các không gian tên, bạn có thể muốn xem giải pháp của tôi về quản lý phụ thuộc và không gian tên đơn giản nhưng mạnh mẽ cho JavaScript: Gói JS

Điểm mấu chốt: Bạn không thể.

Bạn có thể giả mạo nó, nhưng bạn sẽ không nhận được loại an toàn. Thông thường, điều này được thực hiện bằng cách tạo một từ điển đơn giản các giá trị chuỗi được ánh xạ tới các giá trị nguyên. Ví dụ:

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

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

Vấn đề với phương pháp này? Bạn có thể vô tình xác định lại số liệt kê của mình hoặc vô tình có các giá trị liệt kê trùng lặp. Ví dụ:

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

Biên tập

Thế còn Object.freeze của Artur Czajka thì sao? Điều đó có hiệu quả để ngăn bạn đặt thứ hai đến thứ năm không? - Chiên Quad

Hoàn toàn, Object.freezesẽ hoàn toàn khắc phục vấn đề tôi phàn nàn. Tôi muốn nhắc nhở mọi người rằng khi tôi viết những điều trên, Object.freezekhông thực sự tồn tại.

Bây giờ .... bây giờ nó mở ra một số khả năng rất thú vị.

Chỉnh sửa 2
Đây là một thư viện rất tốt để tạo enum.

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

Mặc dù nó có thể không phù hợp với mọi cách sử dụng enum hợp lệ, nhưng nó đi một chặng đường rất dài.

Đây là những gì tất cả chúng ta muốn:

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

Bây giờ bạn có thể tạo enum của bạn:

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

Bằng cách này, các hằng số có thể được kích hoạt theo cách thông thường (YesNo.YES, Color.GREEN) và chúng nhận được một giá trị int tuần tự (NO = 0, YES = 1; RED = 0, GREEN = 1, BLUE = 2).

Bạn cũng có thể thêm các phương thức, bằng cách sử dụng 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 */
};

Chỉnh sửa - cải thiện nhỏ - hiện có varargs: (tiếc là nó không hoạt động đúng trên IE: S ... nên gắn bó với phiên bản trước đó)

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

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

Trong hầu hết các trình duyệt hiện đại, có một kiểu dữ liệu nguyên thủy biểu tượng có thể được sử dụng để tạo ra một phép liệt kê. Nó sẽ đảm bảo an toàn loại enum vì mỗi giá trị ký hiệu được JavaScript đảm bảo là duy nhất, nghĩa là Symbol() != Symbol(). Ví dụ:

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

Để đơn giản hóa việc gỡ lỗi, bạn có thể thêm một mô tả cho các giá trị enum:

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

Bản demo của Plunker

Trên GitHub, bạn có thể tìm thấy trình bao bọc đơn giản hóa mã cần thiết để khởi tạo enum:

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

𝗩𝗮𝗻𝗶𝗹𝗹𝗮𝗝𝗦 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲

Hãy để chúng tôi cắt thẳng vào vấn đề: kích thước tập tin. Tất cả các câu trả lời khác được liệt kê ở đây nở mã của bạn đến cực độ. Tôi trình bày với bạn rằng để có hiệu suất tốt nhất có thể, khả năng đọc mã, quản lý dự án quy mô lớn, gợi ý cú pháp trong nhiều trình soạn thảo mã và giảm kích thước mã bằng cách rút gọn, đây là cách chính xác để thực hiện liệt kê: biến ký hiệu gạch dưới.

^www

Như đã trình bày trong biểu đồ trên và ví dụ bên dưới, đây là năm bước dễ dàng để bắt đầu:

1. Xác định tên cho nhóm liệt kê. Hãy nghĩ về một danh từ có thể mô tả mục đích của bảng liệt kê hoặc ít nhất là các mục trong bảng liệt kê. Ví dụ: một nhóm các bảng liệt kê màu sắc mà người dùng có thể lựa chọn có thể được đặt tên tốt hơn MÀU SẮC hơn MÀU SẮC.
2. Quyết định xem các liệt kê trong nhóm là loại trừ lẫn nhau hay độc lập. Nếu loại trừ lẫn nhau, hãy bắt đầu mỗi tên biến được liệt kê với ENUM_. Nếu độc lập hoặc cạnh nhau, sử dụng INDEX_.
3. Đối với mỗi mục nhập, hãy tạo một biến cục bộ mới có tên bắt đầu bằng ENUM_hoặc INDEX_sau đó là tên của nhóm, sau đó là dấu gạch dưới, sau đó là tên thân thiện duy nhất cho thuộc tính
4. Thêm một ENUMLENGTH_, ENUMLEN_, INDEXLENGTH_, hoặc INDEXLEN_(cho dù LEN_hoặc LENGTH_là sở thích cá nhân) biến được liệt kê vào cuối. Bạn nên sử dụng biến này bất cứ nơi nào có thể trong mã của bạn để đảm bảo rằng việc thêm một mục nhập vào bảng liệt kê và tăng giá trị này sẽ không phá vỡ mã của bạn.
5. Cung cấp cho mỗi biến liệt kê liên tiếp một giá trị một nhiều hơn trước, bắt đầu từ 0. Có ý kiến trên trang này mà nói 0không nên được sử dụng như một giá trị được liệt kê bởi vì 0 == null, 0 == false, 0 == "", và sự điên loạn JS khác. Tôi gửi cho bạn rằng, để tránh vấn đề này và tăng hiệu suất cùng một lúc, luôn luôn sử dụng ===và không bao giờ để ==xuất hiện trong mã của bạn ngoại trừ với typeof(ví dụ typeof X == "string"). Trong tất cả các năm sử dụng ===, tôi chưa bao giờ gặp vấn đề với việc sử dụng 0 làm giá trị liệt kê. Nếu bạn vẫn còn vuông vức, thì 1có thể được sử dụng làm giá trị bắt đầu trong ENUM_bảng liệt kê (nhưng không phải trong INDEX_bảng liệt kê) mà không bị phạt hiệu suất trong nhiều trường hợp.

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
}

Đây là cách tôi nhớ khi nào nên sử dụng INDEX_và khi nào nên sử dụng ENUM_:

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

Tuy nhiên, ENUM_trong một số trường hợp, có thể thích hợp làm chỉ số như khi đếm số lần xuất hiện của từng mục.

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

Quan sát rằng, trong đoạn mã trên, thật dễ dàng để thêm một loại thú cưng mới: bạn sẽ phải nối thêm một mục mới sau đó ENUM_PET_RATvà cập nhật ENUMLEN_PETtương ứng. Có thể khó khăn hơn và có lỗi khi thêm một mục mới trong các hệ thống liệt kê khác.

^{wvvvvvvvvvv v tuần năm tuần năm năm nay năm nay năm tuần năm năm nay năm nay năm tuần năm năm ngày thứ năm mùa thứ năm mùa thứ năm mùa năm mùa năm tuần thứ năm thứ năm mùa chiều sáng sóng sáng thứ năm tuần thứ năm thứ năm thứ năm thứ năm năm nay năm nay năm nay năm nay}

𝗨𝗽𝗽𝗲𝗿𝗰𝗮𝘀𝗲 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗪𝗶𝘁𝗵

Ngoài ra, cú pháp liệt kê này cho phép mở rộng lớp rõ ràng và súc tích như được thấy dưới đây. Để mở rộng một lớp, thêm một số tăng vào LEN_mục nhập của lớp cha. Sau đó, kết thúc lớp con với LEN_mục nhập riêng để lớp con có thể được mở rộng hơn nữa trong tương lai.

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

(Độ dài: 2.450 byte)

Một số người có thể nói rằng điều này ít thực tế hơn các giải pháp khác: nó mất rất nhiều không gian, mất nhiều thời gian để viết và nó không được phủ bằng cú pháp đường. Những người đó sẽ đúng nếu họ không giảm thiểu mã của họ. Tuy nhiên, không có người hợp lý sẽ để lại mã chưa được tối ưu hóa trong sản phẩm cuối cùng. Đối với việc thu nhỏ này, Trình biên dịch đóng cửa là trình biên dịch tốt nhất mà tôi chưa tìm thấy. Truy cập trực tuyến có thể được tìm thấy ở đây . Trình biên dịch đóng có thể lấy tất cả dữ liệu liệt kê này và nội tuyến nó, làm cho Javascript của bạn trở nên siêu nhỏ và chạy siêu nhanh. Do đó, Minify với Trình biên dịch đóng. Quan sát.

^{wvvvvvvvvvv v tuần năm tuần năm năm nay năm nay năm tuần năm năm nay năm nay năm tuần năm năm ngày thứ năm mùa thứ năm mùa thứ năm mùa năm mùa năm tuần thứ năm thứ năm mùa chiều sáng sóng sáng thứ năm tuần thứ năm thứ năm thứ năm thứ năm năm nay năm nay năm nay năm nay}

𝗪𝗶𝘁𝗵 𝗖𝗹𝗼𝘀𝘂𝗿𝗲

Trình biên dịch đóng có thể thực hiện một số tối ưu hóa đáng kinh ngạc thông qua các suy luận vượt quá khả năng của bất kỳ công cụ khai thác Javascript nào khác. Trình biên dịch đóng cửa có thể đặt các biến nguyên thủy nội tuyến thành một giá trị cố định. Trình biên dịch đóng cửa cũng có thể thực hiện các suy luận dựa trên các giá trị được nội tuyến này và loại bỏ các khối không được sử dụng trong câu lệnh if và vòng lặp.

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

(Độ dài: 605 byte)

Trình biên dịch đóng cửa thưởng cho bạn mã hóa thông minh hơn và tổ chức mã của bạn tốt bởi vì, trong khi nhiều công cụ khai thác trừng phạt mã có tổ chức với kích thước tệp được rút gọn lớn hơn, thì Trình biên dịch đóng gói có thể sàng lọc tất cả sự sạch sẽ và tỉnh táo của bạn để tạo ra kích thước tệp thậm chí nhỏ hơn nếu bạn sử dụng các thủ thuật như liệt kê tên biến. Điều đó, trong suy nghĩ này, là chén thánh của mã hóa: một công cụ vừa hỗ trợ mã của bạn với kích thước nhỏ hơn vừa phải và hỗ trợ tâm trí của bạn bằng cách rèn luyện thói quen lập trình tốt hơn.

^{wvvvvvvvvvv v tuần năm tuần năm năm nay năm nay năm tuần năm năm nay năm nay năm tuần năm năm ngày thứ năm mùa thứ năm mùa thứ năm mùa năm mùa năm tuần thứ năm thứ năm mùa chiều sáng sóng sáng thứ năm tuần thứ năm thứ năm thứ năm thứ năm năm nay năm nay năm nay năm nay}

𝗖𝗼𝗱𝗲

Bây giờ, chúng ta hãy xem tệp tương đương sẽ lớn như thế nào nếu không có bất kỳ bảng liệt kê nào.

Nguồn không sử dụng liệt kê (độ dài: 1.973 byte (ngắn hơn 477 byte so với mã liệt kê!))
Được rút gọn mà không sử dụng liệt kê (độ dài: 843 byte ( dài hơn 238 byte so với mã liệt kê ))

Như đã thấy, không có bảng liệt kê, mã nguồn ngắn hơn với chi phí của mã rút gọn lớn hơn. Tôi không biết gì về bạn; nhưng tôi biết chắc chắn rằng tôi không kết hợp mã nguồn vào sản phẩm cuối cùng. Do đó, hình thức liệt kê này vượt trội hơn nhiều so với kết quả là kích thước tệp được rút gọn nhỏ hơn.

^{wvvvvvvvvvv v tuần năm tuần năm năm nay năm nay năm tuần năm năm nay năm nay năm tuần năm năm ngày thứ năm mùa thứ năm mùa thứ năm mùa năm mùa năm tuần thứ năm thứ năm mùa chiều sáng sóng sáng thứ năm tuần thứ năm thứ năm thứ năm thứ năm năm nay năm nay năm nay năm nay}

🤝 𝗕𝘂𝗴

Một ưu điểm khác về hình thức liệt kê này là nó có thể được sử dụng để dễ dàng quản lý các dự án quy mô lớn mà không phải hy sinh kích thước mã được rút gọn. Khi làm việc trong một dự án lớn với nhiều người khác, có thể có ích khi đánh dấu và gắn nhãn rõ ràng tên biến với người đã tạo mã để người tạo mã gốc có thể nhanh chóng được xác định để sửa lỗi cộng tác.

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

𝗦𝘂𝗽𝗲𝗿𝗶𝗼𝗿 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲

Hơn nữa, hình thức liệt kê này cũng nhanh hơn nhiều sau khi thu nhỏ. Trong các thuộc tính được đặt tên bình thường, trình duyệt phải sử dụng các hashtag để tìm kiếm vị trí của thuộc tính trên đối tượng. Mặc dù trình biên dịch JIT lưu trữ thông minh vị trí này trên đối tượng một cách thông minh, nhưng vẫn có chi phí rất lớn do các trường hợp đặc biệt như xóa một thuộc tính thấp hơn khỏi đối tượng.

Nhưng, với các mảng PACKED_ELEMENTS được lập chỉ mục số nguyên không thưa thớt liên tục , trình duyệt có thể bỏ qua phần lớn chi phí đó vì chỉ mục của giá trị trong mảng bên trong đã được chỉ định. Có, theo tiêu chuẩn ECMAScript, tất cả các thuộc tính được coi là được coi là chuỗi. Tuy nhiên, khía cạnh này của tiêu chuẩn ECMAScript rất sai lệch về hiệu suất vì tất cả các trình duyệt có tối ưu hóa đặc biệt cho các chỉ mục số trong mảng.

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

So sánh mã trên với mã dưới đây.

/// 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";

Người ta có thể phản đối mã với các liệt kê dường như dài hơn nhiều so với mã với các đối tượng thông thường, nhưng ngoại hình có thể bị đánh lừa. Điều quan trọng cần nhớ là kích thước mã nguồn không tỷ lệ với kích thước đầu ra khi sử dụng Trình biên dịch đóng cửa sử thi. Quan sát.

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

Mã rút gọn không có bảng liệt kê ở trên và mã được rút gọn với bảng liệt kê ở dưới.

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

Ví dụ trên chứng minh rằng, ngoài việc có hiệu suất vượt trội, mã được liệt kê còn dẫn đến kích thước tệp được thu nhỏ hơn.

^{wvvvvvvvvvv v tuần năm tuần năm năm nay năm nay năm tuần năm năm nay năm nay năm tuần năm năm ngày thứ năm mùa thứ năm mùa thứ năm mùa năm mùa năm tuần thứ năm thứ năm mùa chiều sáng sóng sáng thứ năm tuần thứ năm thứ năm thứ năm thứ năm năm nay năm nay năm nay năm nay}

𝗘𝗮𝘀𝘆 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴

Hơn nữa, anh đào cá nhân trên đỉnh này đang sử dụng hình thức liệt kê này cùng với trình soạn thảo văn bản CodeMirror ở chế độ Javascript. Chế độ tô sáng cú pháp Javascript của CodeMirror làm nổi bật các biến cục bộ trong phạm vi hiện tại. Bằng cách đó, bạn biết ngay lập tức khi bạn nhập tên biến chính xác bởi vì nếu tên biến được khai báo trước đó bằng vartừ khóa, thì tên biến sẽ chuyển sang màu đặc biệt (màu lục lam theo mặc định). Ngay cả khi bạn không sử dụng CodeMirror, thì ít nhất trình duyệt cũng sẽ hữu ích[variable name] is not definedngoại lệ khi thực thi mã với tên liệt kê sai. Ngoài ra, các công cụ JavaScript như JSLint và Trình biên dịch đóng cửa rất lớn về việc cho bạn biết khi bạn nhập sai tên biến liệt kê. CodeMirror, trình duyệt và các công cụ Javascript khác nhau kết hợp lại giúp việc gỡ lỗi hình thức liệt kê này rất đơn giản và thực sự dễ dàng.

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
}

Trong đoạn trích trên, bạn đã được thông báo lỗi vì ENUM_COLORENUM_DNEkhông tồn tại.

^{wvvvvvvvvvv v tuần năm tuần năm năm nay năm nay năm tuần năm năm nay năm nay năm tuần năm năm ngày thứ năm mùa thứ năm mùa thứ năm mùa năm mùa năm tuần thứ năm thứ năm mùa chiều sáng sóng sáng thứ năm tuần thứ năm thứ năm thứ năm thứ năm năm nay năm nay năm nay năm nay}

𝗖𝗼𝗻𝗰𝗹𝘂𝘀𝗶𝗼𝗻 ☑

Tôi nghĩ thật an toàn khi nói rằng phương pháp liệt kê này thực sự là cách tốt nhất để đi không chỉ cho kích thước mã được rút gọn, mà còn cho hiệu suất, gỡ lỗi và cộng tác.

^{Sau khi đọc một câu hỏi hữu ích, tôi cảm ơn tác giả đã đổ thời gian vào bài viết của họ bằng cách nhấp vào mũi tên trên cùng bên trái trong hộp câu hỏi. Mỗi hộp trả lời cũng có một trong những mũi tên hướng lên.}

Tôi đã chơi xung quanh với điều này, vì tôi yêu enum của tôi. =)

Sử dụng Object.definePropertytôi nghĩ rằng tôi đã đưa ra một giải pháp khả thi.

Đây là một jsfiddle: http://jsfiddle.net/ZV4A6/

Sử dụng phương pháp này .. về lý thuyết, bạn có thể gọi và định nghĩa các giá trị enum cho bất kỳ đối tượng nào, mà không ảnh hưởng đến các thuộc tính khác của đối tượng đó.

Object.defineProperty(Object.prototype,'Enum', {
    value: function() {
        for(i in arguments) {
            Object.defineProperty(this,arguments[i], {
                value:parseInt(i),
                writable:false,
                enumerable:true,
                configurable:true
            });
        }
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
}); 

Vì thuộc tính writable:falsenày nên làm cho nó an toàn.

Vì vậy, bạn sẽ có thể tạo một đối tượng tùy chỉnh, sau đó gọi Enum()nó. Các giá trị được gán bắt đầu từ 0 và tăng trên mỗi mục.

var EnumColors={};
EnumColors.Enum('RED','BLUE','GREEN','YELLOW');
EnumColors.RED;    // == 0
EnumColors.BLUE;   // == 1
EnumColors.GREEN;  // == 2
EnumColors.YELLOW; // == 3

Sử dụng proxy Javascript

TLDR: Thêm lớp này vào các phương thức tiện ích của bạn và sử dụng nó trong toàn bộ mã của bạn, nó chế giễu hành vi của Enum từ các ngôn ngữ lập trình truyền thống và thực sự gây ra lỗi khi bạn cố truy cập vào một điều tra viên không tồn tại hoặc thêm / cập nhật một điều tra viên. Không cần phải dựa vào Object.freeze().

class Enum {
  constructor(enumObj) {
    const handler = {
      get(target, name) {
        if (typeof target[name] != 'undefined') {
          return target[name];
        }
        throw new Error(`No such enumerator: ${name}`);
      },
      set() {
        throw new Error('Cannot add/update properties on an Enum instance after it is defined')
      }
    };

    return new Proxy(enumObj, handler);
  }
}

Sau đó tạo enum bằng cách khởi tạo lớp:

const roles = new Enum({
  ADMIN: 'Admin',
  USER: 'User',
});

Giải thích đầy đủ:

Một tính năng rất có lợi của Enums mà bạn nhận được từ các ngôn ngữ truyền thống là chúng nổ tung (gây ra lỗi thời gian biên dịch) nếu bạn cố truy cập vào một điều tra viên không tồn tại.

Bên cạnh việc đóng băng cấu trúc enum bị chế giễu để ngăn các giá trị bổ sung vô tình / độc hại được thêm vào, không có câu trả lời nào khác giải quyết tính năng nội tại của Enums.

Như bạn có thể biết, việc truy cập các thành viên không tồn tại trong JavaScript chỉ đơn giản là trả về undefinedvà không làm nổ mã của bạn. Vì các điều tra viên là các hằng số được xác định trước (tức là các ngày trong tuần), nên không bao giờ có trường hợp khi một điều tra viên không được xác định.

Đừng hiểu sai ý tôi, hành vi trở lại của JavaScript undefinedkhi truy cập các thuộc tính không xác định thực sự là một tính năng rất mạnh mẽ của ngôn ngữ, nhưng đó không phải là một tính năng bạn muốn khi bạn đang cố gắng giả lập các cấu trúc Enum truyền thống.

Đây là nơi các đối tượng Proxy tỏa sáng. Proxy đã được chuẩn hóa trong ngôn ngữ với sự ra đời của ES6 (ES2015). Đây là mô tả từ MDN:

Đối tượng Proxy được sử dụng để xác định hành vi tùy chỉnh cho các hoạt động cơ bản (ví dụ: tra cứu thuộc tính, gán, liệt kê, gọi hàm, v.v.).

Tương tự như proxy máy chủ web, proxy JavaScript có thể chặn các hoạt động trên các đối tượng (với việc sử dụng "bẫy", gọi chúng là hook nếu bạn muốn) và cho phép bạn thực hiện các kiểm tra, hành động và / hoặc thao tác khác nhau trước khi hoàn thành (hoặc trong một số trường hợp dừng các hoạt động hoàn toàn, đó chính xác là những gì chúng ta muốn làm nếu và khi chúng ta cố gắng tham chiếu một điều tra viên không tồn tại).

Đây là một ví dụ giả định sử dụng đối tượng Proxy để bắt chước Enums. Các điều tra viên trong ví dụ này là các Phương thức HTTP tiêu chuẩn (nghĩa là "NHẬN", "BÀI", v.v.):

// Class for creating enums (13 lines)
// Feel free to add this to your utility library in 
// your codebase and profit! Note: As Proxies are an ES6 
// feature, some browsers/clients may not support it and 
// you may need to transpile using a service like babel

class Enum {
  // The Enum class instantiates a JavaScript Proxy object.
  // Instantiating a `Proxy` object requires two parameters, 
  // a `target` object and a `handler`. We first define the handler,
  // then use the handler to instantiate a Proxy.

  // A proxy handler is simply an object whose properties
  // are functions which define the behavior of the proxy 
  // when an operation is performed on it. 
  
  // For enums, we need to define behavior that lets us check what enumerator
  // is being accessed and what enumerator is being set. This can be done by 
  // defining "get" and "set" traps.
  constructor(enumObj) {
    const handler = {
      get(target, name) {
        if (typeof target[name] != 'undefined') {
          return target[name]
        }
        throw new Error(`No such enumerator: ${name}`)
      },
      set() {
        throw new Error('Cannot add/update properties on an Enum instance after it is defined')
      }
    }


    // Freeze the target object to prevent modifications
    return new Proxy(enumObj, handler)
  }
}


// Now that we have a generic way of creating Enums, lets create our first Enum!
const httpMethods = new Enum({
  DELETE: "DELETE",
  GET: "GET",
  OPTIONS: "OPTIONS",
  PATCH: "PATCH",
  POST: "POST",
  PUT: "PUT"
})

// Sanity checks
console.log(httpMethods.DELETE)
// logs "DELETE"

try {
  httpMethods.delete = "delete"
} catch (e) {
console.log("Error: ", e.message)
}
// throws "Cannot add/update properties on an Enum instance after it is defined"

try {
  console.log(httpMethods.delete)
} catch (e) {
  console.log("Error: ", e.message)
}
// throws "No such enumerator: delete"

ASIDE: cái quái gì là một proxy?

Tôi nhớ khi tôi lần đầu tiên bắt đầu nhìn thấy từ proxy ở khắp mọi nơi, nó chắc chắn không có ý nghĩa với tôi trong một thời gian dài. Nếu đó là bạn ngay bây giờ, tôi nghĩ một cách dễ dàng để khái quát hóa proxy là nghĩ về chúng như phần mềm, tổ chức hoặc thậm chí là những người đóng vai trò trung gian hoặc trung gian giữa hai máy chủ, công ty hoặc người.

Đây là một cái cũ tôi biết, nhưng cách nó đã được thực hiện thông qua giao diện TypeScript là:

var MyEnum;
(function (MyEnum) {
    MyEnum[MyEnum["Foo"] = 0] = "Foo";
    MyEnum[MyEnum["FooBar"] = 2] = "FooBar";
    MyEnum[MyEnum["Bar"] = 1] = "Bar";
})(MyEnum|| (MyEnum= {}));

Điều này cho phép bạn tra cứu cả hai MyEnum.Bartrả về 1 và MyEnum[1]trả về "Bar" bất kể thứ tự khai báo.

Trong ES7 , bạn có thể thực hiện ENUM thanh lịch dựa trên các thuộc tính tĩnh:

class ColorEnum  {
    static RED = 0 ;
    static GREEN = 1;
    static BLUE = 2;
}

sau đó

if (currentColor === ColorEnum.GREEN ) {/*-- coding --*/}

Ưu điểm (của việc sử dụng lớp thay vì đối tượng bằng chữ) là có một lớp cha, Enumsau đó tất cả các Enums của bạn sẽ mở rộng lớp đó.

 class ColorEnum  extends Enum {/*....*/}

Đây là giải pháp mà tôi sử dụng.

function Enum() {
    this._enums = [];
    this._lookups = {};
}

Enum.prototype.getEnums = function() {
    return _enums;
}

Enum.prototype.forEach = function(callback){
    var length = this._enums.length;
    for (var i = 0; i < length; ++i){
        callback(this._enums[i]);
    }
}

Enum.prototype.addEnum = function(e) {
    this._enums.push(e);
}

Enum.prototype.getByName = function(name) {
    return this[name];
}

Enum.prototype.getByValue = function(field, value) {
    var lookup = this._lookups[field];
    if(lookup) {
        return lookup[value];
    } else {
        this._lookups[field] = ( lookup = {});
        var k = this._enums.length - 1;
        for(; k >= 0; --k) {
            var m = this._enums[k];
            var j = m[field];
            lookup[j] = m;
            if(j == value) {
                return m;
            }
        }
    }
    return null;
}

function defineEnum(definition) {
    var k;
    var e = new Enum();
    for(k in definition) {
        var j = definition[k];
        e[k] = j;
        e.addEnum(j)
    }
    return e;
}

Và bạn xác định enum của bạn như thế này:

var COLORS = defineEnum({
    RED : {
        value : 1,
        string : 'red'
    },
    GREEN : {
        value : 2,
        string : 'green'
    },
    BLUE : {
        value : 3,
        string : 'blue'
    }
});

Và đây là cách bạn truy cập enum của bạn:

COLORS.BLUE.string
COLORS.BLUE.value
COLORS.getByName('BLUE').string
COLORS.getByValue('value', 1).string

COLORS.forEach(function(e){
    // do what you want with e
});

Tôi thường sử dụng 2 phương thức cuối cùng để ánh xạ enum từ các đối tượng tin nhắn.

Một số ưu điểm của phương pháp này:

• Dễ dàng khai báo
• Dễ dàng truy cập enum của bạn
• Enum của bạn có thể là loại phức tạp
• Lớp Enum có một số bộ nhớ đệm kết hợp nếu bạn đang sử dụng getByValue rất nhiều

Một số nhược điểm:

• Một số quản lý bộ nhớ lộn xộn đang diễn ra ở đó, khi tôi giữ các tài liệu tham khảo cho enums
• Vẫn không có loại an toàn

Tạo một đối tượng theo nghĩa đen:

const Modes = {
  DRAGGING: 'drag',
  SCALING:  'scale',
  CLICKED:  'click'
};

Nếu bạn đang sử dụng Backbone , bạn có thể nhận được chức năng enum toàn diện (tìm theo id, tên, thành viên tùy chỉnh) miễn phí bằng Backbone.Collection .

// enum instance members, optional
var Color = Backbone.Model.extend({
    print : function() {
        console.log("I am " + this.get("name"))
    }
});

// enum creation
var Colors = new Backbone.Collection([
    { id : 1, name : "Red", rgb : 0xFF0000},
    { id : 2, name : "Green" , rgb : 0x00FF00},
    { id : 3, name : "Blue" , rgb : 0x0000FF}
], {
    model : Color
});

// Expose members through public fields.
Colors.each(function(color) {
    Colors[color.get("name")] = color;
});

// using
Colors.Red.print()

câu trả lời của bạn quá phức tạp

var buildSet = function(array) {
  var set = {};
  for (var i in array) {
    var item = array[i];
    set[item] = item;
  }
  return set;
}

var myEnum = buildSet(['RED','GREEN','BLUE']);
// myEnum.RED == 'RED' ...etc

Tôi đã sửa đổi giải pháp của Andre 'Fi':

  function Enum() {
    var that = this;
    for (var i in arguments) {
        that[arguments[i]] = i;
    }
    this.name = function(value) {
        for (var key in that) {
            if (that[key] == value) {
                return key;
            }
        }
    };
    this.exist = function(value) {
        return (typeof that.name(value) !== "undefined");
    };
    if (Object.freeze) {
        Object.freeze(that);
    }
  }

Kiểm tra:

var Color = new Enum('RED', 'GREEN', 'BLUE');
undefined
Color.name(Color.REDs)
undefined
Color.name(Color.RED)
"RED"
Color.exist(Color.REDs)
false
Color.exist(Color.RED)
true

Tôi đã đưa ra này tiếp cận được mô hình hóa sau khi enums trong Java. Đây là loại an toàn, và vì vậy bạn cũng có thể thực hiện instanceofkiểm tra.

Bạn có thể định nghĩa enums như thế này:

var Days = Enum.define("Days", ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]);

Daysbây giờ đề cập đến Daysenum:

Days.Monday instanceof Days; // true

Days.Friday.name(); // "Friday"
Days.Friday.ordinal(); // 4

Days.Sunday === Days.Sunday; // true
Days.Sunday === Days.Friday; // false

Days.Sunday.toString(); // "Sunday"

Days.toString() // "Days { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday } "

Days.values().map(function(e) { return e.name(); }); //["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
Days.values()[4].name(); //"Friday"

Days.fromName("Thursday") === Days.Thursday // true
Days.fromName("Wednesday").name() // "Wednesday"
Days.Friday.fromName("Saturday").name() // "Saturday"

Việc thực hiện:

var Enum = (function () {
    /**
     * Function to define an enum
     * @param typeName - The name of the enum.
     * @param constants - The constants on the enum. Can be an array of strings, or an object where each key is an enum
     * constant, and the values are objects that describe attributes that can be attached to the associated constant.
     */
    function define(typeName, constants) {

        /** Check Arguments **/
        if (typeof typeName === "undefined") {
            throw new TypeError("A name is required.");
        }

        if (!(constants instanceof Array) && (Object.getPrototypeOf(constants) !== Object.prototype)) {

            throw new TypeError("The constants parameter must either be an array or an object.");

        } else if ((constants instanceof Array) && constants.length === 0) {

            throw new TypeError("Need to provide at least one constant.");

        } else if ((constants instanceof Array) && !constants.reduce(function (isString, element) {
                return isString && (typeof element === "string");
            }, true)) {

            throw new TypeError("One or more elements in the constant array is not a string.");

        } else if (Object.getPrototypeOf(constants) === Object.prototype && !Object.keys(constants).reduce(function (isObject, constant) {
                return Object.getPrototypeOf(constants[constant]) === Object.prototype;
            }, true)) {

            throw new TypeError("One or more constants do not have an associated object-value.");

        }

        var isArray = (constants instanceof Array);
        var isObject = !isArray;

        /** Private sentinel-object used to guard enum constructor so that no one else can create enum instances **/
        function __() { };

        /** Dynamically define a function with the same name as the enum we want to define. **/
        var __enum = new Function(["__"],
            "return function " + typeName + "(sentinel, name, ordinal) {" +
                "if(!(sentinel instanceof __)) {" +
                    "throw new TypeError(\"Cannot instantiate an instance of " + typeName + ".\");" +
                "}" +

                "this.__name = name;" +
                "this.__ordinal = ordinal;" +
            "}"
        )(__);

        /** Private objects used to maintain enum instances for values(), and to look up enum instances for fromName() **/
        var __values = [];
        var __dict = {};

        /** Attach values() and fromName() methods to the class itself (kind of like static methods). **/
        Object.defineProperty(__enum, "values", {
            value: function () {
                return __values;
            }
        });

        Object.defineProperty(__enum, "fromName", {
            value: function (name) {
                var __constant = __dict[name]
                if (__constant) {
                    return __constant;
                } else {
                    throw new TypeError(typeName + " does not have a constant with name " + name + ".");
                }
            }
        });

        /**
         * The following methods are available to all instances of the enum. values() and fromName() need to be
         * available to each constant, and so we will attach them on the prototype. But really, they're just
         * aliases to their counterparts on the prototype.
         */
        Object.defineProperty(__enum.prototype, "values", {
            value: __enum.values
        });

        Object.defineProperty(__enum.prototype, "fromName", {
            value: __enum.fromName
        });

        Object.defineProperty(__enum.prototype, "name", {
            value: function () {
                return this.__name;
            }
        });

        Object.defineProperty(__enum.prototype, "ordinal", {
            value: function () {
                return this.__ordinal;
            }
        });

        Object.defineProperty(__enum.prototype, "valueOf", {
            value: function () {
                return this.__name;
            }
        });

        Object.defineProperty(__enum.prototype, "toString", {
            value: function () {
                return this.__name;
            }
        });

        /**
         * If constants was an array, we can the element values directly. Otherwise, we will have to use the keys
         * from the constants object.
         */
        var _constants = constants;
        if (isObject) {
            _constants = Object.keys(constants);
        }

        /** Iterate over all constants, create an instance of our enum for each one, and attach it to the enum type **/
        _constants.forEach(function (name, ordinal) {
            // Create an instance of the enum
            var __constant = new __enum(new __(), name, ordinal);

            // If constants was an object, we want to attach the provided attributes to the instance.
            if (isObject) {
                Object.keys(constants[name]).forEach(function (attr) {
                    Object.defineProperty(__constant, attr, {
                        value: constants[name][attr]
                    });
                });
            }

            // Freeze the instance so that it cannot be modified.
            Object.freeze(__constant);

            // Attach the instance using the provided name to the enum type itself.
            Object.defineProperty(__enum, name, {
                value: __constant
            });

            // Update our private objects
            __values.push(__constant);
            __dict[name] = __constant;
        });

        /** Define a friendly toString method for the enum **/
        var string = typeName + " { " + __enum.values().map(function (c) {
                return c.name();
            }).join(", ") + " } ";

        Object.defineProperty(__enum, "toString", {
            value: function () {
                return string;
            }
        });

        /** Freeze our private objects **/
        Object.freeze(__values);
        Object.freeze(__dict);

        /** Freeze the prototype on the enum and the enum itself **/
        Object.freeze(__enum.prototype);
        Object.freeze(__enum);

        /** Return the enum **/
        return __enum;
    }

    return {
        define: define
    }

})();

IE8 không hỗ trợ phương thức đóng băng ().
Nguồn: http : // Khangax.github.io/compat-table/es5/ , Nhấp vào "Hiển thị trình duyệt lỗi thời?" trên cùng, và kiểm tra IE8 & đóng băng giao lộ col.

Trong dự án trò chơi hiện tại của tôi, tôi đã sử dụng bên dưới, vì rất ít khách hàng vẫn sử dụng IE8:

var CONST_WILD_TYPES = {
    REGULAR: 'REGULAR',
    EXPANDING: 'EXPANDING',
    STICKY: 'STICKY',
    SHIFTING: 'SHIFTING'
};

Chúng tôi cũng có thể làm:

var CONST_WILD_TYPES = {
    REGULAR: 'RE',
    EXPANDING: 'EX',
    STICKY: 'ST',
    SHIFTING: 'SH'
};

hoặc thậm chí này:

var CONST_WILD_TYPES = {
    REGULAR: '1',
    EXPANDING: '2',
    STICKY: '3',
    SHIFTING: '4'
};

Cái cuối cùng, có vẻ hiệu quả nhất đối với chuỗi, nó làm giảm tổng băng thông của bạn nếu bạn có máy chủ và máy khách trao đổi dữ liệu này.
Tất nhiên, giờ đây, nhiệm vụ của bạn là đảm bảo không có xung đột trong dữ liệu (RE, EX, v.v. phải là duy nhất, 1, 2, v.v. phải là duy nhất). Lưu ý rằng bạn cần duy trì những thứ này mãi mãi để tương thích ngược.

Bài tập:

var wildType = CONST_WILD_TYPES.REGULAR;

So sánh:

if (wildType === CONST_WILD_TYPES.REGULAR) {
    // do something here
}

var ColorEnum = {
    red: {},
    green: {},
    blue: {}
}

Bạn không cần đảm bảo rằng bạn không gán các số trùng lặp cho các giá trị enum khác nhau theo cách này. Một đối tượng mới được khởi tạo và gán cho tất cả các giá trị enum.

Đây là một vài cách khác nhau để thực hiện các enum TypeScript .

Cách dễ nhất là chỉ lặp qua một đối tượng, thêm các cặp khóa-giá trị đảo ngược vào đối tượng. Hạn chế duy nhất là bạn phải tự đặt giá trị cho từng thành viên.

function _enum(list) {       
  for (var key in list) {
    list[list[key] = list[key]] = key;
  }
  return Object.freeze(list);
}

var Color = _enum({
  Red: 0,
  Green: 5,
  Blue: 2
});

// Color → {0: "Red", 2: "Blue", 5: "Green", "Red": 0, "Green": 5, "Blue": 2}
// Color.Red → 0
// Color.Green → 5
// Color.Blue → 2
// Color[5] → Green
// Color.Blue > Color.Green → false

Và đây là một mixin lodash để tạo enum bằng chuỗi. Mặc dù phiên bản này có liên quan nhiều hơn một chút, nhưng nó sẽ tự động đánh số cho bạn. Tất cả các phương thức lodash được sử dụng trong ví dụ này đều có tương đương JavaScript thông thường, vì vậy bạn có thể dễ dàng chuyển chúng ra nếu muốn.

function enum() {
    var key, val = -1, list = {};
    _.reduce(_.toArray(arguments), function(result, kvp) {    
        kvp = kvp.split("=");
        key = _.trim(kvp[0]);
        val = _.parseInt(kvp[1]) || ++val;            
        result[result[val] = key] = val;
        return result;
    }, list);
    return Object.freeze(list);
}    

// Add enum to lodash 
_.mixin({ "enum": enum });

var Color = _.enum(
    "Red",
    "Green",
    "Blue = 5",
    "Yellow",
    "Purple = 20",
    "Gray"
);

// Color.Red → 0
// Color.Green → 1
// Color.Blue → 5
// Color.Yellow → 6
// Color.Purple → 20
// Color.Gray → 21
// Color[5] → Blue

Tôi vừa xuất bản gói NPM gen_enum cho phép bạn nhanh chóng tạo cấu trúc dữ liệu Enum trong Javascript:

var genEnum = require('gen_enum');

var AppMode = genEnum('SIGN_UP, LOG_IN, FORGOT_PASSWORD');
var curMode = AppMode.LOG_IN;
console.log(curMode.isLogIn()); // output true 
console.log(curMode.isSignUp()); // output false 
console.log(curMode.isForgotPassword()); // output false 

Một điều thú vị về công cụ nhỏ này là trong môi trường hiện đại (bao gồm các trình duyệt nodejs và IE 9+), đối tượng Enum được trả về là bất biến.

Để biết thêm thông tin, vui lòng kiểm tra https://github.com/greenlaw110/enumjs

Cập nhật

Tôi đã lỗi thời gen_enumgói và hợp nhất hàm vào gói constjs , cung cấp nhiều tính năng hơn bao gồm các đối tượng không thay đổi, khử tuần tự chuỗi JSON, hằng chuỗi và tạo bitmap, v.v. Thanh toán https://www.npmjs.com/package/constjs để biết thêm thông tin

Để nâng cấp từ gen_enumđể constjschỉ cần thay đổi tuyên bố

var genEnum = require('gen_enum');

đến

var genEnum = require('constjs').enum;

Giải pháp đơn giản nhất:

Tạo nên

var Status = Object.freeze({
    "Connecting":0,
    "Ready":1,
    "Loading":2,
    "Processing": 3
});

Nhận giá trị

console.log(Status.Ready) // 1

Nhận chìa khóa

console.log(Object.keys(Status)[Status.Ready]) // Ready

Tôi đã tạo một lớp Enum có thể tìm nạp các giá trị VÀ tên tại O (1). Nó cũng có thể tạo ra một Mảng đối tượng chứa tất cả Tên và Giá trị.

function Enum(obj) {
    // Names must be unique, Values do not.
    // Putting same values for different Names is risky for this implementation

    this._reserved = {
        _namesObj: {},
        _objArr: [],
        _namesArr: [],
        _valuesArr: [],
        _selectOptionsHTML: ""
    };

    for (k in obj) {
        if (obj.hasOwnProperty(k)) {
            this[k] = obj[k];
            this._reserved._namesObj[obj[k]] = k;
        }
    }
}
(function () {
    this.GetName = function (val) {
        if (typeof this._reserved._namesObj[val] === "undefined")
            return null;
        return this._reserved._namesObj[val];
    };

    this.GetValue = function (name) {
        if (typeof this[name] === "undefined")
            return null;
        return this[name];
    };

    this.GetObjArr = function () {
        if (this._reserved._objArr.length == 0) {
            var arr = [];
            for (k in this) {
                if (this.hasOwnProperty(k))
                    if (k != "_reserved")
                        arr.push({
                            Name: k,
                            Value: this[k]
                        });
            }
            this._reserved._objArr = arr;
        }
        return this._reserved._objArr;
    };

    this.GetNamesArr = function () {
        if (this._reserved._namesArr.length == 0) {
            var arr = [];
            for (k in this) {
                if (this.hasOwnProperty(k))
                    if (k != "_reserved")
                        arr.push(k);
            }
            this._reserved._namesArr = arr;
        }
        return this._reserved._namesArr;
    };

    this.GetValuesArr = function () {
        if (this._reserved._valuesArr.length == 0) {
            var arr = [];
            for (k in this) {
                if (this.hasOwnProperty(k))
                    if (k != "_reserved")
                        arr.push(this[k]);
            }
            this._reserved._valuesArr = arr;
        }
        return this._reserved._valuesArr;
    };

    this.GetSelectOptionsHTML = function () {
        if (this._reserved._selectOptionsHTML.length == 0) {
            var html = "";
            for (k in this) {
                if (this.hasOwnProperty(k))
                    if (k != "_reserved")
                        html += "<option value='" + this[k] + "'>" + k + "</option>";
            }
            this._reserved._selectOptionsHTML = html;
        }
        return this._reserved._selectOptionsHTML;
    };
}).call(Enum.prototype);

Bạn có thể khởi tạo nó như thế này:

var enum1 = new Enum({
    item1: 0,
    item2: 1,
    item3: 2
});

Để tìm nạp một giá trị (như Enums trong C #):

var val2 = enum1.item2;

Để tìm nạp tên cho một giá trị (có thể mơ hồ khi đặt cùng một giá trị cho các tên khác nhau):

var name1 = enum1.GetName(0);  // "item1"

Để có được một mảng với mỗi tên và giá trị trong một đối tượng:

var arr = enum1.GetObjArr();

Sẽ tạo ra:

[{ Name: "item1", Value: 0}, { ... }, ... ]

Bạn cũng có thể dễ dàng nhận các tùy chọn chọn html:

var html = enum1.GetSelectOptionsHTML();

Mà giữ:

"<option value='0'>item1</option>..."

Mặc dù chỉ có các phương thức tĩnh (và không phải thuộc tính tĩnh) được hỗ trợ trong ES2015 (cũng xem tại đây , §15.2.2.2), bạn có thể sử dụng cách bên dưới với Babel với es2015cài đặt sẵn:

class CellState {
    v: string;
    constructor(v: string) {
        this.v = v;
        Object.freeze(this);
    }
    static EMPTY       = new CellState('e');
    static OCCUPIED    = new CellState('o');
    static HIGHLIGHTED = new CellState('h');
    static values      = function(): Array<CellState> {
        const rv = [];
        rv.push(CellState.EMPTY);
        rv.push(CellState.OCCUPIED);
        rv.push(CellState.HIGHLIGHTED);
        return rv;
    }
}
Object.freeze(CellState);

Tôi thấy điều này hoạt động như mong đợi ngay cả trên các mô-đun (ví dụ: nhập CellStateenum từ mô-đun khác) và cả khi tôi nhập mô-đun bằng Webpack.

Ưu điểm phương pháp này có hơn hầu hết các câu trả lời khác là bạn có thể sử dụng nó cùng với một loại tĩnh kiểm tra (ví dụ như dòng chảy ) và bạn có thể khẳng định, tại thời gian phát triển sử dụng kiểm tra kiểu tĩnh, mà các biến của bạn, các thông số, vv là các cụ CellState" enum "thay vì một số enum khác (sẽ không thể phân biệt nếu bạn sử dụng các đối tượng hoặc ký hiệu chung).

cập nhật

Đoạn mã trên có một thiếu sót ở chỗ nó cho phép người ta tạo thêm các đối tượng loại CellState(mặc dù người ta không thể gán chúng cho các trường tĩnh CellStatekể từ khi nó bị đóng băng). Tuy nhiên, mã tinh tế hơn dưới đây cung cấp các lợi thế sau:

1. không có nhiều đối tượng loại CellStatecó thể được tạo ra
2. bạn được đảm bảo rằng không có hai trường hợp enum nào được gán cùng một mã
3. phương thức tiện ích để lấy lại enum từ một chuỗi đại diện

4. các valueshàm trả về tất cả các trường hợp của enum không nhất thiết phải tạo ra giá trị lợi nhuận trong, tay (và dễ bị lỗi) cách trên.

   'use strict';
   
   class Status {
   
   constructor(code, displayName = code) {
       if (Status.INSTANCES.has(code))
           throw new Error(`duplicate code value: [${code}]`);
       if (!Status.canCreateMoreInstances)
           throw new Error(`attempt to call constructor(${code}`+
          `, ${displayName}) after all static instances have been created`);
       this.code        = code;
       this.displayName = displayName;
       Object.freeze(this);
       Status.INSTANCES.set(this.code, this);
   }
   
   toString() {
       return `[code: ${this.code}, displayName: ${this.displayName}]`;
   }
   static INSTANCES   = new Map();
   static canCreateMoreInstances      = true;
   
   // the values:
   static ARCHIVED    = new Status('Archived');
   static OBSERVED    = new Status('Observed');
   static SCHEDULED   = new Status('Scheduled');
   static UNOBSERVED  = new Status('Unobserved');
   static UNTRIGGERED = new Status('Untriggered');
   
   static values      = function() {
       return Array.from(Status.INSTANCES.values());
   }
   
   static fromCode(code) {
       if (!Status.INSTANCES.has(code))
           throw new Error(`unknown code: ${code}`);
       else
           return Status.INSTANCES.get(code);
   }
   }
   
   Status.canCreateMoreInstances = false;
   Object.freeze(Status);
   exports.Status = Status;

cách es7, (lặp, đóng băng), cách sử dụng:

const ThreeWiseMen = new Enum('Melchior', 'Caspar', 'Balthazar')

for (let name of ThreeWiseMen)
    console.log(name)


// with a given key
let key = ThreeWiseMen.Melchior

console.log(key in ThreeWiseMen) // true (string conversion, also true: 'Melchior' in ThreeWiseMen)

for (let entry from key.enum)
     console.log(entry)


// prevent alteration (throws TypeError in strict mode)
ThreeWiseMen.Me = 'Me too!'
ThreeWiseMen.Melchior.name = 'Foo'