带有ES6箭头功能的jQuery .each()函数

Question

我有这个ES6代码,在用Babel编译它到ES5后,this内部.each的回调就变成了undefined.我该如何解决这个问题？

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

我的解决方案是根本不使用this,而是使用传递给回调函数的变量.第一个是索引,第二个是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

那是因为this箭头函数的平均值不同.

这个

箭头函数捕获封闭上下文的this值,

的每个()函数传递元件作为第二个参数回调.

但是更合适的解决方案是使用.map()而不是每个()

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