Utiliser reduce pour extraire un résultat d'un tableau JavaScript

Publié le 19/07/2020 • Mis à jour le 19/07/2020


English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧 Close

Dans ce bout de code nous allons voir comment extraire un résultat d'un tableau JavaScript en utilisant la fonction reduce et un callback. Tout d'abord, on définit deux callbacks; ils vont nous permettre de tester si un article est un post ou un snippet. Ensuite, on utilise ces deux "réducteurs" comme premier paramètre de la fonction reduce. La valeur initiale est bien sûr de zéro puisqu'on fait une addition. Ouvrez votre console JavaScript pour vérifier les résultats.


/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  methods: {
    snippet103 () {
      const articles = [
        { label: 'Article 1', type: 1 },
        { label: 'Snippet 1', type: 2 },
        { label: 'Snippet 2', type: 2 }
      ]
      const isPost = (accumulator, article) => accumulator + (article.type === 1 ? 1 : 0)
      const isSnippet = (accumulator, article) => accumulator + (article.type === 2 ? 1 : 0)
      console.log('The articles array contains ' + articles.reduce(isPost, 0) + ' post(s).')
      console.log('The articles array contains ' + articles.reduce(isSnippet, 0) + ' snippets(s).')
    }
  },
  mounted () {
    if (this.isArticle(103)) {
      this.snippet103()
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Plus sur le web  Snippet aléatoire