Tengo un menú con 3 grupos de casillas de verificación que se usarán para filtrar elementos en una página. Son store , city y level . Al marcar cualquier casilla en cualquiera de los grupos, agregue el valor a la matriz correspondiente en un objeto que se ve así:

 items = { store: [], city: [], level: [] }

El valor predeterminado es que todos los elementos estén visibles y que no haya casillas de verificación marcadas. Cuando las casillas están marcadas, sólo los elementos correspondientes a

Cada vez que se marca o desmarca una casilla, se filtran los elementos. Primero, los artículos se filtran por store y city y luego ese subconjunto de artículos se filtra aún más por level . Si no se marcan casillas de level , se muestran todos los niveles, pero si se marca alguno, solo se muestran las store/city marcadas de los level marcados.

Entonces mi objeto puede verse así

 itms = { store: [ 'north', 'evans', 'dodge' ], city: [ 'boston', 'miami', ], level: [ 'gold', 'silver' ] }

Al final, necesito una cadena que se vea así:
.north.gold,.north.silver,.evans.gold,.evans.silver,.dodge.gold,.dodge.silver,.boston.gold,.boston.silver,.miami.gold,.miami.silver, - el orden no importa

Si mi objeto se viera así:

 items = { store: [ 'north', 'evans', 'dodge' ], cite: [ 'miami' ], level: [] }

Necesitaría una cadena que se vea así:
.north,.evans,.dodge,.miami

Con suerte, entiendes la esencia...

Para derivar la cadena correctamente formateada del objeto, estoy haciendo algo, lo que estoy bastante seguro es terriblemente ineficiente, iterando:

 for (let [key, value] of Object.entries(items)) { value.forEach(item => { if(key !== 'level') { finalSelectors.push(`.${item}`); if (key === 'city') { finalSelectors.push(`.${item}_child`); } } }); } let selectorsArr = finalSelectors; const reFinalSelectors = []; const selectedLevels = items.level; if(selectedLevels.length) { if(items.city.length || items.location.length) { finalSelectors.forEach(selector => { selectedLevels.forEach(level => { reFinalSelectors.push(`.${level}${selector}`); }); }); } else { selectedLevels.forEach(level => { reFinalSelectors.push(`.${level}`); }); } selectorsArr = reFinalSelectors; }

Ni siquiera sé por dónde empezar a hacer esto de manera más eficiente, ya que estoy empezando a aprender a usar las funciones de matriz y no tengo una idea muy buena de las más avanzadas como Array.reduce() . Cualquier sugerencia o ayuda sería muy apreciada.