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 ready函数、css函数及text()使用示例
Sep 27 Javascript
jsonp原理及使用
Oct 28 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php实现ping
2006/10/09 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
python调用其他文件函数或类的示例
2019/07/16 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
学校志愿者活动总结
2014/06/27 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
合作合同协议书范本
2015/01/27 职场文书
综合实践活动报告
2015/02/05 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python