Funzione jQuery .each() con funzioni freccia ES6

Question

Ho questo codice ES6, dopo averlo compilato con Babel in ES5 il this all'interno della chiamata .each diventa undefined. Come posso risolvere questo problema?

let mediaBoxes = $(".now-thumbnail"); 
let titles = []; 
mediaBoxes.each(() => { 
     let obj = { 
       index: i, 
       title: $(this).find(".now-thumbnail-bottomtext").text().trim() 
      }; 
    titles.push(obj); 
}); 

Answer 1

La mia soluzione è non utilizzare this a tutti, ma utilizzare le variabili che sono passati alla funzione di callback. Il primo è l'indice e il secondo ti dà l'elemento DOM stesso.

let mediaBoxes = $(".now-thumbnail"); 
let titles = []; 
mediaBoxes.each((index, element) => { 
       let obj = { 
        index: index, 
        title: $(element).find(".now-thumbnail-bottomtext").text().trim() 
       }; 
       titles.push(obj); 
}); 

Answer 2

Ciò perché la media di this non è la stessa nelle funzioni freccia.

this

funzioni Arrow catturare il presente valore del contesto racchiude,

La funzione each() passa l'elemento come secondo argomento al callback.

Ma una soluzione più appropriata per voi sarà di utilizzare anche .map() invece di each()

let mediaBoxes = $(".now-thumbnail"); 
let titles = mediaBoxes.map((i, el) => { 
    return { 
    index: i, 
    title: $(el).find(".now-thumbnail-bottomtext").text().trim() 
    }; 
}).get();