Enums trong Javascript với ES6

Tôi đang xây dựng lại một dự án Java cũ trong Javascript và nhận ra rằng không có cách nào tốt để thực hiện enum trong JS.

Điều tốt nhất tôi có thể đưa ra là:

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

Việc constgiữ Colorskhông bị gán lại và đóng băng nó sẽ ngăn chặn các khóa và giá trị. Tôi đang sử dụng các Biểu tượng để nó Colors.REDkhông bằng 0hoặc bất cứ thứ gì khác ngoài chính nó.

Có một vấn đề với công thức này? Có cách nào tốt hơn?

(Tôi biết câu hỏi này có một chút lặp lại, nhưng tất cả các Câu hỏi trước đó đều khá cũ và ES6 cung cấp cho chúng tôi một số khả năng mới.)

BIÊN TẬP:

Một giải pháp khác, liên quan đến vấn đề tuần tự hóa, nhưng tôi tin rằng vẫn có vấn đề về địa hạt:

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

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

Bằng cách sử dụng các tham chiếu đối tượng làm các giá trị, bạn sẽ có được sự tránh va chạm giống như các Biểu tượng.

Có một vấn đề với công thức này?

Tôi không thấy cái nào cả.

Có cách nào tốt hơn?

Tôi sẽ thu gọn hai tuyên bố thành một:

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

Nếu bạn không thích bản tóm tắt, như các Symbolcuộc gọi lặp đi lặp lại , tất nhiên bạn cũng có thể viết một hàm trợ giúp makeEnumtạo ra điều tương tự từ danh sách các tên.

Trong khi sử dụng Symbollàm giá trị enum hoạt động tốt cho các trường hợp sử dụng đơn giản, nó có thể hữu ích để cung cấp các thuộc tính cho enum. Điều này có thể được thực hiện bằng cách sử dụng một Objectgiá trị enum chứa các thuộc tính.

Ví dụ: chúng ta có thể cung cấp cho mỗi Colorstên và giá trị hex:

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

Bao gồm các thuộc tính trong enum tránh việc phải viết các switchcâu lệnh (và có thể quên các trường hợp mới cho các câu lệnh chuyển đổi khi một enum được mở rộng). Ví dụ này cũng cho thấy các thuộc tính và kiểu enum được ghi lại bằng chú thích enum của JSDoc .

Bình đẳng công trình như mong đợi với Colors.RED === Colors.REDviệc true, và Colors.RED === Colors.BLUElà false.

Như đã đề cập ở trên, bạn cũng có thể viết một makeEnum()hàm trợ giúp:

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

Sử dụng nó như thế này:

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

Đây là cách tiếp cận cá nhân của tôi.

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

Kiểm tra cách TypeScript làm điều đó . Về cơ bản họ làm như sau:

const MAP = {};

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

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

Sử dụng các biểu tượng, đóng băng đối tượng, bất cứ điều gì bạn muốn.

Nếu bạn không cần ES6 thuần túy và có thể sử dụng Bản mô tả, nó có một điều hay enum:

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

Bạn có thể kiểm tra Enumify , một thư viện rất hay và nổi bật cho enum ES6.

Có lẽ giải pháp này? :)

function createEnum (array) {
  return Object.freeze(array
    .reduce((obj, item) => {
      if (typeof item === 'string') {
        obj[item.toUpperCase()] = Symbol(item)
      }
      return obj
    }, {}))
}

Thí dụ:

createEnum(['red', 'green', 'blue']);

> {RED: Symbol(red), GREEN: Symbol(green), BLUE: Symbol(blue)}

Tôi thích cách tiếp cận của @ tonethar, với một chút cải tiến và đào sâu vì lợi ích của việc hiểu rõ hơn về nền tảng của hệ sinh thái ES6 / Node.js. Với một nền tảng ở phía máy chủ của hàng rào, tôi thích cách tiếp cận của phong cách chức năng xung quanh các nguyên thủy của nền tảng, điều này giảm thiểu sự phình to mã, độ dốc trơn trượt vào thung lũng quản lý của bóng tối của cái chết do sự ra đời của các loại mới và tăng khả năng đọc - làm rõ hơn ý định của giải pháp và thuật toán.

Giải pháp với TDD , ES6 , Node.js , Lodash , Jest , Babel , ESLint

// ./utils.js
import _ from 'lodash';

const enumOf = (...args) =>
  Object.freeze( Array.from( Object.assign(args) )
    .filter( (item) => _.isString(item))
    .map((item) => Object.freeze(Symbol.for(item))));

const sum = (a, b) => a + b;

export {enumOf, sum};
// ./utils.js

// ./kittens.js
import {enumOf} from "./utils";

const kittens = (()=> {
  const Kittens = enumOf(null, undefined, 'max', 'joe', 13, -13, 'tabby', new 
    Date(), 'tom');
  return () => Kittens;
})();

export default kittens();
// ./kittens.js 

// ./utils.test.js
import _ from 'lodash';
import kittens from './kittens';

