Lighthouse 是 Google 出品的一款用于评估网站性能的工具，它能够评估网站的性能、可访问性、最佳实践、SEO 等方面的指标。Lighthouse 评估完成后，它会生成一个 JSON 格式的报告，其中包含了评估指标的详细数据。然而，这个报告数据的结构比较复杂，不太容易解析，因此需要一些技巧来解析它。
本文将介绍如何利用 ES11 中的 Object [fromEntries] 方法来解析 Lighthouse 报告数据，帮助前端开发者更好地理解 Lighthouse 报告数据，并从中获取有用的信息。
Object [fromEntries] 方法简介
ES11 中新增加了一个 Object [fromEntries] 方法，它可以将一个由键值对组成的数组转换为一个对象。这个方法的语法如下：
Object.fromEntries(iterable);
其中，iterable 是一个由键值对组成的数组，例如：
const arr = [['name', 'Tom'], ['age', 18]];
使用 Object [fromEntries] 方法可以将这个数组转换为一个对象：
const obj = Object.fromEntries(arr);
// obj = {name: 'Tom', age: 18}解析 Lighthouse 报告数据
Lighthouse 报告数据是一个由多个对象组成的数组，每个对象中包含了评估指标的详细数据。其中，每个对象的 keys 属性表示了这个对象中所有属性的名称，而 values 属性则表示了这个对象中所有属性的值。
我们可以利用 Object [fromEntries] 方法将这个对象中的 keys 和 values 转换为一个对象。具体代码如下：
const report = /* Lighthouse 报告数据 */; const entries = report.map((obj) => [obj.id, obj.score]); const result = Object.fromEntries(entries);
这段代码中，我们将 Lighthouse 报告数据中每个对象的 id 和 score 属性提取出来，利用 map 方法将它们转换为键值对的数组，最后使用 Object [fromEntries] 方法将它们转换为一个对象。
示例代码
下面是一个完整的示例代码，它可以将 Lighthouse 报告数据中的性能指标和可访问性指标提取出来，并输出到控制台上：
// javascriptcn.com 代码示例
const report = /* Lighthouse 报告数据 */;
const categories = ['performance', 'accessibility'];
const result = {};
categories.forEach((category) => {
const entries = report.find((obj) => obj.id === category).score.details.items.map((item) => [item.id, item.score]);
result[category] = Object.fromEntries(entries);
});
console.log(result);这段代码中，我们首先定义了一个数组 categories，它包含了我们想要提取的指标名称。然后，我们使用 forEach 方法遍历 categories 数组，对于每个指标，我们使用 find 方法找到对应的对象，然后提取出它的 score.details.items 属性，将它们转换为键值对的数组，最后使用 Object [fromEntries] 方法将它们转换为一个对象。最终，我们将所有指标的对象存储在 result 对象中，并输出到控制台上。
总结
利用 ES11 中的 Object [fromEntries] 方法可以帮助我们更方便地解析 Lighthouse 报告数据，从中获取有用的信息。本文介绍了如何使用 Object [fromEntries] 方法来解析 Lighthouse 报告数据，并给出了示例代码。希望这篇文章能够帮助前端开发者更好地理解 Lighthouse 报告数据，并从中获取有用的信息。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6559553fd2f5e1655d3c27f5