ES6方法 flat flatMap

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]

在 CodeSendbox 中尝试

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 中尝试