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 相关文章推荐
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
js性能优化技巧
Nov 29 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 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验证码
2015/05/04 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
python 运算符 供重载参考
2009/06/11 Python
Python写的一个简单DNS服务器实例
2014/06/04 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Pygame框架实现飞机大战
2020/08/07 Python
python 实现性别识别
2020/11/21 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
专升本自我鉴定
2013/10/10 职场文书
翻译专业应届生求职信
2013/11/23 职场文书
2014最新离职证明范本
2014/09/12 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
推广普通话主题班会
2015/08/17 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
vue+springboot实现登录验证码
2021/05/27 Vue.js