Drei nützliche JavaScript Object Funktionen

Es gibt im JavaScript viele nützliche Array Funktionen aber wiederum gelten die nicht für Objekte. Das kann zum Beispiel ein Grund sein, warum man sich einer Object Funktion bedient um daraus ein Array zu machen. Ich stelle im Folgenden die Funktionen: Object.keys, Object.value und Object.entries vor.

Ausgangsituation wäre ein nettes Objekt:

const niceObject = { 
     2019: {visitors:1}, 
     2020: {visitors:2}, 
     2021: {visitors:4}
 }

Das sind nämlich die Unique Besucher meiner Website und nun möchte ich errechnen wieviele Besucher ich seit 2019 hatte. Mit Array.reduce() wäre das im Handumdrehen gemacht. Aber mit einem Object. Wie geht den das?

Object.keys

Objekt.keys gibt uns alle Keys des Objektes als Array wieder.

const years = Object.keys(niceObject)
// output years
[2019, 2020, 2021]

Nun können wir mit der Arrayfunktion reduce() was anfangen. Ist doch ein Array.

const result = years.reduce((sum, key) => {
    return sum + niceObject[key].visitors;
}, 0)
// output result
7

Object.values

Object.values gibt uns ein Array mit allen (drei Objekten) Values zurück.

const visitors = Object.values(niceObject)
 // output visitors
 [
   {visitors: 1},
   {visitors: 2},
   {visitors: 4},
 ]

Deshalb können wir nun folgendes machen:

const result = visitors.reduce((sum, singleObject) => {
   return sum + singleObject.visitors;
}, 0);
// output result
7

// Oder richtig kurz
const resultShortObject.values(niceObject).reduce((t, n) => t + n.visitors, 0)
// output resultShort
7

Object.entries

Object.entries gibt uns ein Array mit drei Arrays zurück.

const entriesArray = Object.entries(niceObject)
// output entriesArray
[
  ["a", {visitors: 1}],
  ["b", {visitors: 2}],
  ["c", {visitors: 4}]
];
let result = entriesArray.reduce((sum, arr) => {
  return sum + arr[1].visitors;
}, 0)
// output result
7

Also 7 Besucher in drei Jahren. Not bad! Aber ich war schon mal besser…

Bei alle drei Funktionen übergeben wir einen Parameter mit dem Wert 0. Dieser ist der Initial Wert.


Leave a Comment

Your email address will not be published.

*

*

Empfholende Artikel


JS reduce()

March 21, 2022

Man hat ein array und möchte zum Beispiel alle Zahlen im Array kumulieren. Mit der Javascript Array Function reduce() geht das ganz leicht.

Return days of a month in an array

March 14, 2022

You need all days of a certain month then you can use this function: getDaysInMonth = (month,year) => new Date(year, month, 0).getDate();console.log( […Array(getDaysInMonth(3, 2022)).keys()] ); Greets!

JS flat()

March 9, 2022

Es kommt schon mal vor das man geschachtelte arrays bekommt.Zum Beispiel: Man möchte aus einem geschachteltem Array alle Werte in einem Array sammeln. Mit der array Funktion flat() ist das kein Problem. Auch mehrstuffig verschachtelte Arrays kann man geradeziehen (flatten). Indem man der flat Funktion die Anzahl der verschachtelungen die aufgelöst werden sollen, mitgibt. Da […]

JS bind()

March 8, 2022

Ein einfaches besipiel um JS bind() function zu verdeutlichen:

Javascript – Fakultät berechnen

January 19, 2022

Ab und an braucht man das und nicht nur in der Kombinatorik. Wer es etwas übersichtlicher braucht (und dazu zähle ich mich auch) kann es auch in einer for schleife machen.

Javascript – Was ist eigentlich Promisification?

January 6, 2022

“Promisification” ist ein lange Wort für eine ganz simple Sache. Es geht eigentlich um die immer gleiche Frage, sobald man das erste Mal in JS eine API Anfrage stellt. Wie krieg ich das Zeug in den globalen Scope? Man bedient sich ganz einfach damit, die asynchronität zu stoppen und mal ein päuschen einzulegen. Sobald dann […]