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 10件让人费解的事情
Feb 15 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
js读取本地文件的实例
Dec 22 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP 中执行系统外部命令
2006/10/09 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
向领导表决心的话
2014/03/11 职场文书
双创工作实施方案
2014/03/26 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
党员承诺书范文2015
2015/04/27 职场文书
花木兰观后感
2015/06/10 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android