Como localizar um objeto específico em uma matriz JavaScript

Você já se deparou com um requisito para encontrar um objeto específico em uma determinada matriz de objetos? Neste post, exploraremos várias maneiras de encontrar um objeto específico em uma matriz JavaScript. Vamos supor que temos um array como mostrado na lista abaixo e precisamos descobrir se existe um objeto com um id de '4':

    var tasks = [
                { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
                { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
                { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
                { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
                { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
    ];

Para pesquisar um objeto específico, usaremos o método de localização do protótipo Array. Isso retorna um valor em um determinado critério, caso contrário, retorna 'indefinido'. São necessários dois parâmetros, uma função de retorno de chamada necessária e um objeto opcional, que será definido como um valor this dentro da função de retorno de chamada.

Array.prototype.find(callbackFunction[,thisArgs])

1. A função de retorno de chamada será chamada para cada elemento da matriz até que a condição dada para um determinado elemento não seja verdadeira.
2. Um objeto que será o valor de this na função de retorno de chamada é um parâmetro opcional e, se não for passado, o valor será definido como indefinido na função de retorno de chamada.

O parâmetro da função de retorno de chamada do método find usa três parâmetros:

1. elemento: o elemento atual que está sendo processado na matriz
2. index: o índice do elemento atual que está sendo processado
3. array: o array no qual o método find está sendo chamado

Digamos que temos uma função de retorno de chamada, conforme mostrado na lista abaixo. Ele imprimirá o elemento atual, o índice do elemento e a matriz:

function CallbackFunctionToFindTaskById(element, index, array) {

        console.log(element);// print element being processed 
        console.log(index); // print index of the element being processed 
        console.log(array); // print the array on which find method is called 

    }

Como funciona o método de localização?

• O método find JavaScript executará a função de retorno de chamada para cada elemento da matriz. Portanto, se houver 5 elementos na matriz, a função de retorno de chamada será executada cinco vezes.
• O método find JavaScript interromperá a execução da função de retorno de chamada quando encontrar um critério verdadeiro para um elemento específico.
• Se o critério fornecido for verdadeiro para um elemento, o método find do JavaScript retornará esse elemento específico e não executará a função de retorno de chamada para os elementos restantes.
• Se os critérios não forem verdadeiros para nenhum elemento, o método find do JavaScript retornará undefined.
• O método find do JavaScript não executa a função de retorno de chamada para índices que não estão definidos ou foram excluídos.
• O método find do JavaScript sempre executa a função de retorno de chamada com três argumentos: element, index, array.

Vejamos alguns exemplos de uso do método find!

Localizar um objeto em um critério fixo

Temos uma matriz de tarefas, conforme mostrado na listagem abaixo:

var tasks = [
             { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
             { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
             { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
             { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
             { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
];

Queremos encontrar um objeto com um id de '4'. Podemos fazer isso conforme mostrado na lista abaixo:

function CallbackFunctionToFindTaskById(task) {
   return task.Id === '4';
}

var task = tasks.find(CallbackFunctionToFindTaskById);
console.log(JSON.stringify(task));

Na listagem acima, estamos passando a função de retorno de chamada CallbackFunctionToFindTaskById no método find do array tasks.  Sempre, o primeiro parâmetro da função de retorno de chamada representa o parâmetro do elemento. Aqui, a tarefa está representando o elemento dentro da função de retorno de chamada. Portanto, a tarefa representa o elemento que está sendo processado no momento.

Na função de retorno de chamada, estamos verificando o Id da tarefa atual e se for igual a 4, retornando a tarefa.  Nesse cenário, os critérios são fixados dentro da função de retorno de chamada.

Localizar um objeto em critérios passados na função de retorno de chamada

No exemplo anterior, tínhamos um critério fixo que retornava um objeto com o id '4'. No entanto, pode haver um requisito no qual podemos querer passar os critérios ao chamar a função de retorno de chamada. Podemos passar um objeto como o valor de this na função de retorno de chamada. Vamos considerar a mesma matriz de tarefas novamente, que é mostrada na listagem a seguir

var tasks = [
         { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
         { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
         { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
         { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
         { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
];

Em seguida, vamos criar uma função de retorno de chamada FindTaskById, conforme mostrado na listagem abaixo:

function FindTaskById(task) {        
   console.log(this);
}

Como você pode notar, estamos imprimindo o valor de "this" dentro da função de retorno de chamada. Em seguida, passaremos a função de retorno de chamada FindByTask no método find da matriz de tarefas, conforme mostrado na listagem abaixo:

var task = tasks.find(FindTaskById,['4','67']);

Nesse caso, o valor dessa função de retorno de chamada interna foi definido como um objeto com dois valores: 4 e 67. No console, você deve obter a saída conforme mostrado abaixo:

O valor disso é impresso 5 vezes porque há 5 elementos na matriz de tarefas. Para retornar um objeto com o Id definido como 4, precisamos modificar a função de retorno de chamada, conforme mostrado na listagem abaixo

   function FindTaskById(task) {

        if (task.Id === this[0]) {
            return task;
        }
    }

    var task = tasks.find(FindTaskById, ['4', '67']);
    console.log(JSON.stringify(task));

Na função de retorno de chamada, estamos passando o valor desse objeto com a primeira propriedade definida como 4. Portanto, verificando se a tarefa. O id é igual a this[0] ou não retornará um objeto com id 4.

Conclusão

Neste post, aprendemos sobre o método find do JavaScript Array e várias opções com a função de retorno de chamada. Ter uma melhor compreensão do método find é essencial para ser um desenvolvedor JavaScript mais produtivo e espero que você tenha gostado de ler!