ES6 ile Javascriptteki numaralandırmalar

Javascript'te eski bir Java projesi oluşturuyorum ve JS'de numaralandırma yapmanın iyi bir yolu olmadığını fark ettim.

En iyi ben gelebilir:

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

constTutan Colorsyeniden edilmesini ve bu anahtarlar ve değerler mutasyona önler dondurulması. Sembolleri kullanıyorum Colors.RED, bu eşit değil 0ya da başka bir şey değil.

Bu formülasyonda bir problem var mı? Daha iyi bir yol var mı?

(Bu sorunun biraz tekrarlandığını biliyorum, ancak önceki Q / As'ın tamamı oldukça eski ve ES6 bize bazı yeni yetenekler veriyor.)

DÜZENLE:

Serileştirme sorunu ile ilgilenen başka bir çözüm, ancak hala bölge sorunları olduğuna inanıyorum:

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

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

Değer olarak nesne referanslarını kullanarak, Sembollerle aynı çarpışmadan kaçınma elde edersiniz.

Bu formülasyonda bir problem var mı?

Ben görmüyorum.

Daha iyi bir yol var mı?

İki ifadeyi bire daraltırdım:

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

Boilerplate'i sevmiyorsanız, tekrarlanan Symbolçağrılar gibi, elbette makeEnumbir isim listesinden aynı şeyi yaratan bir yardımcı işlev de yazabilirsiniz .

Kullanarak iken Symbolsıralama değeri basit kullanım durumları için çalışıyor olarak, çeteleler için özellikler kazandırmak için kullanışlı olabilir. Bu Object, özellikleri içeren bir enum değeri olarak kullanılarak yapılabilir .

Örneğin, her birine Colorsbir ad ve onaltılık değer verebiliriz :

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

Enum'a özellikler eklemek switchifadeler yazmak zorunda kalmaz (ve bir enum genişletildiğinde anahtar ifadelerine yeni vakaları unutmaktan) kaçınır . Örnek ayrıca JSDoc enum ek açıklamasıyla belgelenen enum özelliklerini ve türlerini gösterir .

Eşitlik, Colors.RED === Colors.REDvarlık trueve Colors.RED === Colors.BLUEvarlık ile beklendiği gibi çalışır false.

Yukarıda belirtildiği gibi, bir makeEnum()yardımcı işlev de yazabilirsiniz :

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

Şöyle kullanın:

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

Bu benim kişisel yaklaşımım.

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'in bunu nasıl yaptığını kontrol edin . Temel olarak aşağıdakileri yaparlar:

const MAP = {};

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

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

Sembolleri kullanın, nesneyi dondurun, ne istersen.

Saf ES6'ya ihtiyacınız yoksa ve Typescript'i kullanabiliyorsanız, güzel bir şey var enum:

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

Kontrol edebilirsiniz Enumify , ES6 çeteleler için çok iyi ve iyi özellikli kütüphane.

Belki bu çözüm? :)

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

Misal:

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

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

ES6 / Node.js ekosisteminin temelini daha iyi anlamak için @ tonethar'ın yaklaşımını, biraz iyileştirme ve kazma ile tercih ediyorum. Çitin sunucu tarafında bir arka plan ile, platformun ilkelleri etrafında işlevsel stil yaklaşımını tercih ederim, bu yeni tasarımların ortaya çıkması ve artması nedeniyle devletin ölüm gölgesindeki kaygan eğimi, kod bloatını en aza indirir. okunabilirlik - çözümün ve algoritmanın amacını daha açık hale getirir.

İle Çözüm TDD , ES6 , node.js , Lodash , Jest , Babil , 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

İşte bazı yardımcı yöntemler de dahil olmak üzere yaklaşımım

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

es6-enum paketini de kullanabilirsiniz ( https://www.npmjs.com/package/es6-enum ). Kullanımı çok kolay. Aşağıdaki örneğe bakın:

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

İşte JavaScript Java numaralandırma uygulaması.

Ayrıca birim testleri de dahil ettim.

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>

ES6 Haritasını kullanabilirsiniz

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

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