您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

ES6+ flat()

在开发中有时会遇到对多维数组进行拍平处理,数组的拍平就是将嵌套多层的数组进行降维操作,也就是对数值进行扁平化。然而在 ES5 是没有能处理这样的需求的,大部分都会借助库的方式来实现。

本节我们要学习的是 ES6 提供的 flat() ,对多维数组进行扁平化操作,而且可以对数组中的空项进行移除。

ES5 中没有类似的,如果要达到目标结果需要自己写针对性处理。

function flat(arr){
	if(Object.prototype.toString.call(arr) != "[object Array]"){return false};
	let res = [];
	for(var i=;i<arr.length;i++){
		if(arr[i] instanceof Array){
			res = res.concat(flat(arr[i]))
		}else{
			res.push(arr[i])
		}
	}
	return res;
};
var arr = [,,[,,,[,,],],,[,]];
flat(arr);	// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

上面的是实现了数组扁平化的,在里面我们会定义空数组然后递归地去 flat() 处理原数组中的每一项,如果传入的是元素是数组,则要继续递归处理,最终会得到一维的数组。此只能把任意维度的数组转化为一维数组,不能转化为指定维度的数组,如果需要的话还得继续处理。

由此可见,扁平化数组是一件很麻烦的事,ES6 提供的 flat() 完美地了扁平化数组所带来的问题,下面我们就来学习 flat() 吧。

使用 flat() 会接收参数,这个参数是,是要处理扁平化数组的深度,后的新数组是独立存在的,不会对原数组产生影响。由此我们也可以使用它深拷贝数组,下文我们会用案例说明。

语法使用:

var newArray = arr.flat([depth])

参数解释:

var arr = [, , [, , [, ]]];
arr.flat();      // [1, 2, 3, 4, [5, 6]]
arr.flat();     // [1, 2, 3, 4, 5, 6]

上面的定义了层嵌套的数组,认情况下只会拍平一层数组,也就是把原来的三维数组降低到了二维数组。在传入的参数为 2 时,则会降低两维,成为一维数组。

使用 Infinity,可展开任意深度的嵌套数组

var arr = [, , [, , [, , [, ]]]];
arr.flat();  // [1, 2, 3, 4, 5, 6, 7, 8]

在数组中有空项的时候,使用 flat() 会将中的空项进行移除。

var arr = [, , , , ];
arr.flat();      // [1, 2, 4, 5]

上面的中,数组中第三项是空值,在使用 flat 后会对空项进行移除。

使用 flat() 有个很好用的场景,就是深拷贝数组。我们知道 flat() 拍平后的数组不会影响源数组,那么是不是我们可以传入参数 0 让其不做扁平化操作呢?答案是可以的:

var arr1 = [, , [, , [, ]]];
var arr2 = arr1.flat();
arr2.push()
console.log(arr1)		// [1, 2, [3, 4, [5, 6]]]
console.log(arr2)		// [1, 2, [3, 4, [5, 6]], 100]

上面的中我们传入了 0 作为数组扁平化的深度,也就是不处理,然后给得到的 arr2 数组元素,最后打印两个数组,可以看到 arr1 没有 100,这样就达到了使用 flat() 来进行数值的深拷贝。

本节介绍了对多维数组拍平的 flat(),并且可以对数组中的空项进行移除,这个可以使用在处理数组空项的操作中非常有用。另外,在开发中了重要的数组深拷贝问题,不妨使用此达到事半功倍的。


联系我
置顶