面试题：JavaScript数组迭代兼容性优化与性能权衡

Question

在一个大型项目中，数组迭代操作频繁。既要考虑不同浏览器的兼容性，又要保证性能最优。已知项目需要兼容IE11及现代主流浏览器，对于数组迭代方法如filter、reduce等，如何在兼容性和性能之间进行权衡？请详细说明思路并给出具体的优化方案。

Answer 1

思路

1. 兼容性方面：IE11 不支持 ES6 新增的数组迭代方法如 filter、reduce 等。为确保兼容性，可采用两种常见策略：使用 Babel 等转译工具，将 ES6 代码转换为 ES5 代码；或者手动为数组原型添加 polyfill。
2. 性能方面：原生的数组迭代方法（在支持的浏览器中）通常性能较好，因为它们是由浏览器底层优化实现的。在兼容性处理时，应尽量复用原生方法以保证性能。

优化方案

1. 使用 Babel 转译：
   • 在项目构建工具（如 Webpack）中配置 Babel。安装 @babel/core、@babel/preset - env 等相关依赖。
   • 在 .babelrc 或 babel.config.js 文件中进行配置，例如：

{
  "presets": [
    [
      "@babel/preset - env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

- 这样，在构建过程中，Babel 会将 ES6 数组迭代方法等代码转换为 ES5 兼容的代码，同时利用 `@babel/preset - env` 根据目标浏览器自动引入必要的 polyfill。

2. 手动添加 polyfill： - 对于 filter 方法：

if (!Array.prototype.filter) {
  Array.prototype.filter = function (callback) {
    const newArray = [];
    for (let i = 0; i < this.length; i++) {
      if (callback(this[i], i, this)) {
        newArray.push(this[i]);
      }
    }
    return newArray;
  };
}

- 对于 `reduce` 方法：

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function (callback, initialValue) {
    let accumulator = initialValue;
    let startIndex = 0;
    if (accumulator === undefined) {
      accumulator = this[0];
      startIndex = 1;
    }
    for (let i = startIndex; i < this.length; i++) {
      accumulator = callback(accumulator, this[i], i, this);
    }
    return accumulator;
  };
}

- 在使用这些 polyfill 时，要确保在项目中尽早引入，这样在后续代码中使用 `filter`、`reduce` 等方法时就可保证兼容性。同时，在现代浏览器中，由于原生方法性能更好，仍然会优先使用原生的数组迭代方法，从而兼顾了性能。