flat
为了更好的渲染界面,我们会将数据整合成拥有一定层级的格式
const arr = [1, 2, [3, 4, 5, [6, 7, ["hello world"], 8], 9, 10]];
有些场景我们需要将数组平铺使用
console.log(arr.flat()); // [1, 2, 3, 4, 5, Array(4), 9, 10]
Array.flat()
方法就是先了将数组扁平化处理
这里我们仔细观察打印结果,我们发现此次处理,flat只平铺了第一层多维数组,更深层的数组并没有处理到
为了实现将多维数组扁平化,Array.flat()
可以输入不同的参数,得到不同的效果
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6, 7, Array(1), 8, 9, 10]
传入不同的参数可以平铺不同深度的二维数组
而树形结构是很复杂的,很多个分叉,各个深浅不一,在这种情况下我们要实现完全平铺可以使用Infinity
关键字
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, "hello world", 8, 9, 10]
这时不管数组有多少层级,都可以完全平铺
- 另外对于一维数组来说,
Array.flat()
方法可以用来清除数组中的空值
const arr2 = [1, , , 2];
console.log(arr2.flat()); // [1, 2]
flatMap
在实际开发中,我们的数据来自不同的地方,有些数组数据来自一些对象中,由于数据库或其他种种原因无法开启新的接口,这就需要我们前端攻城狮自己处理数据,Array.flatMap()
可以帮助我们在一些场景中整合数据
const arr = [
{
name: "北京",
area: ["海淀区","朝阳区","昌平区"],
},
{
name: "天津",
area: ["河东区","河西区","河北区"],
},
];
这是我们经常在获取地址数据时会得到的数据格式.
而在一些筛选框中,不同的筛选框筛选不同的数据,这时就需要我们将不同级别的地区数据整合在一起放到下拉框的options
中
这时我们使用Array.flatMap()
就可以按照属性获取新的数组
const newArr = arr.flatMap((item) => {
return item.area;
});
console.log(newArr); // ["海淀区", "朝阳区", "昌平区", "河东区", "河西区", "河北区"]
但是Array.flatMap()
方法会一股脑的将遍历到的所有area
属性中的内容都放到新数组中
const arr2 = [
{
name: "北京",
area: ["海淀区", "朝阳区", "昌平区"]
},
{
name: "天津",
area: ["河东区", "河西区", "河北区"]
},
{
name: "上海",
area: () => {
console.log("ShangHai");
}
}
];
const newArr2 = arr2.flatMap((item) => {
return item.area;
});
console.log(newArr2); // ["海淀区", "朝阳区", "昌平区", "河东区", "河西区", "河北区", ƒ area()]
这时就无法区别数组元素类型,需要我们自己另外编写逻辑处理这个问题
在 CodeSendbox 中尝试