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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
swiper实现导航滚动效果
Dec 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
php在线生成ico文件的代码
2007/10/09 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
pandas数据处理进阶详解
2019/10/11 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
python通过cython加密代码
2020/12/11 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
实习自荐信
2013/10/13 职场文书
煤矿班组长的职责
2013/12/25 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
美术国培研修感言
2014/02/12 职场文书
驾驶员培训方案
2014/05/01 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
工会工作个人总结
2015/03/03 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
golang 实现并发求和
2021/05/08 Golang
Python 阶乘详解
2021/10/05 Python
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python