Filtra oggetto in JavaScript

  2. HowTo
  3. Howtos JavaScript
  4. Filtra oggetto in JavaScript
Moataz Farid 12 ottobre 2023
JavaScript JavaScript Filter JavaScript Object
  1. Usa reduce per filtrare l’oggetto in JavaScript
  2. Usa la funzione map per filtrare gli oggetti JavaScript
Filtra oggetto in JavaScript

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}

Articolo correlato - JavaScript Object