js中flat方法的实现原理

Array.prototype.flat()

在Array的显示原型下有一个flat方法，可以将多维数组，降维，传的参数是多少就降多少维

let arr = [1, [2, 3, [4, 5, [12, 3, "zs"], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]]];
console.log(arr.flat(Infinity));//[1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4]

 

 

自定义flat的步骤

1、第一步是类型判断，需要判断当前调用方法的this是否为一个数组，若不是数组则返回undefined，Array下有一个isArray的方法可以检测是否为一个数组，下面我提供一种万能的类型检测方法

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

//万能的类型检测方法
const checkType = (arr) => {
    return Object.prototype.toString.call(arr).slice(8, -1);
}

2、第二步需要遍历数组，并判断内部的子元素是否也是数组，如果是数组则继续拆（使用到递归和闭包），若不是则直接放入预先创建的新数组  

let arr = [1, [2, 3, [4, 5, [12, 3, "zs"], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]]];

//万能的类型检测方法
const checkType = (arr) => {
	return Object.prototype.toString.call(arr).slice(8, -1);
}
//自定义flat方法，注意：不可以使用箭头函数，使用后内部的this会指向window
Array.prototype.myFlat = function(num) {
	//判断第一层数组的类型
	let type = checkType(this);
	//创建一个新数组，用于保存拆分后的数组
	let result = [];
	//若当前对象非数组则返回undefined
	if (!Object.is(type, "Array")) {
		return;
	}
	//遍历所有子元素并判断类型，若为数组则继续递归，若不为数组则直接加入新数组
	this.forEach((item) => {
		let cellType = checkType(item);
		if (Object.is(cellType, "Array")) {
			//形参num，表示当前需要拆分多少层数组，传入Infinity则将多维直接降为一维
			num--;
			if (num < 0) {
				let newArr = result.push(item);
				return newArr;
			}
			//使用三点运算符解构，递归函数返回的数组，并加入新数组
			result.push(...item.myFlat(num));
		} else {
			result.push(item);
		}
	})
	return result;
}
console.time();

console.log(arr.flat(Infinity)); //[1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4];

console.log(arr.myFlat(Infinity)); //[1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4];
//自定义方法和自带的flat返回结果一致!!!!
console.timeEnd();