本篇文章给大家详细分析了 javascript 数组拍平的方法, 对此有兴趣的朋友跟着小编一起学习下吧
在开发过程中有得时候总是碰一些共性的问题, 比如将一个二维数组拍平成一维数组, 或者三维数组拍平成一维数组这些问题在遇到的时候总会重新思考, 不如将其提炼出来, 总结一下
下面笔者将为大家演示一下, 将一个多维数组拍平成一个一维数组的两种方法, 算是抛砖引玉, 大家有更好的方法可以在留言区发表
首先是第一种方法, 递归处理, 代码如下:
- var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
- [333, 4444]
- ];
- function product() {
- // 1 创建一个空数组,
- var newarr = [];
- ///2 并且返回一个函数, 函数参数为要拍平的数组
- return function flatten(arr) {
- // 3 循环数组, 判断每一项, 不为输的话将其塞入 newarr
- // 若为数组, 递归调用 faltten, 并将结果与 newarr 合并
- for (var t of arr) {
- if (!Array.isArray(t)) {
- newarr.push(t);
- } else {
- newarr.concat(flatten(t))
- }
- }
- return newarr
- }
- }
- var flatten = product();
- console.log(flatten(arr))
执行结果为:
上面这这种方法比较中规中矩, 代码详解见注释, 下面这种方法运用到了 javascript 语言的一些新特性, 代码如下:
- var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
- [333, 4444]
- ];
- function flatten(arr){
- return arr.reduce(function(pre,cur){
- if(!Array.isArray(cur)){
- return [...pre,cur];
- }else{
- return [...pre,...flatten(cur)]
- }
- },[])
- }
- console.log(flatten(arr))
上面代码中用了 ES6 的一个新特性扩展云算法 ...,[...abc,...fff] 其作用相当于 abc.concat(fff), 这种用法更加直观明了, 还有就是运用了 reduce 方法 reduce 是 javascript 语言中数组的一个方法
数组调用 recduce 方法时, 可以传递两个参数, 第一个参数为回调函数, 第二个参数为一个初始值回调函数中需要传递两个参数, 第一个参数为每次执行函数的返回值, 第二个参数为当前索引对应数组的值 reduce 的第二个参数是可以省略的, 省略的话, 回调函数第一次调用的参数为数组的第一项和第二项的值, 如果没有省略, 回调函数的第一个参数就是这个初始值上面的例子, reduce 的第二个参数设置了一个空数组
reduce 的文档地址: https://developer.mozilla.org/zh-CN/docs/web/JavaScript/Reference/Global_Objects/Array/Reduce
相比来说第一种比较好理解, 第二种的难点在于对 reduce 函数的运用和理解
来源: http://www.phperz.com/article/18/0224/362908.html