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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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分页示例分享
2014/04/30 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
Python中的多重装饰器
2015/04/11 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python实现随机梯度下降法
2020/03/24 Python
python字符串Intern机制详解
2019/07/01 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
深入了解Python enumerate和zip
2020/07/16 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
求职自荐信范文格式
2013/11/29 职场文书
手机银行营销方案
2014/03/14 职场文书
爱心捐助倡议书
2014/05/19 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
给医院的感谢信
2015/01/21 职场文书
特岗教师个人总结
2015/02/10 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers