HOWTO · JavaScript

Filtra oggetto in JavaScript

Questo tutorial spiega come utilizzare il filtro per gli oggetti in JavaScript

Di Moataz FaridPubblicato 2021-03-30Aggiornato 2023-10-12

Questo tutorial introdurrà come filtrare un oggetto in JavaScript. Impareremo come implementare un metodo filter simile come nel tipo di dati array a Object in JavaScript.

Usa reduce per filtrare l’oggetto in JavaScript

Implementiamo ora la funzione per filtrare gli oggetti usando la funzione reduce.

Supponiamo di avere il seguente oggetto:

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

L’oggetto sopra rappresenta i voti di uno studente; dobbiamo filtrare quell’oggetto e ottenere solo i soggetti con un voto di 95 o più.

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);

Produzione:

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

Implementiamo la funzione Object.filter come Object.filter = function(mainObject, filterFunction) nell’esempio precedente. Possiamo semplificare quel codice di esempio come di seguito.

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

Ha 3 passaggi principali per implementare la funzione Object.filter:

  1. Object.keys() restituisce un array di chiavi dalle coppie chiave-valore nell’oggetto. Nel nostro esempio è linearAlgebra, chemistry, biology, languages.
  2. Il risultato di Object.keys() viene inviato alla funzione di callback innerFilterFunction, che è anche un argomento della funzione filtro, e l’output di quella funzione innerFilterFunction saranno le chiavi filtrate. L’output è chemistry, languages nel nostro esempio.
  3. Il risultato del filtro viene ora passato alla nostra funzione reduce(), che aggiunge ogni valore alla sua chiave e restituisce un nuovo oggetto contenente tutte quelle coppie. Quindi il risultato nel nostro esempio è {chemistry: 95, languages: 96}.

Se vogliamo ricreare l’esempio precedente con la sintassi a arrow di ES6, potremmo riscriverlo come sotto.

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);

Produzione:

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

Utilizza l’operatore comma per restituire l’oggetto result, e può anche essere sostituito con Object.assign, che restituisce anche il risultato. Quindi il codice può essere riscritto come segue.

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

Usa la funzione map per filtrare gli oggetti JavaScript

Poiché utilizziamo la funzione reduce nella soluzione precedente, possiamo anche utilizzare la funzione map per filtrare gli oggetti 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]};
                           }));
}

Abbiamo sostituito la funzione reduce con la funzione map come mostrato sopra, e abbiamo anche usato Object.assign e gli abbiamo inviato utilizzando la sintassi spread tutte le operazioni a partire da Object.keys() a map, quindi l’implementazione completa dovrebbe ora essere come la seguente:

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);

Produzione:

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

Informazioni sull’autore

Moataz Farid

Visualizza il profilo dell’autore