ES10-flat 兼容性处理(附代码 无脑cv)

Posted 2021-07-05 前端呆头鹅

环境：vue - cli

介绍：flat是es10中的数组打平函数，可传入一个参数，该参数为数组打平的深度，该参数可省略，默认为1。

var arr = [1,[1,[2]],[{},[3],4],[[[5]]]];
var arr2 = arr1.flat(); // === var arr2 = arr1.flat(1);
console.log(arr2); // [1,1,[2],{},[3],4,[[5]]]

背景：最近接手的项目中出现了部分低版本浏览器报错的问题。

报错内容：flat is not a function

解决过程：

将Array.prototype打印，里面果然没有方法flat。

经查询，vue3脚手架中绑定的babel对代码兼容性的处理使用core.js@2，而对flat的支持在core.js@3中才出现，根据网友的提示，在vue3中手动升级core.js的版本也不太好使(有坑)。所以这里将方法flat代码实现后添加到Array.prototype中即可。

操作流程：

添加文件babelAdd.js，放置兼容性代码。

(function ArrayAdd(){
	if(Array.prototype.flat instanceof Function) {
		console.log('Array.protype.flat IS Exist')
	}else {
		Array.prototype.flat = function(i = 1){
			var RES = [];
			var ii = 0;
			(function f(arr, ii){
				var arr = JSON.parse(JSON.stringfy(arr));
				for(let j = 0; j < arr.length; j++){
					if(Array.isArray(arr[j]) && ii < i){
						f(arr[j], ii+1);
					}else {
						RES.push(arr[j]);
					}
				}
			})(this, 0);
			return RES;
		}
	}	
})()

在main.js中引入该文件babelAdd.js。

import './babelAdd'

这样就好了，只需要两步就解决该问题了。