CSSFontFeatureValuesMap.forEach() — Methode · JavaScript-Referenz

Signatur

CSSFontFeatureValuesMap.prototype.forEach(callbackFn, thisArg)

Beschreibung

Eine CSSFontFeatureValuesMap ist eine „maplike“-Struktur. Sie enthält die benannten Feature-Werte eines Blocks innerhalb einer @font-feature-values-Regel, zum Beispiel @styleset, @swash oder @annotation. Die Schlüssel sind die selbst vergebenen Namen (z. B. fancy), die Werte sind Arrays mit ganzen Zahlen, also den Indizes der OpenType-Features.

Mit forEach() gehst du alle Einträge nacheinander durch, genau wie bei Map.prototype.forEach(). Der Callback erhält die Argumente in der Reihenfolge Wert, Schlüssel, Map. Das ist praktisch, wenn du Feature-Definitionen auslesen, protokollieren, prüfen oder in ein anderes Format umwandeln willst, etwa für einen Editor für Schrift-Features oder ein Debugging-Werkzeug.

Du erreichst die Map über die Eigenschaften einer CSSFontFeatureValuesRule: annotation, ornaments, stylistic, swash, characterVariant, styleset und historicalForms.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	(value: number[], key: string, map: CSSFontFeatureValuesMap) => void		Wird für jeden Eintrag aufgerufen. Sie erhält den `value` (Array mit den Feature-Indizes), den `key` (Name des Feature-Werts) und die `map`, die gerade durchlaufen wird.
$thisArg	any	undefined	Wert, der beim Aufruf von `callbackFn` als `this` gilt. Bei Pfeilfunktionen hat er keine Wirkung.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. forEach() lässt sich also nicht verketten und liefert kein neues Array.

Beispiele

Alle Stylesets einer @font-feature-values-Regel ausgeben

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @font-feature-values MyFont {
    @styleset { nice: 12; double: 2 4; }
  }
`);

const rule = sheet.cssRules[0]; // CSSFontFeatureValuesRule

rule.styleset.forEach((value, key) => {
  console.log(`${key}:`, value);
});

nice: [12] double: [2, 4]

Feature-Werte in ein einfaches Objekt umwandeln

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @font-feature-values Brand Sans {
    @swash { flowing: 1; wild: 3; }
  }
`);

const [rule] = sheet.cssRules;
const swashes = {};

rule.swash.forEach((value, key) => {
  swashes[key] = value[0];
});

console.log(JSON.stringify(swashes));

{"flowing":1,"wild":3}

thisArg mit einer normalen Funktion verwenden

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @font-feature-values Serif Pro {
    @annotation { circled: 1; boxed: 2; }
  }
`);

const collector = { prefix: 'annotation', lines: [] };

sheet.cssRules[0].annotation.forEach(function (value, key) {
  this.lines.push(`${this.prefix}(${key}) → ${value.join(' ')}`);
}, collector);

console.log(collector.lines.join('\n'));

annotation(circled) → 1 annotation(boxed) → 2

// Wichtig · Fallstricke

Reihenfolge der Argumente: Der Callback erhält zuerst den Wert und erst dann den Schlüssel. Das ist dieselbe Reihenfolge wie bei Map.prototype.forEach(), wird aber oft verwechselt.
Werte sind Arrays: Auch ein einzelner Wert wie nice: 12 kommt als [12] an und nicht als Zahl.
Kein vorzeitiger Abbruch: break und return beenden die Schleife nicht. Wenn du abbrechen willst, nimm for (const [key, value] of map) oder map.entries().
Änderungen während des Durchlaufs: Fügst du während der Iteration mit set() Einträge hinzu, werden sie noch besucht. Mit delete() entfernte Einträge werden übersprungen, sofern sie noch nicht an der Reihe waren.
Browser-Unterstützung: @font-feature-values und CSSFontFeatureValuesMap gibt es in Chromium ab Version 111 und in Safari ab 17.2. Firefox unterstützt die Regel schon lange, stellt die maplike-Eigenschaften der CSSFontFeatureValuesRule aber nicht in allen Versionen bereit. Prüfe vorher, ob es sie gibt, etwa mit 'styleset' in rule.
Der Konstruktor new CSSStyleSheet() mit replaceSync() ist in modernen Browsern verfügbar. Alternativ kannst du die Regeln aus document.styleSheets auslesen. Bei Stylesheets von fremden Origins verhindert CORS allerdings den Zugriff auf cssRules.

Siehe auch

Map.prototype.forEach() CSSStyleSheet.replaceSync() CSSFontFeatureValuesMap.[Symbol.iterator]() CSSFontFeatureValuesMap.clear() CSSFontFeatureValuesMap.delete()