摘要：
DOCTYPEHtml˃文档//展平二维数组｛//1。直接使用内置方法flat（）将返回一个平坦的数组，而不改变原始数组letarr=[1，2，[3,5]，6]；letarr1=ar r.flat（）；安慰日志//[1,2,3,5,6]，[1,2，Array，6]//还可以从数组中删除空字符letarr2=[1，2，，4,5]；letarr3=arr2.flat（）；安慰日志；//[1,2,4,5]//flat表示二维阵列控制台。log可以展平//[1,2,3,5,6]}{//2.二维数组使用ES6的reduce和concat方法返回展平数组letarr=[1，2，[3,5]，6，[1]]；letarr1=arr.reduce；console.log；//[1,2,5,6,1]}//如何展平多维数组yletar4=[1，2]，[3，[4，[5]]]；安慰日志//[1,2,3,4,5]控制台。日志//[1,2,3,4,5]//2.reduce+concat+isArray+递归letarr=[1,2，[3,4，[5,6，[7,8，[9,10]]]；函数flatDeep｛//returnarr.reduce（（acc，val）=˃acc.concat（Array.isArray（val）？flatDeep:val）returnacc；｝，[])}; 安慰日志；//[1,2,3,4,5,6,7,8,9,10]//3.展开运算符以展平数组函数flat（）｛while｛arr=[].contat；｝returnarr；}安慰日志；//[1，2，3，4，5，6，7，8，9，10]//4.使用Generatorfunction*flat｛用于｛if｛yield*flat；｝否则｛yieldtitem；｝｝constflatted=[…flatten]；//[1,2,3,4,5,6]//5.如何使用ES5方法展平阵列？LetflatDep1==˃{constantFlat=[]；//初始化缓存数组。//开始递归（functionflat（arr）｛arr.forEach（（item）=˃｛//forEach可以自动跳过空字符Array.isArray（item？
<!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>