js扁平化
JS扁平化分类:
1.对象扁平化(深度很深的对象,经过扁平化编程深度为 1 的对象)、
2.数组扁平化(降维过程,多维数组经过扁平化变成一维数组)。
首先让我们思考一个这样的题目;假如有一个数组 var arr = [1, [2, 3, [4]]] ,我们怎么能把arr变成[1, 2, 3, 4]呢?即让多维数组降维,转换为只有一层的数组;如果用过lodash的话,我们知道 flatten 和 flattenDeep 方法都可以实现.
数组的扁平化,是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。
1.正则
const flatten = arr => JSON.parse(`[${JSON.stringify(arr).replace(/\[|]/g,'')}]`);
正则表达式-菜鸟教程
ps:
- ``是模板字符串,ES2015新增的符号
- ${var}是变量的占位符,可以代替传统引号与+号的拼接
- 例如: var a = 1; console.log('一共有'+a+'个鸡蛋!')
那么现在你只要console.log(一共有${a}个鸡蛋!
)
一般的用法:
2.递归
//利用reduce实现
function flatten(arr) {
return arr.reduce(function (prev, next) {
return prev.concat(Array.isArray(next) ? flatten(next) : next)
}, [])
}
(递归)最简单直接的方法:
function flatten(arr) {
// 判断参数是否是数组,检测数组元素是否是整数或者数组
var result = [];
if (!Array.isArray(arr)) {
// 不是数组, 判断是否是整数
if (arr % 1 == 0) {
result.push(arr);
} else {
throw Error('The parameter contains NaN or contains not Integer!');
}
} else {
// 是数组,遍历
for (let i = 0; i < arr.length; i++) {
result = result.concat(flatten(arr[i]));
}
}
return result;
}
3.循环
递归确实存在性能消耗的问题,每次都要重新创建函数,如果不用递归是不是也可以实现呢?
扩展运算符,可以展开数组,每次扒开一层,通过循环可以实现数组扁平化。
//利用扩展运算符
function flatten(arr) {
var arr;
while (arr.some(v => Array.isArray(v))) {
arr = [].concat(...arr);
}
return arr;
}
4.flat、reduce、toString、[].concat(…arr)、generator、字符串过滤、undercore or lodash库
flat:
flat(depth) 方法会递归到指定深度将所有子数组连接,并返回一个新数组, depth指定嵌套数组中的结构深度,默认值为1,不管多少层则可以用Infinity关键字作为参数。
[1, 2, [3]].flat(1) // [1, 2, 3]
[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4]
[1, 2, [3, [4, [5]]]].flat(Infinity) // [1, 2, 3, 4, 5]
flat()有兼容性问题, 不建议使用.
reduce:
function flatten(arr) {
return arr.reduce((a, b) => {
// return Array.isArray(b) ? a.concat(flatten(b)) : a.concat(b);
return a.concat(Array.isArray(b) ? flatten(b) : b);
}, []);
};
// es6
const flatten = arr =>
arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
flatten([1,[2,3],4,[[5,6],7]]) // [1, 2, 3, 4, 5, 6, 7]
toString:
只适于数组的元素都是数字
function flatten(arr) {
return arr.toString().split(",").map(item => +item);
};
flatten([1,[2,3],4,[[5,6],7]]) // [1, 2, 3, 4, 5, 6, 7]
[].concat(…arr):
function flatten(arr) {
return !Array.isArray(arr) ? arr : [].concat.apply([], arr.map(flatten));
}
flatten([1,[2,3],4,[[5,6],7]]) // [1, 2, 3, 4, 5, 6, 7]
generator:
function* flatten(arr) {
if (!Array.isArray(arr)) yield arr;
else for (let el of arr) yield* flatten(el);
}
let flattened = [...flatten([1,[2,[3,[4]]]])]; // [1, 2, 3, 4]
字符串过滤:
将输入数组转换为字符串并删除所有括号([])并将输出解析为数组
const flatten = arr => JSON.parse(`[${JSON.stringify(arr).replace(/\[|]/g,'')}]`);
undercore or lodash 库:
使用undercore库或者lodash的中_.flatten函数,具体用法查阅API文档
_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];
参考:https://blog.csdn.net/u014465934/article/details/89020911