test('enum works as expected', () => {
  kittens.forEach((kitten) => {
    // in a typed world, do your type checks...
    expect(_.isSymbol(kitten));

    // no extraction of the wrapped string here ...
    // toString is bound to the receiver's type
    expect(kitten.toString().startsWith('Symbol(')).not.toBe(false);
    expect(String(kitten).startsWith('Symbol(')).not.toBe(false);
    expect(_.isFunction(Object.valueOf(kitten))).not.toBe(false);

    const petGift = 0 === Math.random() % 2 ? kitten.description : 
      Symbol.keyFor(kitten);
    expect(petGift.startsWith('Symbol(')).not.toBe(true);
    console.log(`Unwrapped Christmas kitten pet gift '${petGift}', yeee :) 
    !!!`);
    expect(()=> {kitten.description = 'fff';}).toThrow();
  });
});
// ./utils.test.js

Đây là cách tiếp cận của tôi, bao gồm một số phương pháp trợ giúp

export default class Enum {

    constructor(name){
        this.name = name;
    }

    static get values(){
        return Object.values(this);
    }

    static forName(name){
        for(var enumValue of this.values){
            if(enumValue.name === name){
                return enumValue;
            }
        }
        throw new Error('Unknown value "' + name + '"');
    }

    toString(){
        return this.name;
    }
}

-

import Enum from './enum.js';

export default class ColumnType extends Enum {  

    constructor(name, clazz){
        super(name);        
        this.associatedClass = clazz;
    }
}

ColumnType.Integer = new ColumnType('Integer', Number);
ColumnType.Double = new ColumnType('Double', Number);
ColumnType.String = new ColumnType('String', String);

bạn cũng có thể sử dụng gói es6-enum ( https://www.npmjs.com/package/es6-enum ). Nó rất dễ sử dụng. Xem ví dụ dưới đây:

import Enum from "es6-enum";
const Colors = Enum("red", "blue", "green");
Colors.red; // Symbol(red)

Đây là cách triển khai Java của tôi trong JavaScript.

Tôi cũng bao gồm các bài kiểm tra đơn vị.

const main = () => {
  mocha.setup('bdd')
  chai.should()

  describe('Test Color [From Array]', function() {
    let Color = new Enum('RED', 'BLUE', 'GREEN')
    
    it('Test: Color.values()', () => {
      Color.values().length.should.equal(3)
    })

    it('Test: Color.RED', () => {
      chai.assert.isNotNull(Color.RED)
    })

    it('Test: Color.BLUE', () => {
      chai.assert.isNotNull(Color.BLUE)
    })

    it('Test: Color.GREEN', () => {
      chai.assert.isNotNull(Color.GREEN)
    })

    it('Test: Color.YELLOW', () => {
      chai.assert.isUndefined(Color.YELLOW)
    })
  })

  describe('Test Color [From Object]', function() {
    let Color = new Enum({
      RED   : { hex: '#F00' },
      BLUE  : { hex: '#0F0' },
      GREEN : { hex: '#00F' }
    })

    it('Test: Color.values()', () => {
      Color.values().length.should.equal(3)
    })

    it('Test: Color.RED', () => {
      let red = Color.RED
      chai.assert.isNotNull(red)
      red.getHex().should.equal('#F00')
    })

    it('Test: Color.BLUE', () => {
      let blue = Color.BLUE
      chai.assert.isNotNull(blue)
      blue.getHex().should.equal('#0F0')
    })

    it('Test: Color.GREEN', () => {
      let green = Color.GREEN
      chai.assert.isNotNull(green)
      green.getHex().should.equal('#00F')
    })

    it('Test: Color.YELLOW', () => {
      let yellow = Color.YELLOW
      chai.assert.isUndefined(yellow)
    })
  })

  mocha.run()
}

class Enum {
  constructor(values) {
    this.__values = []
    let isObject = arguments.length === 1
    let args = isObject ? Object.keys(values) : [...arguments]
    args.forEach((name, index) => {
      this.__createValue(name, isObject ? values[name] : null, index)
    })
    Object.freeze(this)
  }

  values() {
    return this.__values
  }

  /* @private */
  __createValue(name, props, index) {
    let value = new Object()
    value.__defineGetter__('name', function() {
      return Symbol(name)
    })
    value.__defineGetter__('ordinal', function() {
      return index
    })
    if (props) {
      Object.keys(props).forEach(prop => {
        value.__defineGetter__(prop, function() {
          return props[prop]
        })
        value.__proto__['get' + this.__capitalize(prop)] = function() {
          return this[prop]
        }
      })
    }
    Object.defineProperty(this, name, {
      value: Object.freeze(value),
      writable: false
    })
    this.__values.push(this[name])
  }

  /* @private */
  __capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
  }
}

main()

.as-console-wrapper {
  top: 0;
  max-height: 100% !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.2.5/mocha.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.2.5/mocha.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.2.0/chai.js"></script>
<!--

public enum Color {
  RED("#F00"),
  BLUE("#0F0"),
  GREEN("#00F");
  
  private String hex;
  public String getHex()  { return this.hex;  }
  
  private Color(String hex) {
    this.hex = hex;
  }
}

-->
<div id="mocha"></div>

Bạn có thể sử dụng Bản đồ ES6

const colors = new Map([
  ['RED', 'red'],
  ['BLUE', 'blue'],
  ['GREEN', 'green']
]);

console.log(colors.get('RED'));