En JS, actualmente tengo una función que usa el operador ternario, necesito verificar los valores de los números entre 0 y 1, pero esos números podrían tener lugares decimales. Hasta ahora he hecho esto:
const checkNumbers = (e: any) => { const checkNum = e.value === 0 && e.value < 0.025 ? 'pink' : e.value >= 0.025 && e.value < 0.050 ? 'blue' : e.value >= 0.050 && e.value < 0.075 ? 'yellow' : 'white' return checkNum; }Entonces, esto actualmente verifica los números entre 0 y 0.075, pero ¿qué pasa si los números son 0.2, 0.3, etc.? ¿Qué necesito para hacerlo de esta manera agregando más condiciones? ¿O hay una mejor manera de hacerlo?
Lo haría teniendo una matriz que proporcione el límite superior de un rango y el color para ese rango, luego recorriendo la matriz para encontrar el color apropiado. De esa manera, no repite valores (que siempre pide el doble):
const colorRanges = [ {max: 0.025, color: "pink"}, {max: 0.05, color: "blue"}, {max: 0.075, color: "yellow"}, {max: Infinity, color: "white"}, // default ]; const checkNumbers = (e: any) => { const { value } = e; for (const {max, color} of colorRanges) { if (value < max) { return color; } } throw new Error(`Unexpectedly reached end of 'colorRanges' array for value ${value}`); };Ejemplo en vivo:
const colorRanges = [ {max: 0.025, color: "pink"}, {max: 0.05, color: "blue"}, {max: 0.075, color: "yellow"}, {max: Infinity, color: "white"}, // default ]; const checkNumbers = (e/*: any*/) => { const { value } = e; for (const {max, color} of colorRanges) { if (value < max) { return color; } } throw new Error(`Unexpectedly reached end of 'colorRanges' array for value ${value}`); }; function test(value, expect) { const color = checkNumbers({value}); console.log(`${value.toLocaleString()}: ${color} ${color === expect ? "Ok" : "***ERROR***"}`); } test(-42, "pink"); test(0, "pink"); test(0.0125, "pink"); test(0.0325, "blue"); test(0.06, "yellow"); test(0.08, "white"); test(7_123_412, "white"); Agregar nuevos rangos (como algo para manejar 0.2 o 0.3 ) es solo una cuestión de agregarlos en el lugar relevante de la matriz:
const colorRanges = [ {max: 0.025, color: "pink"}, {max: 0.05, color: "blue"}, {max: 0.075, color: "yellow"}, {max: 0.4, color: "fushia"}, // *** handles 0.2 and 0.3 {max: Infinity, color: "white"}, // default ];Si todos sus puntos de ruptura están separados por 0.025, podría multiplicar e.value por 40, para hacer que los puntos de ruptura estén separados por 1. Luego, podría extraer un índice correspondiente de una matriz de colores.
const colours = ['pink', 'blue', 'yellow', 'white']; const index = Math.floor(e.value * 40); return colours[index] || 'white'; // fallback to white if something goes wrong