Filtern Sie die Objekteigenschaften nach Schlüssel in ES6

Angenommen, ich habe ein Objekt:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

Ich möchte ein anderes Objekt erstellen, indem ich das obige Objekt filtere, damit ich so etwas habe.

 {
    item1: { key: 'sdfd', value:'sdfd' },
    item3: { key: 'sdfd', value:'sdfd' }
 }

Ich suche nach einem sauberen Weg, um dies mit Es6 zu erreichen, sodass mir Spread-Operatoren zur Verfügung stehen.

Wenn Sie eine Liste zulässiger Werte haben, können Sie diese einfach in einem Objekt beibehalten, indem Sie:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    obj[key] = raw[key];
    return obj;
  }, {});

console.log(filtered);

Dies verwendet:

1. Object.keysum dann alle Eigenschaften in raw(den Originaldaten) aufzulisten
2. Array.prototype.filter um Schlüssel auszuwählen, die in der zulässigen Liste vorhanden sind, mit
   1. Array.prototype.includes um sicherzustellen, dass sie vorhanden sind
3. Array.prototype.reduce um ein neues Objekt nur mit den zulässigen Eigenschaften zu erstellen.

Dadurch wird eine flache Kopie mit den zulässigen Eigenschaften erstellt (die Eigenschaften selbst werden jedoch nicht kopiert).

Sie können auch den Objektverteilungsoperator verwenden , um eine Reihe von Objekten zu erstellen, ohne sie zu mutieren (danke an rjerue für die Erwähnung ):

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    return {
      ...obj,
      [key]: raw[key]
    };
  }, {});

console.log(filtered);

Wenn Sie aus Gründen der Trivia die unerwünschten Felder aus den Originaldaten entfernen möchten (was ich nicht empfehlen würde , da es sich um einige hässliche Mutationen handelt), können Sie die includesPrüfung wie folgt umkehren:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

Object.keys(raw)
  .filter(key => !allowed.includes(key))
  .forEach(key => delete raw[key]);

console.log(raw);

Ich füge dieses Beispiel hinzu, um eine mutationsbasierte Lösung zu zeigen, empfehle jedoch nicht, sie zu verwenden.

Wenn Sie mit der Verwendung der ES6-Syntax einverstanden sind, ist dies der sauberste Weg, wie hier und hier angegeben :

const data = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const { item2, ...newData } = data;

newDataEnthält jetzt :

