Uncaught TypeError: Object.entries is not a function

前言：其实这个问题很简单，但是对于小白我来说，一开始真的不知道该怎么解决。希望能够整理遇到这种情况的思路。

我是使用react + antd写的一个系统，需求是需要兼容低版本chrome浏览器(其中有各种理由需要去做这样一个事情)。高版本系统没有问题，但是chrome 52版本页面会出现异常。下面就来分析一下：

页面直接报错：

Uncaught TypeError: Object.entries is not a function

Object.entries这个方法我以前没有用过，当然这次系统也没有用到，所以先排查为什么会报错，高版本显示没有问题，低版本出现问题，可以确定的是兼容性问题，但是我本身自己没有写这样的方法在代码里面，排查页面才把问题定位到antd到Progress进度条组件上。接下来怎么解决这个问题呢。

首先来看看Object.entries这个是什么意思(这里有一个坑）
先看看菜鸟教程怎么解释的：点击跳转

因为菜鸟教程的解释是可以兼容Chrome38以上，我有点迷茫了…
再看看权威文档MDN:点击跳转

所有有些时候还是得看权威文档。
剩下得就是怎么解决了这个问题了。
第一种办法：使用Polyfill
这个是babel里面的一个包点击查看详情，这个文档已经说得很详细了，其实他的原理也是，就是如果低版本或者IE不支持promise，那它就给你创建一个promise的方法。
第二种方法，
其实就是利用polyfill的原理去做，直接上代码：

    
 <script>
    const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
    const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
    const concat = Function.bind.call(Function.call, Array.prototype.concat);
    const keys = Reflect.ownKeys;
    if (!Object.entries) {
        Object.entries = function entries(O) {
            return reduce(keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
        };
    }
</script>

我使用的是第二种办法成功了