CSSNumericArray.values() — Methode · JavaScript-Referenz

Signatur

CSSNumericArray.prototype.values()

Beschreibung

Die Methode values() gehört zum CSSNumericArray-Interface des CSS Typed Object Model (Houdini). Ein CSSNumericArray enthält die Operanden eines mathematischen CSS-Ausdrucks. Du bekommst ihn über die Eigenschaft values von CSSMathSum, CSSMathProduct, CSSMathMin und CSSMathMax.

values() gibt einen Iterator zurück, der jedes Element (einen CSSNumericValue, z. B. CSSUnitValue oder einen verschachtelten CSSMathValue) in der ursprünglichen Reihenfolge liefert. Weil CSSNumericArray selbst iterierbar ist, macht for...of direkt auf dem Array dasselbe. Die Methode ist trotzdem nützlich, wenn du den Iterator ausdrücklich brauchst, etwa für next() oder Array.from().

Typischer Einsatz: Du zerlegst calc()-, min()- oder max()-Ausdrücke, um einzelne Einheiten und Werte zu prüfen, umzurechnen oder zu protokollieren.

Rückgabewert

Typ

Iterator<CSSNumericValue>

Beschreibung

Ein neuer Array-Iterator, der nacheinander jedes CSSNumericValue-Element des Arrays liefert.

Beispiele

Operanden einer CSSMathSum durchlaufen

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

for (const value of sum.values.values()) {
  console.log(value.value, value.unit);
}

10 "px" 50 "percent" 2 "em"

Iterator manuell mit next() weiterschalten

const max = new CSSMathMax(CSS.px(100), CSS.vw(20));
const it = max.values.values();

console.log(it.next().value.toString());
console.log(it.next().value.toString());
console.log(it.next().done);

100px 20vw true

calc()-Ausdruck parsen und Operanden-Typen ermitteln

const parsed = CSSNumericValue.parse('calc(100% - 20px)');

if (parsed instanceof CSSMathSum) {
  const types = Array.from(parsed.values.values(), (v) => v.constructor.name);
  console.log(types);
}

["CSSUnitValue", "CSSMathNegate"]

// Wichtig · Fallstricke

Browser-Kompatibilität: Das CSS Typed OM gibt es in Chromium-Browsern (ab Chrome 66) und in Safari ab 16.4. Firefox unterstützt es nicht. Prüfe die Unterstützung vorher, z. B. mit if ('CSSNumericArray' in window).
CSSNumericArray ist nur lesbar. Du kannst über den Iterator keine Elemente hinzufügen oder ändern. Wenn du einen anderen Ausdruck brauchst, erzeuge ein neues CSSMathSum (oder ein ähnliches Objekt).
Die Elemente sind nicht immer CSSUnitValue. Subtraktion wird zum Beispiel als CSSMathNegate dargestellt, Division als CSSMathInvert. Prüfe den Typ, bevor du auf .value oder .unit zugreifst.
Der Iterator ist nach einem Durchlauf verbraucht. Wenn du die Werte erneut brauchst, rufe values() noch einmal auf.

Siehe auch

CSSNumericArray CSSNumericArray.entries() CSSNumericArray.keys() CSSNumericArray.forEach() CSSNumericArray.length CSSMathSum CSSNumericValue.parse()