在前端开发中，我们经常需要处理数组数据。但是，有时候数组中嵌套着其他数组，这就给我们的处理带来了很大的困难。ES9 新增了 Array.{flatMap, flat} 方法，可以很好地解决这个问题，让我们来一起学习一下吧！
什么是 Array.{flatMap, flat} 方法
ES9 新增了 Array.{flatMap, flat} 方法，用于操作数组。其中 flat 方法可以将嵌套的数组变成一维数组，而 flatMap 方法则可以把一维数组中的每个元素都按照一定规则进行处理，最终返回一个新的数组。
flat 方法的使用
flat 方法用于将嵌套的数组变成一维数组，简化数组操作。它的语法如下：
arr.flat([depth])
其中，depth 表示需要展开的层数，默认值为 1。如果我们想展开所有嵌套的数组，可以传入 Infinity。
下面是一个简单的例子：
const arr = [1, 2, [3, 4, [5, 6]]]; const flatArr = arr.flat(); console.log(flatArr); // [1, 2, 3, 4, [5, 6]] const flatAllArr = arr.flat(Infinity); console.log(flatAllArr); // [1, 2, 3, 4, 5, 6]
flatMap 方法的使用
flatMap 方法可以把一维数组中的每个元素都按照一定规则进行处理，最终返回一个新的数组。它的语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 表示处理函数，currentValue 表示当前元素，index 表示当前元素的索引，array 表示原始数组，thisArg 表示 callback 函数中 this 的值。
下面是一个简单的例子：
const arr = [1, 2, 3]; const flatMapArr = arr.flatMap((x) => [x * 2]); console.log(flatMapArr); // [2, 4, 6]
在这个例子中，我们把每个元素都乘以 2，并返回一个新的数组。
使用 Array.{flatMap, flat} 方法解决数组嵌套问题
在实际开发中，我们经常会遇到数组嵌套的问题。比如，我们有一个二维数组，每个元素是一个对象，我们需要把所有对象的属性值提取出来，放到一个新的数组中。如果不使用 flat 方法，我们需要使用循环嵌套的方式来实现：
-- -------------------- ---- -------
----- --- - -
- ----- ----- ---- -- --
- ----- ----- ---- -- --
- ----- ----- ---- -- --
--
----- ------ - ---
--- ---- - - -- - - ----------- ---- -
----- --- - -------
--- ---- --- -- ---- -
-- ------------------------- -
----------------------
-
-
-
-------------------- -- ------ --- ----- --- ----- ---使用 flat 方法，我们可以更加简洁地实现：
const arr = [
{ name: '张三', age: 20 },
{ name: '李四', age: 30 },
{ name: '王五', age: 40 },
];
const result = arr.flatMap((obj) => Object.values(obj));
console.log(result); // ['张三', 20, '李四', 30, '王五', 40]在这个例子中，我们使用 flatMap 方法，把每个对象的属性值提取出来，并返回一个新的数组。
总结
ES9 新增了 Array.{flatMap, flat} 方法，可以很好地解决数组嵌套问题，简化数组操作。在实际开发中，我们可以使用它们来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e52cd41886fbafa40e594a