CSSNumericArray.keys() — Methode · JavaScript-Referenz

Signatur

CSSNumericArray.prototype.keys()

Beschreibung

Ein CSSNumericArray ist eine schreibgeschützte, listenartige Sammlung von CSSNumericValue-Objekten. Man bekommt es nicht über einen eigenen Konstruktor, sondern über die Eigenschaft values mathematischer Ausdrücke aus dem CSS Typed OM, zum Beispiel CSSMathSum, CSSMathProduct, CSSMathMin und CSSMathMax. Diese Objekte stehen für CSS-Funktionen wie calc(), min() oder max().

keys() funktioniert wie Array.prototype.keys(): Die Methode gibt einen Iterator zurück, der nacheinander die numerischen Indizes der Operanden liefert. Das ist nützlich, wenn Sie wissen müssen, an welcher Stelle ein Operand steht, etwa zur Fehlersuche, für Beschriftungen in Entwicklerwerkzeugen oder für den gezielten Zugriff über array[index].

Brauchen Sie Index und Wert zusammen, ist entries() meist praktischer. Wenn Sie nur die Werte brauchen, verwenden Sie values() oder iterieren Sie das Objekt direkt mit for...of.

Rückgabewert

Typ

Iterator<number>

Beschreibung

Ein neuer Array-Iterator, der die Indizes von 0 bis length - 1 liefert.

Beispiele

Indizes der Operanden einer Summe ausgeben

// Entspricht calc(10px + 50%)
const sum = new CSSMathSum(CSS.px(10), CSS.percent(50));

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

0 "10px" 1 "50%"

Iterator mit Spread-Syntax in ein Array umwandeln

const max = new CSSMathMax(CSS.px(100), CSS.vw(20), CSS.em(5));

const indices = [...max.values.keys()];
console.log(indices);
console.log(max.values.length);

[0, 1, 2] 3

calc()-Ausdruck aus dem Inline-Stil untersuchen

const box = document.querySelector('.box');
box.attributeStyleMap.set('width', 'calc(100% - 20px)');

const width = box.attributeStyleMap.get('width');

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

Operand 0: CSSUnitValue Operand 1: CSSMathNegate

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM und damit CSSNumericArray gibt es in Chromium-Browsern (Chrome, Edge, Opera) und in neueren Safari-Versionen. Firefox unterstützt es nicht. Prüfen Sie die Verfügbarkeit vorher, zum Beispiel mit if ('CSSMathSum' in window).
Kein echtes Array: CSSNumericArray hat keine Methoden wie map() oder filter(). Wandeln Sie es bei Bedarf mit [...arr] oder Array.from(arr) in ein echtes Array um.
Einmal verwendbar: Ein Iterator ist nach dem Durchlaufen verbraucht. Für einen zweiten Durchlauf rufen Sie keys() erneut auf.
Subtraktion wird zu Negation: Bei calc(a - b) steht der zweite Operand als CSSMathNegate in der Liste. Es gibt keinen eigenen Subtraktionstyp.
Das Array ist schreibgeschützt. Neue Operanden fügen Sie nicht über Indizes hinzu, sondern indem Sie einen neuen Ausdruck erzeugen, etwa mit add() oder new CSSMathSum().

Siehe auch

CSSNumericArray CSSNumericArray.entries() CSSNumericArray.values() CSSNumericArray.forEach() CSSNumericArray.length CSSMathSum Array.prototype.keys()