JavaScript 作为一门语言，发展迅速，变动也十分频繁。作为前端开发者，掌握新特性是我们必须学习的一项技能。在 ES2019 中，新增了两个数组函数：Array.flat() 和 Array.flatMap()。本文将详细介绍这两个新增函数的用法以及使用注意事项。
Array.flat()
Array.flat() 方法用于将嵌套的数组变成一维数组。我们经常会遇到嵌套数组的情况，使用 flat() 方法可以简单高效地将其展平。数组的深度默认为1，如果需要展开多层嵌套数组，可以传递一个数字参数来指定要展开的深度。
下面是 flat() 方法的语法和示例代码：
arr.flat([depth])
const arr1 = [1, 2, [3, 4]]; const arr2 = [1, 2, [3, 4, [5, 6]]]; console.log(arr1.flat()); // 输出：[1, 2, 3, 4] console.log(arr2.flat()); // 输出：[1, 2, 3, 4, [5, 6]] console.log(arr2.flat(2)); // 输出：[1, 2, 3, 4, 5, 6]
需要注意的是，如果嵌套数组中含有空位，flat() 方法会将其移除：
const arr3 = [1, 2, [3, 4, , 5]]; console.log(arr3.flat()); // 输出：[1, 2, 3, 4, 5]
Array.flatMap()
Array.flatMap() 方法首先执行映射函数，然后再将返回值展开到新数组中。相比较于 map() 和 flat() 方法的关系，flatMap() 方法便于一次性执行两个操作，并且性能更佳。
区别是 flatMap() 可以同时生成和展开嵌套数组。这对于我们需要生成嵌套数组的情况特别有用，比如展示列表时需要将多个子项放在一个标签内。
下面是 flatMap() 方法的语法和示例代码：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
const arr = [1, 2, 3, 4]; console.log(arr.map(x => [x * 2])); // 输出：[[2], [4], [6], [8]] console.log(arr.flatMap(x => [x * 2])); // 输出：[2, 4, 6, 8]
需要注意的是，flatMap() 方法会自动将返回值转换为一维数组并删除空位：
const arr2 = ["it's Sunny in", "", "California"];
console.log(arr2.map(x => x.split(" "))); // 输出：[["it's","Sunny","in"],[""],["California"]]
console.log(arr2.flatMap(x => x.split(" "))); // 输出：["it's","Sunny","in","","California"]总结
Array.flat() 和 Array.flatMap() 方法为我们操作嵌套数组提供了方便快捷的方式。一些常见场景，比如读取嵌套数组或者生成嵌套列表时能够大大减少我们的编写代码量，并且提供了更佳的性能表现。使用这两个新函数能够提高我们的工作效率以及代码整洁程度，具有很高的学习和实践价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646fde3b968c7c53b0e1346c