在 ES10 中引入了两个新的数组方法，分别是 Array.prototype.flat() 和 Array.prototype.flatMap()。这两个方法可以让我们更方便地进行数组的操作，本文将对它们进行详细介绍与实战演练。
1. Array.prototype.flat()
Array.prototype.flat() 可以将多维数组转化为一维数组。这个方法会递归地遍历数组，将所有的子数组的元素提取出来，放在一个新的数组中返回。
1.1 语法
arr.flat([depth]);
其中，depth 参数是可选的，表示递归的深度。如果不指定，则默认为 1。
1.2 示例
const arr = [1, 2, [3, 4, [5, 6]]]; const flatArr = arr.flat(); console.log(flatArr); // [1, 2, 3, 4, [5, 6]] const deepFlatArr = arr.flat(Infinity); console.log(deepFlatArr); // [1, 2, 3, 4, 5, 6]
在第一个示例中，arr 数组有三层嵌套，flat() 方法默认只递归一层，所以只将其中的一个子数组提取出来。在第二个示例中，我们指定了递归的深度为 Infinity，即不限制深度，所以将所有元素都提取出来了。
2. Array.prototype.flatMap()
Array.prototype.flatMap() 方法首先使用 map() 方法遍历原数组，然后对每个元素执行一个映射函数，并将映射函数返回的结果压缩为一个新数组。与 Array.prototype.map() 不同的是，flatMap() 方法会将返回的数组压缩至一层。这就使得我们可以在一个方法中进行映射和压缩的操作。同时，它也会自动忽略掉返回值是 undefined 的元素。
2.1 语法
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 参数是一个函数，用来处理每个元素。参数 currentValue 代表当前正在处理的元素，可选的参数 index 表示当前元素在数组中的索引，array 参数代表原数组。
thisArg 是可选的，表示执行 callback 函数时的 this 值。
2.2 示例
const arr = ["Hello, its me", "I was wondering", "if after all these years", "you'd like to meet"]; const flatMapArr = arr.flatMap(str => str.split(" ")); console.log(flatMapArr); // ["Hello,", "its", "me", "I", "was", "wondering", "if", "after", "all", "these", "years", "you'd", "like", "to", "meet"]
在这个示例中，我们将字符串数组中的每一个元素按照空格进行分割，并将它们压缩为一个新数组。
3. 总结
在使用 Array.prototype.flat() 方法进行数组处理时，要注意递归的深度。这样可以避免不必要的开销和错误。同时在使用 Array.prototype.flatMap() 方法时，要注意返回值不为 undefined 的元素才会被添加到新数组。
这两个方法的引入使得我们能够更方便地进行数组的操作，可以通过这两个方法减少代码量和代码复杂度。我们可以尝试在日常开发中应用这两个方法，提高开发效率，减少出错率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d31478b5eee0b525a9d419
