<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数组的扁平化
// 扁平化二维数组
{
// 1. 直接使用自带的方法flat()会返回一个扁平化后的数组,并不会改变原数组
let arr = [1, 2, [3, 5], 6];
let arr1 = arr.flat();
console.log(arr1, arr);// [1, 2, 3, 5, 6] ,[1, 2, Array(2), 6]
// 也可以去除数组中的空字符
let arr2 = [1, 2, , 4, 5];
let arr3 = arr2.flat();
console.log(arr3);//[1, 2, 4, 5]
// 在flat(2)代表可以扁平化2维数组
console.log(arr.flat(2)); //[1, 2, 3, 5, 6]
}
{
// 2.二维数组使用ES6的reduce和concat方法 返回一个扁平化的数组
let arr = [1, 2, [3, 5], 6, [1]];
let arr1 = arr.reduce((acc, val) => acc.concat(val), []);
console.log(arr1); //[1, 2, 3, 5, 6, 1]
}
// 如何扁平化多维数组呢=================================
{
// 1.在flat(3)代表可以扁平化3维数组以此类推4,5,6...Infinity(可以扁平化所有多维数组)
let arr4 = [1, 2, [3, [4, [5]]]];
console.log(arr4.flat(3)); //[1, 2, 3, 4, 5]
console.log(arr4.flat(Infinity)); //[1, 2, 3, 4, 5]
// 2.reduce + concat + isArray + recursivity(递归)
let arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
function flatDeep(arr) {
// return arr.reduce((acc,val)=>acc.concat(Array.isArray(val)?flatDeep(val):val),[]);
return arr.reduce((acc, val) => {
acc.push(Array.isArray(val) ? flatDeep(val) : val)
return acc;
}, [])
};
console.log(flatDeep(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 3.扩展运算符来进行数组的扁平化
function flat() {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
console.log(flat(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 4.使用Generator
function* flatten(array) {
for (const item of array) {
if (Array.isArray(item)) {
yield* flatten(item);
} else {
yield item;
}
}
}
const flattened = [...flatten(arr)];
// [1, 2, 3, 4, 5, 6]
// 5.如何使用ES5的方法来扁平化数组呢
let flatDeep1 = (arr) => {
const arrFlat = [];//初始化缓存数组
// 开始递归
(function flat(arr) {
arr.forEach((item) => { //forEach可以自动跳过空字符
Array.isArray(item) ? flat(item) : arrFlat.push(item);//判断item是不是数组如果是就递归否则就push到缓存数组
})
})(arr)
// 返回递归结果
return arrFlat;
}
console.log(flatDeep1(arr));//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
</script>
</body>
</html>