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

Posted 2023-02-22

【中文标题】带有 ES6 箭头函数的 jQuery .each() 函数

【英文标题】：jQuery .each() function with ES6 arrow functions [duplicate]

【发布时间】：2016-08-06 21:16:58

【问题描述】：

我有这个 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);
);

【参考方案1】：

那是因为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();

【讨论】：

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

@Tushar 如果内容太大，我喜欢把它分成一个块

我还要补充一点，这里不需要箭头函数只是为了简洁的语法，并且没有返回任何内容。在$(this) 将指向正确元素的地方可以使用匿名函数。

@Tushar 我会立即支持这个答案。我认为这里的箭头绝对没有任何好处。即使以简洁为目标，写function() 的字符数也与(i, el) => 完全相同

【参考方案2】：

我的解决方案是根本不使用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);
 );