Как перевести код jQuery в Vanilla JS - PullRequest
Новая
       44

Как перевести код jQuery в Vanilla JS

0 голосов
/ 05 ноября 2019

Я обычно использую jQuery в качестве опоры, чтобы закончить работу и перейти к следующей проблеме. Однако с введением Stimulus в Rails 6 я бы хотел лучше писать ванильный 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
   }
 });

Ответы [ 3 ]

1 голос
/ 05 ноября 2019

У JavaScript есть своя собственная функция отображения (она долгое время отсутствовала, следовательно, jQuery shim), и она очень похожа на jQuery. На самом деле, Array.prototype.map () и Array.prototype.forEach () очень похожи, с похожими интерфейсами, просто начните свой вызов с имени массива. Так что вместо jQuery $.map(data, notification => { return notification.template }) он data.map(notification => notification.template) или аналогичный. И единственное различие между native 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/Array/forEach

1 голос
/ 05 ноября 2019

Попробуйте: 

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
}

Последние две строки вашего кода не изменились.

1 голос
/ 05 ноября 2019

В вашем случае вы можете преобразовать $.map() в Array.map() и преобразовать счетчик и $.each() в Array.reduce() вызов. часто $.each() преобразуется в Array.forEach(), но в этом случае вы хотите взять массив и преобразовать его в число, и это преобразование обычно выполняется путем уменьшения.

Примечание: проблема в вашемсобственный код вызван порядком параметров - $.each(index, item) против 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
}
...