JS数组扁平化（数组降维、数组拍平）

本文主要是介绍JS数组扁平化（数组降维、数组拍平），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

数组扁平化：将一个多维数组转换为一个一维数组

Array.prototype.flat()

该方法返回一个新的数组，对原数据没有影响
flat() 不传参数时，默认扁平化一层
flat(参数) 传入一个整数时，这个整数代码想要扁平化的层数
传入 <=0 的整数将不进行扁平化，返回原数组
如果原数组有空位，Array.prototype.flat() 会跳过空位

const test = [1, [2, 3],[4, [5, [6]], 7]
]console.log(test);
//(3) [1, Array(2), Array(3)]// flat不传参数时，默认扁平化一层
const c1 = test.flat();
//并不会影响原数组，将返回一个扁平化后的新数组
console.log(c1);
//(6) [1, 2, 3, 4, Array(2), 7]// flat传入一个整数参数，整数即扁平化的层数
const c2 = test.flat(2);
console.log(c2);
//(7) [1, 2, 3, 4, 5, Array(1), 7]// Infinity 关键字作为参数时，无论多少层嵌套，都会转为一维数组
c3 = test.flat(Infinity);
console.log(c3);
// [1, 2, 3, 4, 5, 6, 7]// 传入 <=0 的整数将返回原数组，不扁平化
test.flat(0)
test.flat(-1)// 如果原数组有空位，flat()方法会跳过空位。
const c4 = [1, 2, 3, 4, 5, , ].flat();
console.log(c4);
//(5) [1, 2, 3, 4, 5]

自主实现flat完全扁平化

function flat(arr) {var res = [];// 遍历数组里的元素for (let cur of arr) {// 判断是否为数组if (Array.isArray(cur)) {// concat连接数组res = res.concat(flat(cur))} else {// 将cur添加到返回数组的末尾res.push(cur)}}return res;
}console.log(flat(test));
//(7) [1, 2, 3, 4, 5, 6, 7]

lodash的baseFlatten

在lodash中和数组扁平化相关的方法有三个,实际实现上都是对baseFlatten()函数的包装。

flatten()是对数组进行一层扁平化处理
flattenDeep()是对数组完全扁平化处理
flattenDepth()是对数组进行指定层级的扁平化处理

baseFlatten()

源码
核心代码：

function baseFlatten(arr, depth, result){result || (result=[]);if(arr === null) return result;for(const val of arr){if(depth>0 && Array.isArray(val)){if(depth>1){baseFlatten(val, depth-1, result);}else{result.push(...val);}}else{result[result.length] = val;}}return result;
}

(注：js …的使用)

flatten(一层扁平化)

function flatten(arr) {// 获取数组的lengthconst length = arr == null ? 0 : arr.length// 当length大于0时，调用baseFlatten方法，扁平化层级为1return length ? baseFlatten(arr, 1) : []
}

flattenDeep(完全扁平化)

function flatten(arr) {// 获取数组的lengthconst length = arr == null ? 0 : arr.length// 当length大于0时，调用baseFlatten方法，扁平化层级为INFINITY无限大return length ? baseFlatten(arr, INFINITY) : []
}

flattenDepth(指定层级的扁平化)

function flattenDepth(arr, dep) {// 获取数组的lengthconst length = arr == null ? 0 : arr.length// length为0，直接返回空数组if (!length) {return []}// 判断dep，当dep为undefined时取1，否则通过一个加运算符操作转换为number类型dep = dep === undefined ? 1 : +dep// 调用baseFlatten方法，扁平化层级为depthreturn baseFlatten(array, depth)
}

使用reduce方法

实现flatteDeep()

function flattenDeep(arr) { return Array.isArray(arr)? arr.reduce( (acc, cur) =>[...acc, ...flattenDeep(cur)] , []): [arr]
}

flatten() 和 flattenDepth()实现方法类似flatteDeep()

实现flat

function flat(arr, depth = 1) {return depth > 0 ? arr.reduce((acc, cur) => {if(Array.isArray(cur)) {return [...acc, ...flat(cur, depth-1)]}return [...acc, cur]} , []): arr
}