JavaScript Array Flatten 与递归使用介绍


Posted in Javascript onOctober 30, 2011

如何用 JavaScript 将 [1,2,3,[4,5, [6,7]], [[[8]]]] 这样一个 Array 变成 [1,2,3,4,5, 6,7,8] 呢?传说中的 Array Flatten。

处理这种问题,通常我们会需要递归,来让程序自己按照一种算法去循环。在某书说写着,“递归是一种强大的编程技术”,好吧,她不仅仅属于 JavaScript。递归可以很难,也可以比较简单(总得来说还是比较难)。处理上面这个问题,用递归来解决,应该是比较适合的。之前工友这样实现了,算是一个简单的递归使用实例吧:

flatten: function(ac){ 
var array = []; 
var group = this.arr; 
if(ac) group = ac; 
for (var i = 0; i < group.length; i++){ 
if(group[i] instanceof Array){ 
array = array.concat(this.flatten(group[i])); 
}else{ 
array = array.concat(group[i]); 
} 
} 
return array; 
}

在 if(group[i] instanceof Array) 的时候,调用函数自身,通过传参数的形式进行递归。只是在重构 Array.js 的时候,就觉得既然是框架,那么多抽象出来的东西不用,是不是太浪费了。所以,最好调用已经抽象出来的静态函数,而不是又重新一遍。这里有 for 循环,也就是说我们会需要有 each。结果呢?四个字,不好实现。因为我们始终要创建一个数组,最终 return 这个新的数组,得重新抽出来一个函数来调。这不就违背了初衷?

网上瞄了一下,最终盯在 prototype 上。他的实现方法是抽象出一个处理递归增量的函数,再利用这个函数来做递归。怎么说呢?想说,这就叫框架。下面是一个处理递归的函数:

function inject(memo, iterator, context) { 
this.each(function(value, index) { 
memo = iterator.call(context, memo, value, index); 
}); 
return memo; 
}

而这个 flatten 函数,最终的实现是这样的,这代码真漂亮:
function flatten() { 
return this.inject([], function(array, value) { 
if (Object.isArray(value)) 
return array.concat(value.flatten()); 
array.push(value); 
return array; 
}); 
}

当然,这里面还需要另外一个抽象出来的函数,来处理 for 循环,就是我们的 each 函数了。顺路在 flatten 中,带出这个 each 函数吧,学习了 jQuery 的做法,加入原生支持;当然,还可以处理纯对象,而不仅仅是数组:
each: function (callback, bind) { 
var isObject = arale.typeOf(this.obj) === 'object', 
i = 0, 
key; if (isObject) { 
var obj = this.obj; 
for (key in obj) { 
if (callback.call(bind, key, obj[key]) === false) { 
break; 
} 
} 
} else { 
var arr = this.obj; 
if (Array.prototype.forEach) { 
// 用户 return false; 的时候还会继续执行 
// 原生的很?澹?セ故巧崮? marked TODO; 
return [].forEach.call(arr, callback, bind); 
}; 
for (var value = arr[0], length = arr.length; i < length && callback.call(bind, i, value) !== false; value = arr[++i]) {}; 
} 
}

最近玩 Javascript 比较多。瞄了一下最近的文章,还有在团队内部博客上发的文章,全都是 JS的。?濉K坪跏且桓龊艽蟮母谋洹P枰?胶庖幌铝恕
Javascript 相关文章推荐
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
Javascript实现单例模式
Jan 24 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 #Javascript
js 弹出菜单/窗口效果
Oct 30 #Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 #Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 #Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 #Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 #Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 #Javascript
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
python实现报表自动化详解
2017/11/16 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
如何利用Python 进行边缘检测
2020/10/14 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
征婚广告词
2014/03/17 职场文书
四风问题查摆材料
2014/08/25 职场文书
工程部文员岗位职责
2015/02/04 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
讲座新闻稿
2015/07/18 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL
nginx配置之并发频次限制
2022/04/18 Servers
基于Python编写一个监控CPU的应用系统
2022/06/25 Python