在前端开发中，我们经常需要查询不同浏览器对网页技术的支持情况。而 MDN Web Docs 是一个非常好的资源库，其中包含了大量的文档和浏览器兼容性数据。为了方便使用这些数据，MDN 开源了一个 npm 包——mdn-browser-compat-data，该包提供了一个用于访问浏览器兼容性数据的 API。本文将详细介绍如何使用该 npm 包。
安装
首先，我们需要安装该 npm 包。可以通过以下命令进行安装：
npm install mdn-browser-compat-data
使用
获取数据
接下来，我们可以通过 require 或者 import 的方式引入该包并获取浏览器兼容性数据。以下示例展示了如何获取 Array.prototype.flat() 方法在不同浏览器中的兼容性信息：
const compatData = require("mdn-browser-compat-data");
const arrayFlatCompatData = compatData.javascript.builtins.Array.prototype.flat;
console.log(arrayFlatCompatData);上述代码会输出以下结果：
-- -------------------- ---- -------
-
--------- -
-------- -
------- - -------------- ---- --
----- - -------------- ----- ---------------- ---- --
-------- - -------------- ---- --
------- - -------------- ------- ---------------- ------ --
------ - -------------- ---- -
--
-------- ----------------------------------------------------------------------------------------
----------- -----------------------------------------------------------------------------------------------
------------ --
--------------- --
------ ---
------ ---
------- ----
-
-解读数据
上述代码中，我们获取了 Array.prototype.flat() 方法在不同浏览器中的支持情况。其中，__compat 属性表示该方法的兼容性信息。该属性下的 support 对象包含了不同浏览器对该方法的支持情况，以 Chrome 为例，其支持该方法的最低版本是 69。
在 __compat 下还有其他属性，如 mdn_url 是一个指向 MDN 文档页面的链接，chrome_url 则是一个指向 Chromium 源代码中实现该方法的文件的链接。这些属性可以帮助我们更好地理解该方法的兼容性信息。
示例代码
以下示例展示了如何使用 mdn-browser-compat-data 包来检查当前浏览器是否支持 Array.prototype.flat() 方法：
-- -------------------- ---- -------
----- ---------- - -----------------------------------
----- ------------------- - ----------------------------------------------------
-- --------------------------------------------------------------- -
----- ------------- - ---------------------------------------------------------------------
-- -------------- -- ---------------------------------------------------------------------- -
-------------------- ---------------------- -----
- ---- -
---------------------- ---------------------- -----
-
-上述代码中，我们首先获取了 Array.prototype.flat() 方法在不同浏览器中的兼容性信息。然后，我们检查当前浏览器是否是 Chrome 并且其版本号大于等于 version_added 属性指定的最低版本。如果是，则输出当前浏览器支持该方法的提示；否则，输出不支持该方法的警告。
结论
通过使用 `mdn-browser-compat
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44406