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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
vue实现购物车选择功能
Jan 10 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
关于图片按比例自适应缩放的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
一个PHP日历程序
2006/12/06 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
基于header的一些常用指令详解
2013/06/06 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
python实现socket端口重定向示例
2014/02/10 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python dict如何定义
2020/09/02 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
文秘求职信范文
2014/04/10 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
未婚证明范本
2015/06/15 职场文书
导游词之天津盘山
2019/11/01 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript