Array flat方法及浏览器兼容

vlambda
2021-09-12

Array flat方法及浏览器兼容

问题描述

前端架构一直使用react技术栈，最近由于一些原因需要了解VUE相关技术。在新的办公环境下，由于google chrome（版本：67.3396.99 32位）并不提供flat方法导致element-ui导航栏显示异常。

异常信息如下：

Uncaught (in promise) TypeError: slot.flat is not a function at Proxy.eval (index.js?a343:734) at renderComponentRoot (runtime-core.esm-bundler.js?5c40:761) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4531) at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160) at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4657) at mountComponent (runtime-core.esm-bundler.js?5c40:4440) at processComponent (runtime-core.esm-bundler.js?5c40:4398) at patch (runtime-core.esm-bundler.js?5c40:3993) at mountChildren (runtime-core.esm-bundler.js?5c40:4189)    at processFragment (runtime-core.esm-bundler.js?5c40:4357

Flat方法

flat() 函数提供了将一组数组项串联成一个全新的数组并在函数完成后返回新数组的能力。由于这个函数产生了一个全新的数组，所以一旦函数完成操作后，任何包含在原始数组中的现有的、完全独立的数组都不会被改变，在开始操作之前，不需要采取任何预防措施。

flat() 函数仅采用一个参数，该参数是可选的，唯一的参数是 depth 参数。如果原始数组包含一个或多个嵌套数组结构，则此参数决定函数将多少数组层压扁为单个层。由于该参数是可选的，所以它的默认值为 1，并且在函数完成时，只有单层数组将被平展到返回的全新数组中。

兼容方案

首先计划引入babel-polyfill组件来处理浏览器兼容问题，然而并没有任何卵用。于是就决定手动实现flat方法并注册到Array类型中。

Object.defineProperty(Array.prototype, 'flat', { value: function (depth = 1) { return this.reduce(function (flat, toFlatten) { return flat.concat( Array.isArray(toFlatten) && depth >1 ? toFlatten.flat(depth - 1) : toFlatten ) },[]) }})