Así que esto es un poco difícil de explicar, pero básicamente tratando de hacer una forma más eficiente de hacer el siguiente código...
products.forEach(function(item, index){ if(item.sale == false ) { nonSaleItems += createEl(item); } else { saleItems += createEl(item); } }); items.innerHTML += nonSaleItems; items.innerHTML += saleItems;productos es una matriz de objetos donde una de las claves es "venta" y es "falso" o "verdadero" para "venta". La idea detrás de esto es publicar todos los artículos que no están en venta primero, luego los artículos en venta van en segundo lugar; por lo tanto, el código HTML interno de nonSaleItems primero, LUEGO saleItems se agrega en segundo lugar.
Este código funciona perfectamente, pero siento que tiene que haber una forma más eficiente/menos detallada de hacerlo en lugar de dos variables de nonSaleItems y saleItems y luego dos innterHTML.
¿Solo por curiosidad si alguien tenía mejores ideas sobre cómo simplificar esto o tenerlo mejor?
Ya está haciendo un ciclo a través de todos los productos, lo cual es a) necesario yb) lo más eficiente posible.
Lo mejor que puede hacer es hacer que su código sea menos detallado. En este caso, estoy usando un ternario para decidir si usar saleItems o nonSaleItems como lvalue para += createEl(...) :
products.forEach(function(item, index){ ( item.sale ? saleItems : nonSaleItems ) += createEl(item); }); items.innerHTML += nonSaleItems; items.innerHTML += saleItems;EDITAR:
El código anterior no funcionará porque el ternario se evalúa como un valor r, no como un valor l. Consulte Operador ternario de Javascript lvalue .
Sin embargo, puede usar el ternario para evaluar un objeto , que puede ser desreferenciado (consulte https://stackoverflow.com/a/18668615/378779 ):
let saleItems = { html: '' }, nonSaleItems = { html: '' } products.forEach(function(item, index){ ( item.sale ? saleItems : nonSaleItems ).html += createEl(item); }); items.innerHTML += nonSaleItems.html; items.innerHTML += saleItems.html;O, con un solo objeto, pero usando un ternario para determinar la clave:
let html = { sale: '', nonSale: '' }; products.forEach(function(item, index){ html[(item.sale ? 'sale' : 'nonSale')] += createEl(item); }); items.innerHTML += html.nonSale; items.innerHTML += html.sale;