Necesito reducir la complejidad de este "algoritmo". Ahora, necesito ejecutar secuencialmente todos los casos, y luego también sobre los elementos de la matriz, y está claro que esta es la ruta menos óptima.
Sin embargo, no sé cómo hacer esto. ¿Cómo se puede acortar el código para construcciones similares? Estoy seguro de que esto es posible. Dime por favor :)
const types = { pictures: ["jpeg", "png", "apng", "avif", "gif", "jpg", ".webp"], videos: ["mp4", "webm", "avchd", "flv", "mov", "wmv", "mkv", "avi"], audio: ["mp3", "flac", "wav", "ogg"], disk: ["iso"], doc: ["doc", "docx"], pp: ["ppt", "pptx", "pps", "ppsx", "pot", "potx"], zip: ["zip", "rar", "tar", "arj", "cab", "lzh"], css: ["css", "scss", "sass"], }; export function setTypeIcon(type) { const t = type.toLowerCase(); switch (t) { case "dir": return dir; case "txt": return txt; case types.zip.find((el) => el === t): return zip; case types.pictures.find((el) => el === t): return img; case types.videos.find((el) => el === t): return vid; case types.audio.find((el) => el === t): return aud; case types.doc.find((el) => el === t): return doc; case types.pp.find((el) => el === t): return powerpoint; case types.disk.find((el) => el === t): return iso; case "xls": return excel; case "pdf": return pdf; case "otf": return font; case "js": return js; case types.css.find((el) => el === t): return css; case "psd": return psd; case "svg": return svg; default: return def; } }Puede usar un Map y buscar directamente el icono por extensión de archivo:
const icons = new Map([ {icon: dir, types: ["dir"]}, {icon: txt, types: ["txt"]}, {icon: zip, types: ["zip", "rar", "tar", "arj", "cab", "lzh"]}, {icon: img, types: ["jpeg", "png", "apng", "avif", "gif", "jpg", ".webp"]}, {icon: vid, types: ["mp4", "webm", "avchd", "flv", "mov", "wmv", "mkv", "avi"]}, {icon: aud, types: ["mp3", "flac", "wav", "ogg"]}, {icon: doc, types: ["doc", "docx"]}, {icon: powerpoint, types: ["ppt", "pptx", "pps", "ppsx", "pot", "potx"]}, {icon: iso, types: ["iso"]}, {icon: excel, types: ["xls"]}, {icon: pdf, types: ["pdf"]}, {icon: font, types: ["otf"]}, {icon: js, types: ["js"]}, {icon: css, types: ["css", "scss", "sass"]}, {icon: psd, types: ["psd"]}, {icon: svg, types: ["svg"]}, ].flatMap(({icon, types}) => types.map(type => [type, icon]))); export function setTypeIcon(type) { const t = type.toLowerCase(); if (icons.has(t)) return icons.get(t); else return def; }Debido a que parte de lo que cambia es una importación, creo que la forma de hacer que el código sea menos repetitivo sería usar la importación dinámica en su lugar. Desafortunadamente, esto requerirá la introducción de la capacidad de manejar la naturaleza asíncrona de la importación dinámica. Podrías hacer algo como:
const types = [ { extensions: ["jpeg", "png", "apng", "avif", "gif", "jpg", ".webp"], imgName: 'image', // used to map to, eg, "../assets/images/filetypes/image.png" }, { extensions: ["mp4", "webm", "avchd", "flv", "mov", "wmv", "mkv", "avi"], imgName: 'vid', }, // ... ]; const getImg = (imgName) => import(`../assets/images/filetypes/${imgName}.png`); export const setTypeIcon = (type) => { const matchingType = types.find(({ extensions }) => extensions.includes(type.toLowerCase()); return getImg(matchingType || 'def'); };Y luego tendrá que consumir la Promesa en la persona que llama y extraer el valor que desea de ella.
También puede realizar todas las importaciones por adelantado, al comienzo de su aplicación, y luego colocarlas en la estructura de types , para que getImg sea sincrónico. (inyección de dependencia)