掌握 JavaScript 数组 Polyfill：让你的代码适用于所有浏览器！

**🌟 什么是 Polyfill？**

polyfill 是一段 JavaScript 代码，它为旧版浏览器可能不支持的新功能提供功能。

**⚡ 为什么你应该关心 Polyfill**

在现代 JavaScript 中，`map()`、`filter()`、`find()`、`includes()` 和 `flat()` 等新功能使数组的使用更加高效和富有表现力。但是，较旧的浏览器（例如 Internet Explorer）可能不完全支持这些功能。因此，您的代码可能无法在这些环境中按预期工作。

但别担心！ Polyfill 提供了一种解决方案。 Polyfill 本质上是模仿新功能行为的自定义代码，使其与旧版浏览器兼容。

在这篇文章中，我们将介绍如何为 `map` 和 `filter` 方法创建 polyfill，确保您的代码能够在所有浏览器上无缝运行。

让我们深入研究如何为两个强大的数组方法创建 polyfill：`map` 和 `filter`

**🛠️ map 方法的 Polyfill**

`map` 方法用于通过将函数应用于现有数组的每个元素来创建新数组。但是，如果您使用的是旧版浏览器，不支持 `map`，则可以编写自己的实现。

这是 `map` 的 polyfill：

if (!Array.prototype.map) {
    try {
        Array.prototype.map = function(callback) {
            const cbType = typeof callback;
            const arr = [];
            if (cbType !== "function") {
                throw new Error(`${cbType} ${callback} is not a function`);
            } else {
                const len = this.length;
                for (let i = 0; i < len; i++) {
                    const val = callback(this[i], i, this);
                    arr.push(val);
                }
            }
            return arr;
        };
    } catch (err) {
        console.error(err);
    }
}

此 polyfill 确保即使是较旧的浏览器也可以使用 `map()` 方法而不会出现任何错误。很简洁，对吧？😎

**在此 polyfill 中：**

我们首先检查 map 方法是否已经存在。如果不存在，我们就定义自己的版本。

我们优雅地处理错误，确保传递的回调是一个函数。

我们循环遍历数组，将回调应用于每个元素，并将结果存储在新数组中。

**测试地图 Polyfill**

要测试上述 polyfill 是否正常工作，您需要将函数重命名为某个独特的名称（因为原生 `map` 方法已内置于大多数现代浏览器（包括 Chrome）中）。将 `map` 重命名为 `cmap` 并使用以下代码：

if (!Array.prototype.cmap) {
    try {
        Array.prototype.cmap = function(callback) {
            const cbType = typeof callback;
            const arr = [];
            if (cbType !== "function") {
                throw new Error(`${cbType} ${callback} is not a function`);
            } else {
                const len = this.length;
                for (let i = 0; i < len; i++) {
                    const val = callback(this[i], i, this);
                    arr.push(val);
                }
            }
            return arr;
        };
    } catch (err) {
        console.error(err);
    }
}

现在，将上述代码粘贴到 Chrome DevTools 的控制台中并运行以下代码来测试 polyfill：

[1, 2, 5, 4, 0, -1].cmap((item, i) => item + i); // [1, 3, 6, 5, 1, 0]

这应该像本机“map”方法一样工作，即使在缺乏对“map”的内置支持的老版本浏览器中也是如此。

**🛠️ 过滤方法的 Polyfill**

类似地，`filter` 方法会创建一个新数组，其中包含符合给定条件的所有元素。如果您在`filter`不可用的环境中工作，您也可以为其创建一个 polyfill。

这是 `filter` 的 polyfill：

if (!Array.prototype.filter) {
    try {
        Array.prototype.filter = function(callback) {
            const arr = [];
            const cbType = typeof callback;
            if (cbType !== "function") {
                throw new Error(`${cbType} ${callback} is not a function`);
            } else {
                const len = this.length;
                for (let i = 0; i < len; i++) {
                    const val = callback(this[i], i, this);
                    if (val) {
                        arr.push(this[i]);
                    }
                }
            }
            return arr;
        };
    } catch (err) {
        console.error(err);
    }
}

**此 polyfill 函数的作用是：**

它检查过滤方法是否被支持。

如果没有，它会添加一个循环遍历数组并应用回调函数的自定义实现。

如果回调返回真值，则该元素将包含在新数组中。

**测试过滤器 Polyfill**

要在 Chrome DevTools 中测试 `filter` polyfill，请遵循与 `map` 方法相同的过程。将 polyfill 粘贴到控制台中，然后运行以下代码：

[1, 2, 5, 4, 0, -1].filter((item) => item > 0); // [1, 2, 5, 4]

这将返回数组中大于 0 的元素，就像本机的“过滤器”方法一样。

💡 何时使用 Polyfills**

如果您要构建需要在各种浏览器（尤其是旧版浏览器）上运行的应用程序，则 Polyfill 必不可少。但以下是一些提示，可确保您有效地使用它们：

了解你的受众：在你疯狂使用 polyfill 之前，请检查你的目标浏览器。你真的需要所有功能的 polyfill 吗，还是只需要特定浏览器中的某些方法的 polyfill？

使用构建工具：Babel 等工具可以根据您的目标环境自动为您添加 polyfill。它非常高效，可确保您不会因不必要的 polyfill 而使代码过载。

使用 Polyfill 服务：如果您想避免在应用中捆绑过多的 polyfill，Polyfill.io 等服务可以根据用户的浏览器仅提供他们实际需要的 polyfill。这样可以保持您的应用包很小，并且运行速度极快！

不要过度：polyfill 会添加额外的代码，这可能会影响应用的性能。仅对目标浏览器不支持的方法进行 polyfill。

🎯结论

Polyfill 是确保您的 JavaScript 代码在所有浏览器（即使不支持最新功能的浏览器）上都能正常运行的绝佳方法。通过创建 polyfill，您可以保持与旧版浏览器的兼容性，而无需牺牲功能。

无论您是在处理旧项目，还是只想确保更广泛的受众可以运行您的代码，polyfill 都是一个简单而强大的解决方案。您还可以将此概念扩展到其他 JavaScript 功能，让您的代码库保持现代且易于访问。

CLIS.CC

掌握 JavaScript 数组 Polyfill：让你的代码适用于所有浏览器！