JavaScript Pollyfills

理解 JavaScript 中的 Polyfill

在 JavaScript 开发中，**polyfill** 是一段代码（通常是 JavaScript），用于在不支持该功能的旧版浏览器上提供现代功能。polyfill 允许开发人员使用新的 JavaScript 功能，而不必担心与旧环境的兼容性问题。

什么是 Polyfill？

polyfill 本质上是一种向后兼容的填充程序，可复制 JavaScript 中现代功能的行为。例如，如果浏览器不支持“Array.prototype.map”，则可以编写 polyfill 来添加此功能。

为什么要使用 Polyfill？

跨浏览器兼容性：确保您的代码可以在旧版浏览器上运行。

面向未来：使用现代 JavaScript 功能，无需等待浏览器全面采用。

一致的行为：保证该功能在所有环境中的行为方式相同。

在我们深入研究一些示例之前，面试中最常见的 Polyfill 问题之一是 Promise.all。观看我们的视频 -

示例：Array.prototype.map 和 Array.prototype.filter 的 Polyfill

Array.prototype.map Polyfill

`map` 方法创建一个新数组，其中填充了对原始数组中每个元素调用所提供函数的结果。

这是 `Array.prototype.map` 的 polyfill：

if (!Array.prototype.map) {
  Array.prototype.map = function (callback, thisArg) {
    if (this == null) {
      throw new TypeError('Array.prototype.map called on null or undefined');
    }
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    const result = [];
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        result[i] = callback.call(thisArg, this[i], i, this);
      }
    }
    return result;
  };
}

Array.prototype.filter Polyfill

`filter` 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

这是 `Array.prototype.filter` 的 polyfill：

if (!Array.prototype.filter) {
  Array.prototype.filter = function (callback, thisArg) {
    if (this == null) {
      throw new TypeError('Array.prototype.filter called on null or undefined');
    }
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    const result = [];
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        if (callback.call(thisArg, this[i], i, this)) {
          result.push(this[i]);
        }
      }
    }
    return result;
  };
}

使用 Polyfilled 方法

下面展示了如何使用 polyfilled `map` 和 `filter` 方法：

const numbers = [1, 2, 3, 4, 5];

// Using map to double the numbers
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

// Using filter to get even numbers
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // Output: [2, 4]

Polyfill 的最佳实践

检查本机支持：始终检查浏览器是否已支持该功能，以避免覆盖本机实现。

使用现代工具：利用 Babel 或 core-js 等工具来自动化项目中的 polyfill。

注意性能：与本机实现相比，Polyfill 可能会对性能产生影响。

限制 Polyfill：仅包含目标受众的浏览器所缺少的功能的 Polyfill。

结论

Polyfill 对于创建向后兼容的 JavaScript 应用程序至关重要。通过了解如何编写和使用 polyfill，您可以确保您的代码能够在不同的浏览器和环境中无缝运行。`map` 和 `filter` 的示例展示了 polyfill 对于扩展 JavaScript 功能是多么简单和有效。

在我们的 YouTube 频道上观看更多内容 - Frontend With Chandel

CLIS.CC