javascript - 互联网浏览器 : Ignore unknown ES6 syntax

Question

要修复仅在 Firefox 中出现的错误，我需要使用 FontFace 的 loaded Promise。我目前使用以下代码:

if (document.fonts) {
    for (var fontFace of document.fonts.values()) {
        if (fontFace['family'] == fontFamily) {
            fontFace.loaded.then(doStuff);
        }
    }
} else {
    doStuff();
}

这有效，并且仅针对支持字体加载 API 的浏览器。但由于 for .. of，Internet Explorer 会记录错误并停止 JS 执行。将代码放入 try .. catch block 中不起作用，通过 window.onerror 忽略错误可能会起作用，但相当 hacky。

是否有一种方法可以迭代 IE 也支持的 document.fonts.values ，或者您是否知道在浏览器中使用 loaded Promise 的更好方法支持吗？

Answer 1

我推荐

const fontFace = Array.from(document.fonts).find(face => face.family === fontFamily);
if (fontFace) {
  fontFace.loaded.then(doStuff);
}

Array.from 从可迭代对象创建一个数组，然后您可以使用普通的 Array.prototype.some 来检查匹配。

然后您可以将整个检查简化为

const fontFace = document.fonts &&
  Array.from(document.fonts).find(face => face.family === fontFamily);

if (fontFace) fontFace.loaded.then(doStuff);
else doStuff();

假设您想要运行 doStuff(如果字体都不匹配)。