我用reduce写了一个数组扁平化

我们一听到扁平化，肯定第一想到的就是flat这个内置api，而我们今天将用reduce这个函数来实现数组扁平化的功能

如果还有同学不了解reduce这个函数的可以去参考我的这篇文章;

javascript求最大值最小值的另一种写法reduce

以上这篇文章会讲述reduce的基本用法，不过还得你自己去多练习熟悉。

同学们也可以看我在npm和GitHub上发布的常见方法的封装

常见方法的封装npm

常见方法的封装GitHub

分析

扁平化其实就是将多层级的数组转为一级的数组；

• 我们只需要在遍历数组的时候去判断是否为数组
• 如果为数组的话就通过递归的方式将其展开

代码：

const arr = [2,[1,55,2,[52,[45]]]]

const flat = (arr) => {
    return arr.reduce((one, pro) => { return one.concat(Array.isArray(pro) ? flat(pro) : pro) }, []);
};

const size = flat(arr);
console.log(size);

结果：

[ 2, 1, 55, 2, 52, 45 ]

解析：

• one是初始值[]
• pro是数组中的第一个值
• 我们将pro进行判断，如果为数组的话就回调该函数，反之将值合并到返回值中

我们来打印一下结果，大家会更清晰一些

代码：

const arr = [2,[1,55,2,[52,[45]]]]

const flat = (arr) => {
    return arr.reduce((one, pro) => { 
        console.log(one + '我是one');
        console.log(pro + '我是pro');
        return one.concat(Array.isArray(pro) ? flat(pro) : pro) }, []);
};

const size = flat(arr);
console.log(size);

结果：

我是one // 这是空值 []
2我是pro
2我是one
1,55,2,52,45我是pro
我是one
1我是pro
1我是one
55我是pro
1,55我是one        
2我是pro
1,55,2我是one      
52,45我是pro       
我是one
52我是pro
52我是one
45我是pro
我是one
45我是pro
[ 2, 1, 55, 2, 52, 45 ]

以前的文章

• javascript求最大值最小值的另一种写法reduce

• 插件开发并发布到npm，最最简单有效的教程，你确定学不会？

• element-ui动态级联选择器回显问题，二十多行代码就可以搞定

• 小程序云开发，通过云函数进行云开发

• 原生js实现瀑布流效果

• uniapp中的请求接口封装

以上就是本章的全部内容了！

授人与鱼不如授人以鱼！！！