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