Hàm jQuery .each() với các hàm mũi tên ES6

Question

Tôi có mã ES6 này, sau khi tôi biên dịch mã này với Babel thành ES5, gọi số this bên trong số gọi .each trở thành undefined. Làm sao để giải quyết vấn đề này?

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

Giải pháp của tôi là không sử dụng this, nhưng sử dụng các biến được chuyển đến hàm gọi lại. Cái đầu tiên là chỉ mục và cái thứ hai cung cấp cho bạn chính phần tử DOM.

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

Đó là bởi vì giá trị trung bình của this là không giống nhau trong các chức năng mũi tên.

this

chức năng mũi tên nắm bắt được giá trị này của bối cảnh kèm theo,

Chức năng each() qua các yếu tố như là đối số thứ hai để gọi lại.

Nhưng một giải pháp thích hợp hơn cho bạn sẽ cũng sử dụng .map() thay vì each()

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