CSSNumericArray.entries() — Methode · JavaScript-Referenz

Signatur

CSSNumericArray.prototype.entries()

Beschreibung

CSSNumericArray ist ein nur lesbarer, arrayähnlicher Container aus dem CSS Typed OM. Er enthält die Operanden (CSSNumericValue-Objekte) eines mathematischen CSS-Ausdrucks und ist über die Eigenschaft values von CSSMathSum, CSSMathProduct, CSSMathMin und CSSMathMax erreichbar.

entries() gibt einen Iterator zurück, der nacheinander Paare aus Index und Wert liefert. Das ist nützlich, wenn man beim Durchlaufen eines calc()-, min()- oder max()-Ausdrucks sowohl die Position als auch den Operanden selbst braucht, etwa zur Analyse, Fehlersuche oder Umwandlung von Stilwerten.

Die Methode verhält sich wie Array.prototype.entries(): Der Iterator lässt sich mit for...of und Destrukturierung durchlaufen oder mit Array.from() bzw. dem Spread-Operator in ein echtes Array umwandeln. Da CSSNumericArray kein echtes Array ist, stehen Methoden wie map() oder filter() nicht direkt zur Verfügung.

Rückgabewert

Typ

Iterator<[number, CSSNumericValue]>

Beschreibung

Ein neuer Array-Iterator, der für jedes Element ein Array [index, value] liefert. index ist die Position (ab 0), value der jeweilige CSSNumericValue.

Beispiele

Operanden einer CSSMathSum mit Index ausgeben

const sum = new CSSMathSum(CSS.px(10), CSS.percent(50), CSS.em(2));

for (const [index, value] of sum.values.entries()) {
  console.log(index, value.toString());
}

0 "10px" 1 "50%" 2 "2em"

Geparsten calc()-Ausdruck analysieren

const width = CSSStyleValue.parse('width', 'calc(100% - 20px)');

if (width instanceof CSSMathSum) {
  for (const [i, operand] of width.values.entries()) {
    console.log(`Operand ${i}: ${operand.constructor.name}`);
  }
}

Operand 0: CSSUnitValue Operand 1: CSSMathNegate

Einträge in ein echtes Array umwandeln

const box = document.querySelector('.box');
box.attributeStyleMap.set('padding-left', 'max(1rem, 5vw, 12px)');

const value = box.attributeStyleMap.get('padding-left');
if (value instanceof CSSMathMax) {
  const list = Array.from(value.values.entries(), ([i, v]) => `${i}=${v}`);
  console.log(list);
}

["0=1rem", "1=5vw", "2=12px"]

// Wichtig · Fallstricke

Browser-Kompatibilität: Das CSS Typed OM wird von Chromium-Browsern (Chrome, Edge, Opera) und Safari ab 16.4 unterstützt, von Firefox bislang nicht. Vor der Nutzung per Feature-Erkennung prüfen, z. B. 'CSSNumericArray' in window.
CSSNumericArray ist nur lesbar – Operanden lassen sich nicht über den Iterator verändern. Für geänderte Werte muss ein neues CSSMathSum usw. erzeugt werden.
Der Browser kann Ausdrücke beim Parsen vereinfachen oder umstrukturieren (z. B. wird Subtraktion zu CSSMathSum mit CSSMathNegate, Division zu CSSMathProduct mit CSSMathInvert). Die Reihenfolge und Art der Einträge entspricht daher nicht zwingend dem Quelltext.
Einfache Werte wie 10px sind CSSUnitValue und besitzen keine values-Eigenschaft – vorher mit instanceof CSSMathValue prüfen.
Der Iterator ist nach einmaligem Durchlauf erschöpft; für einen erneuten Durchlauf entries() nochmals aufrufen.

Siehe auch

Array.prototype.entries() CSSNumericArray.values() CSSNumericArray.keys() CSSNumericArray.forEach() CSSNumericValue.type()