前言:其实这个问题很简单,但是对于小白我来说,一开始真的不知道该怎么解决。希望能够整理遇到这种情况的思路。
我是使用react + antd写的一个系统,需求是需要兼容低版本chrome浏览器(其中有各种理由需要去做这样一个事情)。高版本系统没有问题,但是chrome 52版本页面会出现异常。
页面直接报错:
Uncaught TypeError: Object.entries is not a function
Object.entries这个方法我以前没有用过,当然这次系统也没有用到,所以先排查为什么会报错,高版本显示没有问题,低版本出现问题,可以确定的是兼容性问题,但是我本身自己没有写这样的方法在代码里面,排查页面才把问题定位到antd到Progress进度条组件上。接下来怎么解决这个问题呢。
1、首先来看看Object.entries这个是什么意思(这里有一个坑)
先看看菜鸟教程怎么解释的:点击跳转
因为菜鸟教程的解释是可以兼容Chrome38以上,我有点迷茫了…
2、再看看权威文档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>
因为我的项目本身是使用umi搭的架子,其实也可以直接根据官方文档说明进行配置
都是可以实现的。
以上如有错误,欢迎批评指正