Enum dalam Javascript dengan ES6

Saya membangun kembali proyek Java lama di Javascript, dan menyadari bahwa tidak ada cara yang baik untuk melakukan enum di JS.

Yang terbaik yang bisa saya dapatkan adalah:

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

The constterus Colorsdari yang ditugaskan kembali, dan pembekuan mencegah bermutasi kunci dan nilai-nilai. Saya menggunakan Simbol sehingga Colors.REDtidak sama dengan 0, atau apa pun selain itu sendiri.

Apakah ada masalah dengan formulasi ini? Apakah ada cara yang lebih baik?

(Saya tahu pertanyaan ini sedikit berulang, tetapi semua T / As sebelumnya cukup lama, dan ES6 memberi kita beberapa kemampuan baru.)

EDIT:

Solusi lain, yang berhubungan dengan masalah serialisasi, tapi saya percaya masih memiliki masalah ranah:

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

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

Dengan menggunakan referensi objek sebagai nilainya, Anda mendapatkan tabrakan-penghindaran yang sama dengan Simbol.

Apakah ada masalah dengan formulasi ini?

Saya tidak melihat apa pun.

Apakah ada cara yang lebih baik?

Saya akan menciutkan dua pernyataan menjadi satu:

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

Jika Anda tidak menyukai boilerplate, seperti Symbolpanggilan berulang , tentu saja Anda juga dapat menulis fungsi pembantu makeEnumyang menciptakan hal yang sama dari daftar nama.

Sementara menggunakan Symbolkarena nilai enum berfungsi dengan baik untuk kasus penggunaan sederhana, akan berguna untuk memberikan properti ke enum. Ini dapat dilakukan dengan menggunakan Objectsebagai nilai enum yang mengandung properti.

Sebagai contoh, kita dapat memberikan masing-masing Colorsnama dan nilai 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" }
});

Termasuk properti dalam enum menghindari keharusan menulis switchpernyataan (dan mungkin melupakan kasus baru dengan pernyataan beralih ketika enum diperpanjang). Contoh ini juga memperlihatkan properti enum dan tipe yang didokumentasikan dengan anotasi enum JSDoc .

Kesetaraan bekerja seperti yang diharapkan dengan Colors.RED === Colors.REDkeberadaan true, dan Colors.RED === Colors.BLUEkeberadaan false.

Seperti disebutkan di atas, Anda juga bisa menulis makeEnum()fungsi pembantu:

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

Gunakan seperti ini:

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

Ini adalah pendekatan pribadi saya.

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

Periksa bagaimana TypeScript melakukannya . Pada dasarnya mereka melakukan hal berikut:

const MAP = {};

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

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

Gunakan simbol, bekukan objek, apa pun yang Anda inginkan.

Jika Anda tidak membutuhkan ES6 murni dan dapat menggunakan TypeScript, itu bagus enum:

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

Anda dapat memeriksa Enumify , pustaka ES6 yang sangat bagus dan berfitur lengkap.

Mungkin solusi ini? :)

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

Contoh:

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

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

Saya lebih suka pendekatan @ tonethar, dengan sedikit peningkatan dan menggali untuk kepentingan memahami dengan lebih baik dasar-dasar ekosistem ES6 / Node.js. Dengan latar belakang di sisi server pagar, saya lebih suka pendekatan gaya fungsional di sekitar platform primitif, ini meminimalkan kode mengasapi, lereng licin ke lembah manajemen negara bayangan bayang-bayang karena pengenalan jenis baru dan peningkatan keterbacaan - memperjelas maksud solusi dan algoritma.

Solusi dengan 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

Inilah pendekatan saya, termasuk beberapa metode pembantu

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

Anda juga dapat menggunakan paket es6-enum ( https://www.npmjs.com/package/es6-enum ). Ini sangat mudah digunakan. Lihat contoh di bawah ini:

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

Berikut ini adalah implementasi enumerasi Java saya dalam JavaScript.

Saya juga menyertakan unit test.

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>

Anda bisa menggunakan Peta ES6

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

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