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

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

each()函数将元素作为回调的第二个参数传递。

但更合适的解决方案是使用.map()代替each()

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

带有ES6箭头功能的jQuery .each（）函数

2 个答案: