Filtrar objecto em JavaScript

Moataz Farid 12 outubro 2023 JavaScript JavaScript Filter JavaScript Object
  1. Utilizar o reduce para filtrar um objecto em JavaScript
  2. Utilize a função map para filtrar objectos JavaScript
Filtrar objecto em JavaScript

Este tutorial irá introduzir como filtrar um objecto em JavaScript. Aprenderemos como implementar um método de “filtro” semelhante ao do tipo de dados Object em JavaScript.

Utilizar o reduce para filtrar um objecto em JavaScript

Vamos agora implementar a função de filtragem de objectos utilizando a função reduce.

Suponhamos que temos o seguinte objecto:

var grades = {linearAlgebra: 90, chemistry: 95
biology: 90
    languages : 96
}

O objecto acima representa as notas de um estudante; precisamos de filtrar esse objecto e obter apenas as disciplinas com uma nota de 95 ou mais.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(function(ObjectKey) {
        return filterFunction(mainObject[ObjectKey])
      })
      .reduce(function(result, ObjectKey) {
        result[ObjectKey] = mainObject[ObjectKey];
        return result;
      }, {});
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, function(grade) {
  return grade >= 95;
});

console.log('Target Subjects are ', targetSubjects);

Resultado:

"The grades are ", {
  biology: 90,
  chemistry: 95,
  languages: 96,
  linearAlgebra: 90
}
"Target Subjects are ", {
  chemistry: 95,
  languages: 96
}

Implementamos a função Object.filter como Object.filter = function(mainObject, filterFunction) no exemplo acima. Podemos simplificar esse código de exemplo como abaixo.

Object.filter = function(mainObject, filterFunction) {
  return Object.keys(mainObject)
      .filter(innerFilterFunction)
      .reduce(reduceFunction, {});
}

Tem 3 passos principais para implementar essa função Object.filter:

  1. Object.keys() retorna um array de chaves dos pares key-value no objecto. É linearAlgebra, chemistry, biology, languages no nosso exemplo.
  2. O resultado do Object.keys() é enviado para a função innerFilterFunction, que é também um argumento da função de filtro, e a saída dessa função innerFilterFilterFunction será as chaves filtradas. A saída é chemistry, languages no nosso exemplo.
  3. O resultado do filtro é agora passado para a nossa função reduce(), que acrescenta cada valor à sua chave, e devolve um novo objecto contendo todos esses pares. Assim, o resultado no nosso exemplo é {chemistry: 95, languages: 96}.

Se quisermos recriar o exemplo acima com a sintaxe arrow de ES6, poderíamos reescrevê-lo como abaixo.

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                (result[ObjectKey] = mainObject[ObjectKey], result),
            {});

console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Resultado:

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

Utiliza o operador comma para devolver o objecto result, e também pode ser substituído por Object.assign, que também devolve o resultado. Assim, o código pode ser reescrito como se segue.

Object.filter = (mainObject, filterFunction) =>
    Object.keys(mainObject)
        .filter((ObjectKey) => filterFunction(mainObject[ObjectKey]))
        .reduce(
            (result, ObjectKey) =>
                Object.assign(result, {[ObjectKey]: mainObject[ObjectKey]}),
            {});

Utilize a função map para filtrar objectos JavaScript

Como utilizamos a função reduce na solução acima, podemos também utilizar a função map para filtrar objectos JavaScript.

Object.filter = function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

Substituímos a função reduce pela função map, como mostrado acima, e também utilizámos a função Object.assign e enviámos-lhe utilizando a sintaxe spread todas as operações que começam em Object.keys() a .map(), pelo que a implementação completa deve agora ser como a seguinte:

var grades = {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96};

Object.filter =
    function(mainObject, filterFunction) {
  return Object.assign(...Object.keys(mainObject)
                           .filter(function(ObjectKey) {
                             return filterFunction(mainObject[ObjectKey])
                           })
                           .map(function(ObjectKey) {
                             return {[ObjectKey]: mainObject[ObjectKey]};
                           }));
}

    console.log('The grades are ', grades);

var targetSubjects = Object.filter(grades, (grade) => grade >= 95);

console.log('Target Subjects are ', targetSubjects);

Resultado:

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}
Está gostando dos nossos tutoriais? Inscreva-se no DelftStack no YouTube para nos apoiar na criação de mais vídeos tutoriais de alta qualidade. Inscrever-se

Artigo relacionado - JavaScript Object