在前端编程中，经常需要处理数组的多维结构。在 ES10 中，新增了一个数组方法 flat()，可以帮助我们快速地将多层嵌套的数组结构展开成一维数组。这个方法是使用递归的形式实现的，非常方便实用。
flat() 方法的基本用法
以数组 [1,2,[3,4,[5,6]]] 为例，我们可以使用 flat() 方法将其展开：
const arr = [1,2,[3,4,[5,6]]]; const flatArr = arr.flat(); console.log(flatArr) // [1, 2, 3, 4, 5, 6]
从上面的例子可以看到，flat() 方法会遍历数组中的每一个元素，如果这个元素是数组，则将其展开后插入原数组中。展开的深度可以通过传递参数控制。
相关参数
- depth（可选），默认值为 1，表示展开的深度。
- 如果想展开全部，可以传递 Infinity。
const arr = [1,2,[3,4,[5,6]]]; const flatArr = arr.flat(2); console.log(flatArr) // [1, 2, 3, 4, 5, 6] const deepArr = [1,2,[3,4,[5,6]]]; const allFlatArr = deepArr.flat(Infinity); console.log(flatArr) // [1, 2, 3, 4, 5, 6]
flat() 方法的高级用法
除了展开一维数组之外，flat() 方法还可以进行去除空位操作和移除特定元素操作。
删除空位
当数组中含有空位时，我们使用 flat() 方法可以方便地将其删除：
const arrWithEmpty = [1,2,[3,4,,6]]; const arrWithoutEmpty = arrWithEmpty.flat(); console.log(arrWithoutEmpty); // [1, 2, 3, 4, 6]
移除特定元素
如果我们需要将数组中的某个特定元素移除，也可以使用 flat() 方法：
const arr = [1,2,[3,4,[5,6]]]; const removeArr = arr.flat().filter(item => item !== 3); console.log(removeArr); // [1, 2, 4, 5, 6]
代码示例
下面是一个数组扁平化的实际使用场景：
-- -------------------- ---- ------- ----- --- - ------------------ ----- ------- - ----------- -------------------- -- --- -- -- -- -- -- ----- ------------ - --------------- ----- --------------- - -------------------- ----------------------------- -- --- -- -- -- -- ----- --------- - ---------------------- -- ---- --- --- ----------------------- -- --- -- -- -- --
这个示例中首先使用 flat() 方法将嵌套的数组展开成一维数组，然后演示了如何删除数组中的空位以及移除特定元素。
总结
ES10 中新增的数组方法 flat() 进一步提高了数组的操作效率。通过递归展开多层嵌套的数组结构，可以使代码更加简洁明了。同时，这个方法还可以配合其他数组方法使用，实现更为复杂的操作。掌握 flat() 方法的用法，可以提升前端开发的效率，减少代码维护的难度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497fc0548841e9894509c39