使用ES6箭头函数的jQuery .each()函数

Question

我有这段ES6代码，在使用Babel将其编译为ES5后，.each的回调函数中的this变成了undefined。我该如何解决这个问题？

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

- Tekeste Kidanu

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);
});

- Tekeste Kidanu

Answer 2

这是因为箭头函数中this的均值与其他函数不同。

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();

- Arun P Johny

---

我也是这么想的。let titles = $('.now-thumbnail').map((index, element) => ({ index: index, title: $(element).find(".now-thumbnail-bottomtext").text().trim() })).get(); - Tushar

@Tushar 如果内容太大，那我喜欢将其分成块。 - Arun P Johny

我还要补充一点，这里没有必要使用箭头函数仅仅是为了简洁的语法，而且也没有返回值。可以使用匿名函数，在其中 $(this) 将指向正确的元素。 - Tushar

@Tushar 我会立刻点赞那个答案。我完全看不出箭头在这里有任何好处。即使要简洁，写function()和(i, el) =>的字符数是完全一样的。 - CodingIntrigue