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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
javascript屏蔽右键代码
May 15 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
javascript控制台详解
Jun 25 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python os.access()用法实例
2019/02/18 Python
python获取Linux发行版名称
2019/08/30 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
超市活动计划书
2014/04/24 职场文书
综合素质评价自我评价
2015/03/06 职场文书
起诉意见书范文
2015/05/19 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
SQL Server表分区删除详情
2021/10/16 SQL Server