0

我通常使用 jQuery 作为完成工作的拐杖，然后继续处理下一个问题。然而，随着向 Rails 6 引入 Stimulus，我希望能够更好地编写 vanilla JS。我在重写以下$.map和$.each行时遇到了困难：

handleSuccess(data) {
  const items = $.map(data, notification => { return notification.template })
  let unreadCount = 0
  $.each(data, (i, notification) => {
    if (notification.unread) {
      unreadCount += 1
    }
  });
  this.unreadCountTarget.innerHTML = unreadCount
  this.itemsTarget.innerHTML = items
}

我自己的尝试并没有真正奏效。

items.forEach(data, (i, notification) => {
   if (notification.unread) {
     unreadCount += 1
   }
 });

 items.forEach(element, (i, notification) => {
   if (notification.unread) {
     unreadCount += 1
   }
 });
4

3 回答 3

1

在您的情况下，您可以转换$.map()为Array.map()，并将计数器和 转换为$.each()调用Array.reduce()。通常$.each()转换为Array.forEach()，但在这种情况下，您想要获取一个数组，并将其转换为数字，而这种转换通常通过归约来完成。

注意：您自己代码中的问题是由参数的顺序引起的 - $.each(index, item)vs. Array.forEach(item, index)。

示例（未测试） - 注释 jQuery 下的香草

handleSuccess(data) {
  // const items = $.map(data, notification => { return notification.template })
  const items = data.map(notification => notification.template)

  // $.each(data, (i, notification) => { if (notification.unread) { unreadCount += 1 }});
  const unreadCount = data.reduce((count, notification, i) => notification.unread ? count + 1 : count, 0)

  this.unreadCountTarget.innerHTML = unreadCount
  this.itemsTarget.innerHTML = items
}
于 2019-11-05T19:18:22.253 回答
1

JavaScript 有自己的原生 map 函数（很久没有出现了，因此 jQuery shim），它与 jQuery 的非常相似。事实上，Array.prototype.map() 和 Array.prototype.forEach() 都非常相似，具有相似的接口，只需以数组的名称开始调用即可。所以不是 jQuery $.map(data, notification => { return notification.template })，而是它data.map(notification => notification.template)或类似的。本机 map() 和 forEach() 之间的唯一区别是 forEach() 将函数应用于数组中的每个项目，而 map() 更进一步，如果正确调用，则返回一个新的结果值数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects /数组/forEach

于 2019-11-05T19:27:10.260 回答
1

尝试这个：

handleSuccess(data){
const items = data.map(notification => notification.template)

let unreadCount = items.reduce(( total, curr) => curr.unread ? total +=1 : total)

this.unreadCountTarget.innerHTML = unreadCount
this.itemsTarget.innerHTML = items
}

代码的最后两行保持不变。

于 2019-11-05T19:28:18.293 回答