{
  item1: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

Oder wenn Sie den Schlüssel als Zeichenfolge gespeichert haben:

const key = 'item2';
const { [key]: _, ...newData } = data;

Im letzteren Fall [key]wird in konvertiert, item2aber da Sie eine constZuweisung verwenden, müssen Sie einen Namen für die Zuweisung angeben. _repräsentiert einen Wegwerfwert.

Allgemeiner:

const { item2, ...newData } = data; // Assign item2 to item2
const { item2: someVarName, ...newData } = data; // Assign item2 to someVarName
const { item2: _, ...newData } = data; // Assign item2 to _
const { ['item2']: _, ...newData } = data; // Convert string to key first, ...

Dies reduziert nicht nur Ihren Betrieb auf einen Einzeiler, sondern erfordert auch nicht, dass Sie die anderen Schlüssel kennen (die, die Sie beibehalten möchten).

Der sauberste Weg, den Sie finden können, ist mit Lodash # pick

const _ = require('lodash');

const allowed = ['item1', 'item3'];

const obj = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

const filteredObj = _.pick(obj, allowed)

Nichts, was vorher nicht gesagt wurde, aber um einige Antworten auf eine allgemeine ES6-Antwort zu kombinieren:

const raw = {
  item1: { key: 'sdfd', value: 'sdfd' },
  item2: { key: 'sdfd', value: 'sdfd' },
  item3: { key: 'sdfd', value: 'sdfd' }
};

const filteredKeys = ['item1', 'item3'];

const filtered = filteredKeys
  .reduce((obj, key) => ({ ...obj, [key]: raw[key] }), {});

console.log(filtered);

Nur eine weitere Lösung in einer Zeile von Modern JS ohne externe Bibliotheken .

Ich habe mit der Funktion " Destructuring " gespielt:

const raw = {
    item1: { key: 'sdfd', value: 'sdfd' },
    item2: { key: 'sdfd', value: 'sdfd' },
    item3: { key: 'sdfd', value: 'sdfd' }
  };
var myNewRaw = (({ item1, item3}) => ({ item1, item3 }))(raw);
console.log(myNewRaw);

Sie können es jetzt kürzer und einfacher machen, indem Sie die Object.fromEntries- Methode verwenden (überprüfen Sie die Browserunterstützung):

const raw = { item1: { prop:'1' }, item2: { prop:'2' }, item3: { prop:'3' } };

const allowed = ['item1', 'item3'];

const filtered = Object.fromEntries(
   Object.entries(raw).filter(
      ([key, val])=>allowed.includes(key)
   )
);

Lesen Sie mehr über: Object.fromEntries

Sie können ein Generikum hinzufügen ofilter(implementiert mit Generika oreduce), damit Sie Objekte auf die gleiche Weise wie Arrays filtern können.

const oreduce = (f, acc, o) =>
  Object
    .entries (o)
    .reduce
      ( (acc, [ k, v ]) => f (acc, v, k, o)
      , acc
      )

const ofilter = (f, o) =>
  oreduce
    ( (acc, v, k, o)=>
        f (v, k, o)
          ? Object.assign (acc, {[k]: v})
          : acc
    , {}
    , o
    )

Wir können sehen, dass es hier funktioniert -

const data =
  { item1: { key: 'a', value: 1 }
  , item2: { key: 'b', value: 2 }
  , item3: { key: 'c', value: 3 }
  }

console.log
  ( ofilter
      ( (v, k) => k !== 'item2'
      , data
      )
      // [ { item1: { key: 'a', value: 1 } }
      // , { item3: { key: 'c', value: 3 } }
      // ]

  , ofilter
      ( x => x.value === 3
      , data
      )
      // [ { item3: { key: 'c', value: 3 } } ]
  )

Überprüfen Sie die Ergebnisse in Ihrem eigenen Browser unten -

const oreduce = (f, acc, o) =>
  Object
    .entries (o)
    .reduce
      ( (acc, [ k, v ]) => f (acc, v, k, o)
      , acc
      )

const ofilter = (f, o) =>
  oreduce
    ( (acc, v, k, o)=>
        f (v, k, o)
          ? Object.assign (acc, { [k]: v })
          : acc
    , {}
    , o
    )

const data =
  { item1: { key: 'a', value: 1 }
  , item2: { key: 'b', value: 2 }
  , item3: { key: 'c', value: 3 }
  }

console.log
  ( ofilter
      ( (v, k) => k !== 'item2'
      , data
      )
      // [ { item1: { key: 'a', value: 1 } }
      // , { item3: { key: 'c', value: 3 } }
      // ]

  , ofilter
      ( x => x.value === 3
      , data
      )
      // [ { item3: { key: 'c', value: 3 } } ]
  )

Diese beiden Funktionen können auf viele Arten implementiert werden. Ich habe mich entschieden, an der Array.prototype.reduceInnenseite zu befestigen, oreduceaber Sie könnten genauso gut alles von Grund auf neu schreiben

So habe ich es kürzlich gemacht:

const dummyObj = Object.assign({}, obj);
delete dummyObj[key];
const target = Object.assign({}, {...dummyObj});

ok, wie wäre es mit diesem Einzeiler

    const raw = {
      item1: { key: 'sdfd', value: 'sdfd' },
      item2: { key: 'sdfd', value: 'sdfd' },
      item3: { key: 'sdfd', value: 'sdfd' }
    };

    const filteredKeys = ['item1', 'item3'];

    const filtered = Object.assign({}, ...filteredKeys.map(key=> ({[key]:raw[key]})));

Die Antworten hier sind definitiv geeignet, aber sie sind etwas langsam, da sie die Whitelist für jede Eigenschaft im Objekt durchlaufen müssen. Die folgende Lösung ist für große Datenmengen viel schneller, da die Whitelist nur einmal durchlaufen wird:

const data = {
  allowed1: 'blah',
  allowed2: 'blah blah',
  notAllowed: 'woah',
  superSensitiveInfo: 'whooooah',
  allowed3: 'bleh'
};

const whitelist = ['allowed1', 'allowed2', 'allowed3'];

function sanitize(data, whitelist) {
    return whitelist.reduce(
      (result, key) =>
        data[key] !== undefined
          ? Object.assign(result, { [key]: data[key] })
          : result,
      {}
    );
  }

  sanitize(data, whitelist)

Huckepack auf ssubes Antwort .

Hier ist eine wiederverwendbare Version.

Object.filterByKey = function (obj, predicate) {
  return Object.keys(obj)
    .filter(key => predicate(key))
    .reduce((out, key) => {
      out[key] = obj[key];
      return out;
    }, {});
}

Um es zu nennen, verwenden Sie

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

var filtered = Object.filterByKey(raw, key => 
  return allowed.includes(key));
});

console.log(filtered);

Das Schöne an den ES6-Pfeilfunktionen ist, dass Sie keinen allowedParameter übergeben müssen.

Sie können so etwas tun:

const base = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const filtered = (
    source => { 
        with(source){ 
            return {item1, item3} 
        } 
    }
)(base);

// one line
const filtered = (source => { with(source){ return {item1, item3} } })(base);

Dies funktioniert, ist aber nicht sehr klar, und die withAnweisung wird nicht empfohlen ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with ).

Eine einfachere Lösung ohne Verwendung filterkann mit Object.entries()statt erreicht werdenObject.keys()

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.entries(raw).reduce((acc,elm)=>{
  const [k,v] = elm
  if (allowed.includes(k)) {
    acc[k] = v 
  }
  return acc
},{})

