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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
javascript基础的动画教程,直观易懂
Jan 10 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 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
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
js类型检查实现代码
2010/10/29 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python如何计算语句执行时间
2019/11/22 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
pycharm安装及如何导入numpy
2020/04/03 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
护理自荐信范文
2013/10/05 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
安全目标责任书
2014/07/22 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
个人先进事迹总结
2015/02/26 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