扁平化
一、 什么是数组扁平化?
数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层。
数组扁平化概念:数组扁平化是指将一个多维数组变为一维数组
// 多层嵌套
[1, 2, [3, 4]]
// 一层
[1, 2, 3, 4]
二、 实现数组扁平化
var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
console.log(arr.flat(Infinity))
// 注意:flat和flatMap方法为ES2019(ES10)方法,目前还未在所有浏览器完全兼容。
function flatten(arr) {
var arr_flat = arr.flat(Infinity);
return arr_flat
}
console.log(flatten(arr))
打印结果:
1. 递归实现
递归实现数组扁平化 递归的遍历每一项,若为数组则继续遍历,否则concat
var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten1(arr) {
var res = [];
arr.map(item => {
if(Array.isArray(item)) {
res = res.concat(flatten1(item));
} else {
res.push(item);
}
});
return res;
}
console.log(flatten1(arr))
打印结果:
2. reduce
reduce
:遍历数组每一项,若值为数组则递归遍历,否则concat
。
reduce
方法接受一个函数作为参数,这个函数作为一个累加器,从左到右遍历 (升序) 整个类型数组,最后将结果汇总为单个值返回。
reduce
方法还接受一个可选的参数initialValue
,作为第一次调用 callback
函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce
将报错。
reducer
函数接收4个参数:
- Accumulator (acc) (累计器)
- Current Value (cur) (当前值)
- Current Index (idx) (当前索引) 可选
- Source Array (src) (源数组) 可选
reducer
函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。
var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten4(arr) {
return arr.reduce((result, item)=> {
return result.concat(Array.isArray(item) ? flatten4(item) : item);
}, []);
}
console.log(flatten4(arr))
打印结果:
reduce
是数组的一种方法,它接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce
包含两个参数:回调函数,传给total的初始值
// 求数组的各项值相加的和:
arr.reduce((total, item)=> { // total为之前的计算结果,item为数组的各项值
return total + item;
}, 0);
3. 使用扩展运算符...
扩展运算符:es6的扩展运算符能将二维数组变为一维
some()
方法测试数组中的某些元素是否通过由提供的函数实现的测试,返回boolean
值。
注意:对于放在空数组上的任何条件,此方法返回false。
console.log([].concat(...[1, 2, 3, [4, 5]]))
打印结果:
我们用这种方法只可以扁平一层,但是顺着这个方法一直思考,我们可以写出这样的方法:
var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten5(arr) {
// 循环展开嵌套的数组,直到没有嵌套
while(arr.some(item=>Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
console.log(flatten5(arr))
打印结果:
4. 去重
数组去重要考虑的太多了,这里只简单的用Set返回一个不重复的值
function flatten(arr) {
// 循环展开嵌套的数组,直到没有嵌套
while(arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return Array.from(new Set(arr));;
}
flatten([1, 1, 2, [3, [3, 5, 6], 4]]); // [1, 2, 3, 5, 6, 4]
5. toString
& split
调用数组的toString
方法,将数组变为字符串然后再用split
分割还原为数组
var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten2(arr) {
return arr.toString().split(',').map(function(item) {
// 因为split分割后形成的数组的每一项值为字符串,
// 所以需要用一个map方法遍历数组将其每一项转换为数值型
return Number(item);
})
}
console.log(flatten2(arr))
打印结果:
6. join
& split
:
和上面的toString一样,join也可以将数组转换为字符串
var arr = [1, [2, 3, [4, 5,[6,7,8,[9,10]]]]]
function flatten3(arr) {
return arr.join(',').split(',').map(function(item) {
return parseInt(item);
})
}
console.log(flatten3(arr))
打印结果: