上海民政网站相关建设情况品牌形象设计公司
什么是扁平化
定义 : 扁平化就是将多维数组变成一维数组,不存在数组的嵌套
实现扁平化的方法 封装 flatten
1. ES6 flat
flat(depth) 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
参数:
depth(可选) 指定要提取嵌套数组的结构深度,默认值为 1
返回值:
返回一个新数组,包含数组与提取嵌套数组的所有元素的新数组
使用 Infinity，可展开任意深度的嵌套数组
封装思路: 使用 es6 自带 API 处理
const arr = [1, [2, [3, [4, 5]]], 6]
function flatten(params) {
return params.flat(Infinity)}
console.log(flatten(arr)); // 输出: [1,2,3,4,5,6]直接使用自带的方法可以很快的实现, 但是面试官当然不希望就看到这些呀 !
2. toString
如果数组的项全为数字，可以使用join()，toString()可以利用数组toString() 转为字符串
function flatten(arr) {return arr.toString().split(',').map(item =>parseFloat(item))}
console.log(flatten(arr)); // 输出:[ 1, 2, 3, 4, 5, 6 ]
3. 使用正则替换
看到嵌套的数组,如果在字符串的角度上看就是多了很多[ 和],如果把它们替换就可以实现简单的扁平化
function flatten (arr) {console.log('JSON.stringify(arr)', typeof JSON.stringify(arr))let str= JSON.stringify(arr).replace(/(\[|\])/g, '');
str = '[' + str + ']'; arr = JSON.parse(str); return arr} console.log(flatten(arr))4. 循环递归
4.1 循环 + concat + push
当只有一层嵌套数组使用push的方式扁平化
[1, [2, 3,4,5,6]]
let result = []; for (let i = 0; i < arr2.length; i++) {
result = result.concat((arr2[i])); }
console.log(result); [ 1, 2, 3, 4, 5, 6 ]
如果有多层嵌套的数组就需要使用 递归的思想 :
思路
- 循环判断数组的每一项是否是数组: Array.isArray(arr[i])
- 是数组就递归调用上面的扁平化一层的代码 result = result.concat(flatten(arr[i]));
- 不是数组,直接通过push添加到返回值数组
function flatten(arr) {let result = [];for (let i = 0; i < arr.length; i++) {if (Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]));} else { result.push(arr[i]) } }return result
} console.log(flatten(arr));
或者使用forEach 立即执行函数// 递归版本的反嵌套
function flatten(array) {
var flattend = []; (function flat(array) { array.forEach(function(el) {if (Array.isArray(el)) flat(el); else flattend.push(el);
});
})(array); return flattend; }当然循环可以更改成forEach循环,for of ...等其他循环,简单的循环递归就能够一样的解决啦~
4.2 增加参数控制扁平化深度
这个可以理解为手写flat()方法啦~
// forEach 遍历数组会自动跳过空元素const eachFlat = (arr = [], depth = 1) => {const result = []; // 缓存递归结果 // 开始递归(function flat(arr, depth) {// forEach 会自动去除数组空位
arr.forEach((item) => {// 控制递归深度 if (Array.isArray(item) && depth > 0) { // 递归数组 flat(item, depth - 1) } else { // 缓存元素 result.push(item) } }) })(arr, depth) // 返回递归结果 return result; } // for of 循环不能去除数组空位，需要手动去除 const forFlat = (arr = [], depth = 1) => { const result = []; (function flat(arr, depth) { for (let item of arr) { if (Array.isArray(item) && depth > 0) { flat(item, depth - 1) } else { // 去除空元素，添加非 undefined 元素 item !== void 0 && result.push(item); } } })(arr, depth) return result; }
4.3 使用 Generator 函数
GeneratorFunction是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。
它不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。
整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用 yield 语句注明。Generator 函数的执行方法如下。
构造器生成新的生成器函数
function* flatten(array) {for (const item of array) {
if (Array.isArray(item)) {yield* flatten(item);} else { yield item; } } }5.while 循环+ some方法
some :方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
思路
通过some来判断数组中是否用数组,通过while不断循环执行判断, 如果是数组的话可以使用 拓展运算符... ... 每次只能展开最外层的数组,加上contact来减少嵌套层数,
function flatten(arr) {while (arr.some(item=> Array.isArray(item))) {console.log(...arr) arr = [].concat(...arr)console.log(arr)}
return arr}console.log(flatten(arr));