如何在JavaScript中使用Polyfill解决ES6旧设备兼容问题

你的推测完全正确，报错是因为老旧设备的浏览器不支持ES6的数组解构赋值、Object.entries()以及for...of循环这些特性。以下是两种可行的解决方法：

方法一：手动改写为ES5兼容代码 #

直接把ES6特性替换成老旧浏览器支持的ES5写法，针对你的报错代码，改写如下：

替代Object.entries() + for...of + 解构 #

// 先获取对象的所有键名
var rowKeys = Object.keys(allRows);
// 使用普通for循环遍历
for (var i = 0; i < rowKeys.length; i++) {
  var rowName = rowKeys[i];
  var value = allRows[rowName];
  // 这里写你原来循环体内的代码
}

针对更老旧的浏览器（如IE8及以下） #

如果设备连Object.keys()都不支持，改用for...in循环并结合hasOwnProperty避免遍历原型链属性：

for (var rowName in allRows) {
  // 确保只遍历对象自身的属性
  if (allRows.hasOwnProperty(rowName)) {
    var value = allRows[rowName];
    // 这里写你原来循环体内的代码
  }
}

方法二：使用Babel转译ES6代码 #

如果你的项目中有大量ES6代码，手动改写效率太低，可以用Babel把整个项目的ES6代码转译为ES5：

1. 安装Babel依赖：

   npm install @babel/core @babel/cli @babel/preset-env --save-dev
   

2. 在项目根目录创建.babelrc配置文件：

   {
     "presets": [
       ["@babel/preset-env", {
         "targets": {
           "browsers": ["last 2 versions", "ie >= 8"]
         }
       }]
     ]
   }
   

3. 运行转译命令（假设你的源码在src目录，输出到dist目录）：

   npx babel src --out-dir dist
   

转译后直接部署dist目录下的代码即可兼容绝大多数老旧设备。

内容的提问来源于stack exchange，提问作者White Wolf