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 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
微信小程序实现同时上传多张图片
Feb 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
用PHP生成静态HTML速度快类库
2007/03/18 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
表单内同名元素的控制
2006/11/22 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
vue axios 二次封装的示例代码
2017/12/08 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python使用htmllib分析网页内容的方法
2015/05/08 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
时尚休闲吧创业计划书
2014/01/25 职场文书
婚礼司仪主持词
2014/03/14 职场文书
学校创先争优活动总结
2014/08/28 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL