使用JavaScript 实现 Array.flat()方法
2021/7/13 1:06:44
本文主要是介绍使用JavaScript 实现 Array.flat()方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Array.flat()介绍
flat()
方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。使用 Array.flat(depth)可以实现数组的扁平化
参数
depth
可选(指定要提取嵌套数组的结构深度,默认值为 1)
返回值
一个包含将数组与子数组中所有元素的新数组。(所有和原数组没有关系,不会影响到原数组)
下面看代码实现:
首先:不看depth,不考虑深度问题。
将实现方法加到 Array的原型上面,遍历数组,如果是数组类型就使用递归方法flat(),不是数组就push到 reArr中。遍历完成返回数组,返回的数组就是扁平化以后的数组。
Array.prototype.flatArr = flatArr function flatArr(){ let arr = this let reArr = [] const flat = (arr) => { arr.forEach((item) => { if(Object.prototype.toString.call(item).slice(8,-1) === 'Array') { flat(item) } else { reArr.push(item) } }) } flat(arr) return reArr } let arr = [1,2,[3,4],[10,[11,12]],[5,[6,[7,[8,[9]]]]]] // 不考虑深度的实现 console.log(arr.flatArr()) // [1, 2, 3, 4, 10, 11, 12, 5, 6, 7, 8, 9] // 原生方法 console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 10, 11, 12, 5, 6, 7, 8, 9]
现在,在加上扁平化的深度,需要加一个depNum参数,在遍历过程中,如果子项是数组的话就比较一下depNum的大小和传入的大小。如果更小就将depNum加1,然后可以继续递归,如果大了就直接把这个子项push到 reArr中。需要注意的是,当遍历完成一个子项后要把 depNum清 0
/** * 实现 Array.flat() 方法 * */ Array.prototype.flatArr = flatArr function flatArr(depth = 1){ let arr = this let reArr = [] let depNum = 0 const flat = (arr) => { arr.forEach((item,index,array) => { if(Object.prototype.toString.call(item).slice(8,-1) === 'Array') { if(depNum < depth) { depNum++ flat(item) } else { reArr.push(item) if(index === array.length -1) depNum = 0; } } else { reArr.push(item) if(index === array.length -1) depNum = 0; } }) } flat(arr) return reArr } let arr = [1,2,[3,4],[10,[11,12]],[5,[6,[7,[8,[9]]]]]] // let arr = [[1], [1,2,[2]], [3,4]] console.log(arr.flatArr(3)) // [1, 2, 3, 4, 10, 11, 12, 5, 6, 7, Array(2)] //原生方法 console.log(arr.flat(3)) // [1, 2, 3, 4, 10, 11, 12, 5, 6, 7, Array(2)]
这篇关于使用JavaScript 实现 Array.flat()方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-11cursor试用出现:Too many free trial accounts used on this machine 的解决方法
- 2025-01-11百万架构师第十四课:源码分析:Spring 源码分析:深入分析IOC那些鲜为人知的细节|JavaGuide
- 2025-01-11不得不了解的高效AI办公工具API
- 2025-01-102025 蛇年,J 人直播带货内容审核团队必备的办公软件有哪 6 款?
- 2025-01-10高效运营背后的支柱:文档管理优化指南
- 2025-01-10年末压力山大?试试优化你的文档管理
- 2025-01-10跨部门协作中的进度追踪重要性解析
- 2025-01-10总结 JavaScript 中的变体函数调用方式
- 2025-01-10HR团队如何通过数据驱动提升管理效率?6个策略
- 2025-01-10WBS实战指南:如何一步步构建高效项目管理框架?