Es gibt viele Möglichkeiten, dies zu erreichen. Die akzeptierte Antwort verwendet einen Keys-Filter-Reduce-Ansatz, der nicht besonders leistungsfähig ist.

Stattdessen mit einer for...inSchleife zu Schleife durch Tasten eines Objekt oder die zulässigen Tasten Schleifen, und dann ein neues Objekt bildet , ist ~ 50% leistungsfähiger ^ein .

const obj = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const keys = ['item1', 'item3'];

function keysReduce (obj, keys) {
  return keys.reduce((acc, key) => {
    if(obj[key] !== undefined) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
};

function forInCompose (obj, keys) {
  const returnObj = {};
  for (const key in obj) {
    if(keys.includes(key)) {
      returnObj[key] = obj[key]
    }
  };
  return returnObj;
};

keysReduce(obj, keys);   // Faster if the list of allowed keys are short
forInCompose(obj, keys); // Faster if the number of object properties are low

^{ein. In jsPerf finden Sie die Benchmarks eines einfachen Anwendungsfalls. Die Ergebnisse unterscheiden sich je nach Browser.}

Sie können einen bestimmten Schlüssel für Ihr Objekt entfernen

items={
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

// Example 1
var key = "item2";
delete items[key]; 

// Example 2
delete items["item2"];

// Example 3
delete items.item2;

const filteredObject = Object.fromEntries(Object.entries(originalObject).filter(([key, value]) => key !== uuid))

Einfacher Weg! Um dies zu tun.

const myData = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};
const{item1,item3}=myData
const result =({item1,item3})

Eine andere Lösung mit der "neuen" Array.reduceMethode:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = allowed.reduce((obj, key) => { 
  obj[key] = raw[key]; 
  return obj 
}, {})

console.log(filtered);

Demonstration in dieser Geige ...

Aber ich mag die Lösung in dieser Antwort hier, die verwendet und :Object.fromEntries Array.filterArray.includes

const object = Object.fromEntries( Object.entries(raw).filter(([key, value]) => allowed.includes(key)) );

Demonstration in dieser Geige ...

OK, wie wäre es damit:

const myData = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

function filteredObject(obj, filter) {
  if(!Array.isArray(filter)) {
   filter = [filter.toString()];
  }
  const newObj = {};
  for(i in obj) {
    if(!filter.includes(i)) {
      newObj[i] = obj[i];
    }
  }
  return newObj;
}

und nenne es so:

filteredObject(myData, ['item2']); //{item1: { key: 'sdfd', value:'sdfd' }, item3: { key: 'sdfd', value:'sdfd' }}

Diese Funktion filtert ein Objekt basierend auf einer Liste von Schlüsseln. Dies ist effizienter als die vorherige Antwort, da Array.filter vor dem Aufruf von reduct nicht verwendet werden muss. also ist es O (n) im Gegensatz zu O (n + gefiltert)

function filterObjectByKeys (object, keys) {
  return Object.keys(object).reduce((accum, key) => {
    if (keys.includes(key)) {
      return { ...accum, [key]: object[key] }
    } else {
      return accum
    }
  }, {})
}

Geben Sie während der Schleife nichts zurück, wenn bestimmte Eigenschaften / Schlüssel angetroffen werden, und fahren Sie mit dem Rest fort:

const loop = product =>
Object.keys(product).map(key => {
    if (key === "_id" || key === "__v") {
        return; 
    }
    return (
        <ul className="list-group">
            <li>
                {product[key]}
                <span>
                    {key}
                </span>
            </li>
        </ul>
    );
});

Ich bin überrascht, wie noch niemand dies vorgeschlagen hat. Es ist super sauber und sehr explizit darüber, welche Schlüssel Sie behalten möchten.

const unfilteredObj = {a: ..., b:..., c:..., x:..., y:...}

const filterObject = ({a,b,c}) => ({a,b,c})
const filteredObject = filterObject(unfilteredObject)

Oder wenn Sie einen schmutzigen Einzeiler wollen:

const unfilteredObj = {a: ..., b:..., c:..., x:..., y:...}

const filteredObject = (({a,b,c})=>({a,b,c}))(unfilteredObject);

Ein anderer Ansatz wäre die Verwendung Array.prototype.forEach()als

const raw = {
  item1: {
    key: 'sdfd',
    value: 'sdfd'
  },
  item2: {
    key: 'sdfd',
    value: 'sdfd'
  },
  item3: {
    key: 'sdfd',
    value: 'sdfd'
  }
};

const allowed = ['item1', 'item3', 'lll'];

var finalObj = {};
allowed.forEach(allowedVal => {
  if (raw[allowedVal])
    finalObj[allowedVal] = raw[allowedVal]
})
console.log(finalObj)

Es enthält nur Werte der Schlüssel, die in den Rohdaten verfügbar sind, und verhindert so das Hinzufügen von Junk-Daten.

Das wäre meine Lösung:

const filterObject = (obj, condition) => {
    const filteredObj = {};
    Object.keys(obj).map(key => {
      if (condition(key)) {
        dataFiltered[key] = obj[key];
      }
    });
  return filteredObj;
}