侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 45 篇文章
  • 累计创建 40 个标签
  • 累计收到 464 条评论

目 录CONTENT

文章目录

对象不支持"flat"属性或方法

M酷
2021-02-09 / 0 评论 / 6 点赞 / 3,698 阅读 / 1,299 字 / 正在检测是否收录...
广告 广告

背景

最近项目中有一个级联的筛选组件,出于性能考虑,减少接口请求,后端把相关数据和映射直接以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;
  };
}

6
广告 广告

评论区