背景
最近项目中有一个级联的筛选组件,出于性能考虑,减少接口请求,后端把相关数据和映射直接以json的形式全部给我了,让我在前端来做级联,点击时不再请求接口。这样前端逻辑就一下子复杂起来了,基本上会涉及到数组和对象的常见处理方法,比如求数组的交集、并集、去重、浅/深拷贝等等。如图:
过程
在书写逻辑过程中,为了减少代码量,我还用到了Array对象的flat()方法,用于将指定数组扁平化,然后再做去重等操作。自测没发现什么问题就直接放测试环境了。可惜测试测的真的很仔细,一上来就是IE11,说为什么在IE下面筛选点不动,我知道肯定是报错了。
通过IE的开发者工具,发现了一条报错,对象不支持“flat”属性或方法。
又是IE,真是烦人,webpack打包的时候,babel竟然没编译这个api,时间有限,我直接百度了,发现确实是flat不兼容导致的,那么直接写个shim引入一下即可。
结果
😄以下代码引入即可解决浏览器不支持flat的问题。
if (!Array.prototype.flat) {
Array.prototype.flat = function (count) {
let c = count || 1;
let len = this.length;
let exe = [];
if (this.length == 0) return this;
while (c--) {
let _arr = [];
let flag = false;
if (exe.length == 0) {
flag = true;
for (let i = 0; i < len; i++) {
if (this[i] instanceof Array) {
exe.push(...this[i]);
} else {
exe.push(this[i]);
}
}
} else {
for (let i = 0; i < exe.length; i++) {
if (exe[i] instanceof Array) {
flag = true;
_arr.push(...exe[i]);
} else {
_arr.push(exe[i]);
}
}
exe = _arr;
}
if (!flag && c == Infinity) {
break;
}
}
return exe;
};
}
评论区