JavaScript - Principais métodos dos Arrays - II

 Hoje vamos apresentar os principais métodos para realizar buscar em arrays  na linguagem JavaScript.

O objetivo desta série de artigos sobre JavaScript é apresentar os conceitos básicos para poder usar o JavaScript em aplicações React, Angular, jQuery, etc., que interagem com aplicações ASP .NET Core ou ASP .NET MVC 5.

Eu estou usando o editor de código Visual Studio Code e testando o código JavaScript usando o terminal REPL do Node.js. (Você tem que ter o Nodejs instalado)

O Node.js é um ambiente de runtime JavaScript construído utilizando o interpretador de JavaScript V8 do Google Chrome.

Veja este artigo para saber como configurar o ambiente para Node e usar o terminal REPL e o VS Code.

Para poder usar o terminal REPL incluindo várias linhas coloque as linhas entre chaves { }.

Nota: O REPL usa (…) para indicar que está aguardando o código completo antes de executar. Basta fechar as chaves e teclar Enter para que o REPL avalie o JavaScript inserido. Para sair de dentro de um bloco (…) sem executar o que você já digitou, basta digitar .break ou pressionar Ctrl + C.

Usando os métodos de busca em arrays

Já sabemos como definir um array em JavaScript. Veremos agora os principais métodos para procurar informações em arrays.

1- Procurando alguma coisa em um array : indexOf() , lastIndexOf() e includes()

Os métodos indexOf, lastIndexOf e includes possuem a mesma sintaxe e fazem essencialmente o mesmo que suas contrapartes de string, mas operam em itens em vez de caracteres. Vejamos a definição de cada um:

  1. indexOf() - Procura no array por um elemento a partir do índice e retorna o índice onde foi en encontrado. Se não encontrar retorna -1;
     
  2. lastIndexOf() - Exatamente como o anterior. A diferença é que ele inicia a partir do fim do array;
     
  3. includes() -  Procura no array pelo elemento a partir do índice e retorna true se encontrar e false se não encontrar. É usado para verificar se um objeto existe em um array;

Usando o terminal REPL (abra um prompt de comandos cmd e digite node) teremos:

let bau = [1, 0, false, "banana" ];
console.log ( bau.indexOf(0) );
console.log ( bau.indexOf(false) );
console.log ( bau.indexOf(null) );
console.log ( bau.indexOf(bana) );

Os métodos usam a comparação ===. Assim, se procurarmos por false, ele achará exatamente false e não o zero.

Se você quiser verificar a inclusão de um elemento e não sabe o índice exato, então use o método includes():

let bau = [1, 0, false, "banana" ];
console.log ( bau.includes("banana") );
console.log ( bau.includes(true) );

2- Procurando algo com uma condição específica :  find() e findIndex()

Esses métodos localizam um elemento após uma condição ser verificada.

  1. find() - Retorna o valor do primeiro elemento no array que atendeu a condição;
    Sintaxe :
                    let r    esultado = arr.find(function(item, index, array) {
                          // retorna true se o item atende a condição
                   });
    onde :
    item é o elemento
    index é o índice
    array é o array

Se retornar true a busca é interrompoida e o item é retornado. Se nada for encontrado retorna undefined.

let usuarios = [ {id: 1, nome: "Maria"},
                         {id: 2, nome: "Jose"},
                         {id:3 , nome: "Pedro"} ];
let usuario = usuarios.find(item=> item.id == 3);
console.log( usuario.nome );


 

  1. findIndex()  - Retorna o índice do primeiro elemento no array que atendeu a condição;

O método findIndex() possui a mesma sintaxe e atua essencialmente da mesma forma que o método find() retornando o índice onde o elemento foi encontrado ao invés do elemento.

3- Retornando mais de um elemento que atente a uma condição: filter()

O método filter() retorna um array com todos os elementos no array original que atende a uma condição. (find() retorna apenas o primeiro elemento).

A sintaxe é basicamente a mesma que o método find() :

Sintaxe :
                let resultado = arr.filter(function(item, index, array) {
                      // retorna true se o item atende o filtro
               });
onde :
item é o elemento
index é o índice
array é o array

Exemplo:

let usuarios = [
                          {id: 1, nome: "Marta"},
                          {id: 2, nome: "Carlos"},
                          {id: 3, nome: "Adriana"} ];
let resultado = usuarios.filter(item => item.id < 3);
console.log( resultado.length);
console.log( resultado );

A seguir temos uma tabela resumindo os principais métodos apresentados:

Método Descrição
 indexOf() Procura um elemento em um array e retorna sua posição.
 lastIndexOf() Procurar um elemento em um array do fim para começo e retorna sua posição.
 includes() Verifica se um array contém um elemento
 find() Retorna o valor do primeiro elemento que atende uma condição
 findIndex() Retorna o índice do primeiro elemento que atende uma condição
 filter() Cria um novo array com cada elemento que atende a uma condição

Na próxima parte veremos o métodos para transformar um array.

(Jesus a seus discípulos) "Na verdade, na verdade vos digo que vós chorareis e vos lamentareis, e o mundo se alegrará, e vós estareis tristes, mas a vossa tristeza se converterá em alegria."
João 16:20

  • Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

    Quer migrar para o VB .NET ?

    Quer aprender C# ??

    Quer aprender os conceitos da Programação Orientada a objetos ?

    Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

      Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

    Referências:

    José Carlos Macoratti