Métodos de Array em JavaScript

Neste artigo será abordado o uso de alguns métodos de array com Node.js e TypeScript. Os métodos usados são métodos que percorrem a lista a fim de transformar, filtrar ou realizar buscas, tudo isso sem modificar o modificar original. Para mostrar os exemplos serão usados métodos de uma classe que manipula um array de posts fictícios.

forEach

Este método executa uma função para cada elemento do array e retorna undefined. Esse método não modifica o array original.

O seguinte exemplo percorre a lista de posts e seus comentários:

printAllPosts() {
    this._posts.forEach((post) => {
      const postWithoutComments = {
        id: post.id,
        title: post.title,
        body: post.body,
        likes: post.likes,
      }

      console.log('<---------- Post ---------->')
      console.log(postWithoutComments)

      if (!!post.comments?.length) {
        console.log('<---------- Comments ---------->')

        post.comments?.forEach((comment) => {
          console.log(comment)
        })

        console.log('<---------- End comments ---------->')
      }

      console.log('<---------- End post ---------->\n\n')
    })
  }

map

Este método executa uma função para transformar cada elemento do array e retorna a nova lista com as transformações. Esse método não modifica o array original.

O seguinte exemplo mostra como obter um array de objetos com a chave likes contendo o número de likes de cada post:

getPostsLikes() {
    return this._posts.map((post) => {
      return {
        likes: post.likes,
      }
    })
  }

filter

Este método executa uma função para filtrar elementos de um array com base numa condição e retorna uma nova lista filtrada. Esse método não modifica o array original.

O seguinte exemplo filtra os posts que possuem likes, ou seja, o número de curtidas é positivo:

getPostsWithLikes() {
    return this._posts.filter((post) => {
      return post.likes > 0
    })
  }

some

Este método faz uma verificação para cada elemento do array, se pelo menos um fizer ela ser verdadeira, a função retorna true. Esse método não modifica o array original.

O seguinte exemplo verifica se algum post tem title vazio, ou seja, não tem título definido.

verifyIfAnyPostHasEmptyTitle() {
    return this._posts.some((post) => {
      return !post.title?.length || typeof post.title === 'undefined'
    })
  }

every

Este método verifica se todos os elementos do array satisfazem uma condição, se sim retorna true, senão retorna false. Esse método não modifica o array original.

O seguinte exemplo verifica se todos os posts não tem comentários.

verifyIfAllPostsHaveNoComments() {
    return this._posts.every((post) => {
      return post.comments?.length === 0
    })
  }

find

Este método retorna um elemento com base numa condição de busca, se for encontrado retorna o elemento, senão retorna undefined. Esse método não modifica o array original.

O seguinte exemplo busca um post por id.

getPostByID(id: string) {
    if (!id.length) {
      return
    }

    return this._posts.find((post) => {
      return post.id === id
    })
  }

findIndex

Este método retorna o índice do primeiro elemento encontrado dada uma condição, caso não encontre retorna -1. Esse método não modifica o array original.

O seguinte exemplo busca a posição do post por título.

const ELEMENT_NOT_FOUND_INDEX = -1

getPostIndexByTitle(title: string) {
    if (!title.length) {
      return ELEMENT_NOT_FOUND_INDEX
    }

    return this._posts.findIndex((post) => {
      return post.title?.toLowerCase() === title.toLowerCase()
    })
  }

reduce

Reduz um array a um tipo de dado (number, string, object e etc), o reduce recebe como parâmetros o valor inicial e uma função que vai ser executada para cada elemento tendo o accumulator e currentValue como parâmetros, o accumulator tem como valor padrão o valor inicial definido na função e o currentValue é o elemento atual do array. Esse método não modifica o array original.

O seguinte exemplo conta os posts que não têm title definido.

getPostsWithoutTitleCounting() {
    return this._posts.reduce((accumulator, currentPost) => {
      if (!currentPost.title?.length) {
        return accumulator + 1
      }

      return accumulator
    }, 0)
  }

Nota: Cuidado para não usar os métodos da forma errada, por exemplo, não use o map para percorrer listas, ele foi feito para transformações, nesse caso use o forEach.

Os outros exemplos estão nesse repositório: https://github.com/LessaApolinario/array-methods-javascript