javascript / beginner
Snippet
Berechnen von Warenkorb-Summen mit Array Reduce
Das Aggregieren von Objekten in einem Array zu einer einzigen Gesamtzahl ist eine zentrale JavaScript-Array-Operation. Durch den Einsatz der reduce-Methode in einer Vue Computed Property wird der Gesamtwert deterministisch berechnet und synchron mit den Array-Elementen gehalten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { ref, computed } from 'vue';const cartItems = ref([{ id: 1, name: 'Keyboard', price: 79.99, quantity: 1 },{ id: 2, name: 'Mouse', price: 39.50, quantity: 2 }]);const totalPrice = computed(() => {return cartItems.value.reduce((accumulator, item) => {return accumulator + (item.price * item.quantity);}, 0);});
vue
Erklärung
1
const cartItems = ref([ ... ]);
Speichert eine reaktive Liste von Objekten mit numerischen Preis- und Mengeneigenschaften.
2
const totalPrice = computed(() => {
Erstellt eine Computed Property, die sich bei Änderungen an Artikeln oder Mengen automatisch aktualisiert.
3
return cartItems.value.reduce((accumulator, item) => {
Iteriert über das Array und übergibt die laufende Summe (Akkumulator) und das aktuelle Element.
4
return accumulator + (item.price * item.quantity);
Multipliziert Preis mit Menge und addiert den Zwischenbetrag zum bisherigen Gesamtwert.
5
}, 0);
Setzt den Anfangswert des Akkumulators auf die Zahl null.