flat、flatmap()、map()
三者都是数组的方法，用法和区别详见下文
flat(num)
flat 方法会按照一个指定的递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返参数为深度 是一个数字回参数为深度 是一个数字
js
代码解读
复制代码
const arr = [1, 2, [3, 4]]
arr.flat() // [1, 2, 3, 4]
const arr1 = [1, 2, [3, 4, [5, 6]]]
arr1.flat() // [1, 2, 3, 4, [5, 6]]
flat(),会默认递归遍历一层，将其展开，以一个新的数组返回。可以看到在没有传参的情况下，第二个例子并没有完全展开。
js
代码解读
复制代码
const arr2 = [1, 2, [3, 4, [5, 6]]]
arr2.flat(2) // [1, 2, 3, 4, 5, 6]
上面的例子中，数组中又存在 两层 的嵌套数组，故传递一个参数 2，即可将该数组展开
js
代码解读
复制代码
const arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr3.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
上面的例子中，数组中存在 四层 的嵌套数组，传递Infinity（表示无限），无论数组中嵌套了多少层，都可以将其展开为一维数组
js
代码解读
复制代码
const arr4 = [1, 2, , 4, 5];
console.log(arr4); // [1, 2, empty, 4, 5]
console.log(arr4.flat()); // [1, 2, 4, 5]
还有一点，flat方法会移除数组中的空项
flatMap(callback,thisArg)
js
代码解读
复制代码
let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
js
代码解读
复制代码
const arr1 = [1,2,3,4,5]
const result1 = arr1.map((i,index,arr)=>{
if(i>2) {
return i
}
})
console.log(result1); //[undefined, undefined, 3, 4, 5]
const result2 = arr1.flatMap((i,idnex,arr)=>{
return i>2?[i]:[]
})
console.log(result2); //[3, 4, 5]
上面的例子中可以看出 flatmap() 与 map()的区别：
不同点：1- flatmap较map少嵌套了一层 [] ,2- map是必须会映射一个与原数组长度一致的新数组，而flatmap不一定与原数组长度一致
相同点：两者都返回一个新数组，不影响原数组。且都需要return
转载来源：https://juejin.cn/post/7152346248451178503
