Mehrere "beinhaltet" innerhalb einer Funktion

Question

Ich bin auf der Suche nach einem Weg, um sowohl die 'fit' und 'gif' Tasten in meinem Objekt zugreifen. Im Moment kann ich nur das eine oder das andere auf der Seite anzeigen - "fit" ist ein Bild und "gif" ist ein gif.

Ich denke, vielleicht könnte ich .match aber ich bin nicht wirklich sicher, die richtige Syntax

Dank

const sizeMappings = { 
master: '1280', 
    small: '192w', 
    small_fit: '192w', 
    medium: '384w', 
    medium_low_res: '288w', 
    medium_fit: '384w', 
    medium_gif: '384w', 
    medium_fit_low_res: '288w', 
    large: '768w', 
    large_fit: '768w', 
    large_gif: '768w', 
    xlarge: '1280w', 
    xlarge_fit: '1280w', 
} 

const getSrcSet = (renditions, fit, gif) => { 
    const sizes = Object.keys(sizeMappings) 
    .map((key) => { 
     if (fit && !key.includes('fit')) return null 
     const mapping = `${renditions[key]} ${sizeMappings[key]}` 
     return mapping 
    }) 

    return sizes 
    .filter(el => el !== null) 
    .join(',') 
} 

Answer 1

Ich würde filter() anstelle von map() verwenden, da Sie tatsächlich suchen, um eine Teilmenge Ihres Arrays zu extrahieren. Dann passen Sie einfach jede Taste an, um den gegebenen Größennamen zu haben + "_gif" oder Größenname + "_fit".

const sizeMappings = { 
 
    master: '1280', 
 
    small: '192w', 
 
    small_fit: '192w', 
 
    medium: '384w', 
 
    medium_low_res: '288w', 
 
    medium_fit: '384w', 
 
    medium_gif: '384w', 
 
    medium_fit_low_res: '288w', 
 
    large: '768w', 
 
    large_fit: '768w', 
 
    large_gif: '768w', 
 
    xlarge: '1280w', 
 
    xlarge_fit: '1280w', 
 
} 
 

 
let size = "large"; //change me 
 

 
let arr = Object.keys(sizeMappings).filter(
 
    (key) => (key === size + "_fit" || key === size + "_gif") 
 
); 
 

 
console.log(arr)

Answer 2

Filter zuerst und dann die Ergebnisse der Karte, wie Sie wollen:

const getSrcSet = (renditions, fit, gif) => { 
    return Object.keys(sizeMappings) 
    .filter(key => fit && key.includes('fit') || gif && key.includes('gif')) 
    .map(key => `${renditions[key]} ${sizeMappings[key]}`) 
    .join(',') 
    }