js数组flat方法
前端三脚猫 人气:0前言
flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
语法
var newArray = arr.flat([depth])
参数
depth 可选
指定要提取嵌套数组的深度,默认值为 1。
返回值
一个包含将数组与子数组中所有元素的新数组。(就是扁平化后的每一项重新组成的数组,所以不会改变原数组。)
使用示例
扁平化数组,不传递参数的时候默认为一层
let arr = [1,2,[3,[4,[5]]]] const reasut = arr.flat() console.log(reasut) // [1, 2, 3, [4,[5]]]
设置扁平化的深度
let arr = [1,2,[3,[4,[5]]]] const reasut2 = arr.flat(3) console.log(reasut2) // [1, 2, 3, 4, 5]
当传入Infinity时,相当于扁平化最深层次的数组
let arr = [1,2,[3,[4,[5]]]] const reasut3 = arr.flat(Infinity) console.log(reasut3) // [1, 2, 3, 4, 5]
当数组里面有空项的时候,会过滤掉空值
const arr2 = [1, , 2, [3]] const reasut4 = arr2.flat() console.log(reasut4) // [1, 2, 3]
方法实现
1、当只扁平化一层的时候
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8] function getFlatArr (list) { return list.reduce((pre, item) => { return pre.concat(item) }, []) } console.log(getFlatArr(arr5)) // [1,2,3,[4,5],6,[7],8]
上述代码使用reduce方法和concat方法组合,实现只展平一层数组的方法。还可以使用foreach和push方法如:
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8] function getFlatArr (list) { let result = [] list.forEach(element => { if (Array.isArray(element)) { result.push(...element) } else { result.push(element) } }) return result } console.log(getFlatArr(arr5)) // [1,2,3,[4,5],6,[7],8]
上述代码采用foreach方法对数组的每一项循环,并使用isArray方法判断是不是数组将当前项push进result中,最后返回result。
2、当数组展平的层数为最大层时
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8] function getFlatArr (list) { return list.reduce((pre, item) => pre.concat(Array.isArray(item)? getFlatArr(item): item), []) } console.log(getFlatArr(arr5)) // [1, 2, 3, 4, 5, 6, 7, 8]
上述代码使用数组的reduce方法和递归的形式实现,当reduce方法循环到数组的每一项时都去判断当前项是不是新的数组,是的话就使用递归去吧里面的每一项逐层剥离出来,最后进行合并,不是数组的话,就直接将当前项合并到数组中。还可以使用foreach方法+递归的方式进行实现,如:
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8] function getFlatArr (list) { const result = [] ;(function flat(list) { // forEach 自动去除数组空位 list.forEach(item => { // 判断是不是数组 if (Array.isArray(item)) { // 进行数组递归 flat(item) } else { result.push(item) } }) })(list) return result } console.log(getFlatArr(arr5)) // [1, 2, 3, 4, 5, 6, 7, 8]
上述代码创建一个新的数组,使用foreach方法循环原始数组的每一项,然后判断当前项是否是一个数组是的话就递归,不是的话就将当前项push进新创建的数组,最后返回创建的数组。还可以使用堆栈的概念来实现,如:
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8] function getFlatArr (list) { const arrList = JSON.parse(JSON.stringify(list)) const result = [] while (arrList.length) { // 弹出堆栈中的数据 let arr = arrList.shift() if (Array.isArray(arr)) arrList.unshift(...arr) else result.push(arr) } return result } console.log(getFlatArr(arr5)) // [1, 2, 3, 4, 5, 6, 7, 8]
上述代码使用堆栈概念存储数据,使用while语句进行循环弹出堆栈中的数据,弹出的数据如果不是数组类型的话就push进创建的新数组中,否则的话就将当前项解构后在一次存储进堆栈中,重复上述操作直到堆栈中的数据被清空,最后返回创建的数组。
3、数组扁平化使用参数控制扁平的深度
可以使用reduce方法和递归来实现如:
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8] function getFlatArr (list, deepNum = 1) { return deepNum > 0? list.reduce((pre, item) => { return pre.concat(Array.isArray(item)? getFlatArr(item, deepNum - 1): item) }, []): list.slice() } console.log(getFlatArr(arr5)) // [1,2,3,[4,5], 6,[7], 8] console.log(getFlatArr(arr5, 3)) // [1, 2, 3, 4, 5, 6, 7, 8]
上述代码使用reduce方法,将循环的当前项展开成一个数组,然后通过传入的deepNum参数来控制展开的深度,当deepNum小于1的时候就返回原数组的一个浅拷贝,否则就根据deepNum的大小来展开对应深度的数组。还可以使用foreach方法+递归的形式来实现,如:
const arr5 = [1,2,[3,[4,5]], [6,[7]], 8] function getFlatArr (list, deepNum = 1) { const result = [] ;(function flat(list, deepNum) { list.forEach(element => { // 判断当前元素是否为数组并控制递归的深度 if (Array.isArray(element) && deepNum > 0) flat(element, deepNum - 1) else result.push(element) }) })(list, deepNum) return result } console.log(getFlatArr(arr5)) // [1,2,3,[4,5], 6,[7], 8] console.log(getFlatArr(arr5, 3)) // [1, 2, 3, 4, 5, 6, 7, 8]
上述代码,首先创建一个新的数组result,然后使用自调用函数,传入原数组和深度大小,使用foreach进行循环,然后判断循环的当前项是否为数组,并且递归的深度的大小大于0,是的话就继续递归当前数组,深度减去1。否则的话就将当前元素push进新创建的数组result中,就是通过这样循环的方法,最后将原来数组中的每一项根据传入的深度大小都push进了一开始创建的新数组result中,最后返回数组result即可。
总结
加载全部内容