理解Underscore中的flatten函数
最近是在所在实习公司的第一个sprint,有个朋友又请假了,所以任务比较重,一直这么久都没怎么更新了,这个周末赖了个床,纠结了一会儿决定还是继续写这个系列,虽然比较乏味,但是学到的东西还是很多的。
之前主要是针对函数处理部分的API做解读,经过那些天的努力,基本已经解读完了,现在把重点移到数组上。对于数组处理API的解读,从这篇文章开始。
flatten是一个很基础的函数,在Underscore中也算是一个工具函数,为了方便以后的讲解,今天先阅读flatten函数的源码。
首先,我们带着问题来阅读源码,如果你参加面试,考官让你手写一个展开数组的函数,你会怎么写?
实现一个flatten函数
我们接受的参数应该是一个数组,我们可以使用一个叫array的变量表示它,它的返回值应该是一个数组,使用result表示:
function flatten(array) {
var result = [];
// ... 展开代码
return result
}
然后我们应该对传入的数组进行类型验证,如果不是数组,我们应该抛出一个类型异常:
function flatten(array) {
var result = [];
if(Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError('Please pass a array-type object as parameter to flatten function');
else {
// ... 展开代码
}
return result
}
这样就可以保证我们接收到的参数是一个数组,接下来我们应该遍历array参数,对于它的每一项,如果不是数组,我们就将其添加到result中,否则继续展开:
function flatten(array) {
var result = [];
if(Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError('Please pass a array-type object as parameter to flatten function');
else {
for(var i = 0; i < array.length; i++) {
if(Object.prototype.toString.call(array[i]) === '[object Array]') {
// ... 继续展开。
}
else {
result.push(array[i]);
}
}
}
return result
}
当数组中的项还是一个数组时,我们应当如何展开呢? 由于不确定到底是嵌套了多少层数组,所以最好是使用递归来展开,但是有新的问题,我们的flatten函数返回一个数组结果,但是我们如何把递归结果返回给我们的result呢,是使用concat方法还是怎样?
由于函数中对象类型的参数是引用传值,所以我们可以把result传递给flatten自身,使其直接修改result即可:
function flatten(array, result) {
var result = result || [];
if(Object.prototype.toString.call(array) !== '[object Array]')
throw new TypeError('Please pass a array-type object as parameter to flatten function');
else {
for(var i = 0; i < array.length; i++) {
if(Object.prototype.toString.call(array[i]) === '[object Array]') {
// ... 递归展开。
arguments.callee(array[i], result);
}
else {
result.push(array[i]);
}
}
}
return result
}
以上函数,就基本实现了flatten的功能,再美化一下:
var flatten = function(array, result) {
var result = result || [];
var length = array.length;
var toString = Object.prototype.toString;
var type = toString.call(array);
if(type !== '[object Array]')
throw new TypeError('The parameter you passed is not a array');
else {
for(var i = 0; i < length; i++) {
if(toString.call(array[i]) !== '[object Array]') {
result.push(array[i]);
}
else {
arguments.callee(array[i], result);
}
}
}
return result;
}
大家可以把上面这段代码拷贝到控制台进行实验。
Underscore中的flatten函数
通过我们自己亲手实现一个flatten函数,阅读Underscore源码就变得简单了。 下面是Underscore中flatten函数的源码(附注释):
var flatten = function (input, shallow, strict, output) {
output = output || [];
var idx = output.length;
//遍历input参数。
for (var i = 0, length = getLength(input); i < length; i++) {
var value = input[i];
if (isArrayLike(value) && (_.isArray(value) || _.isArguments(value))) {
// Flatten current level of array or arguments object.
//如果input数组的元素是数组或者类数组对象,根据是否shallow来展开,如果shallow为true,那么只展开一级。
if (shallow) {
var j = 0, len = value.length;
while (j < len) output[idx++] = value[j++];
} else {
//如果shallow为false,那么递归展开所有层级。
flatten(value, shallow, strict, output);
idx = output.length;
}
} else if (!strict) {
//如果value不是数组或类数组对象,并且strict为false。
//那么直接将value添加到输出数组,否则忽略value。
output[idx++] = value;
}
}
return output;
};
Underscore实现的flatten更加强大,它支持类数组对象而不仅仅是数组,并且它多了两个参数——shallow和strict。
当shallow为true时,flatten只会把输入数组的数组子项展开一级,如果shallow为false,那么会全部展开。
当strict为false时,只要是非数组对象,flatten都会直接添加到output数组中;如果strict为true,那么会无视input数组中的非类数组对象。
更多Underscore源码阅读:GitHub
理解Underscore中的flatten函数的更多相关文章
- 理解Underscore中的节流函数
上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续 ...
- 理解Underscore中的restArgs函数
虽然Underscore并没有在API手册中提及到restArgs函数,我们仍然可以通过_.restArgs接口使用restArgs函数.如果不去阅读源码,我们很难发现Underscore中还有这样的 ...
- 理解Underscore中的uniq函数
uniq函数,是Underscore中的一个数组去重函数,给它传递一个数组,它将会返回该数组的去重副本. 1 ES6版本去重 在ES6版本中,引入了一个新的数据结构——set,这是一种类似数组的数据结 ...
- 理解Underscore中的_.bind函数
最近一直忙于实习以及毕业设计的事情,所以上周阅读源码之后本周就一直没有进展.今天在写完开题报告之后又抽空看了一眼Underscore源码,发现上次没有看明白的一个函数忽然就豁然开朗了,于是赶紧写下了这 ...
- 简单理解ECMAScript2015中的箭头函数新特性
箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- 理解Underscore中的_.template函数
Underscore中提供了_.template函数实现模板引擎功能,它可以将JSON数据源中的数据对应的填充到提供的字符串中去,类似于服务端渲染的模板引擎.接下来看一下Underscore是如何实现 ...
- 理解javascript中的回调函数(callback)
以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs ...
- 再次理解js中的call函数
a.call(b); 网上说明的版本比较多.有的说,是指针替换.有说,将a对象的方法加在b对象执行.官方说:什么对象替换什么对象.反正看了几个版本,尽管有具体的实例,看了我三次都没看懂它的具体含义.看 ...
随机推荐
- SpringMVC的数据回现
一.什么是数据回显 数据提交后,如果出现错误,将刚才提交的数据回显到刚才的提交页面. 二.pojo数据回显方法 1.springmvc默认对pojo数据进行回显. pojo数据传入controller ...
- git忽略ssl认证
问题 在是用git克隆仓库的时候,报错如下: fatal: unable to access ‘https://github.com/........../‘: OpenSSL SSL_connect ...
- MySql下载
一般企业办的mysql下载不到 1.准备 注册一个orcle账号 2.跳转到http://www.mysql.com/ ,然后点击Downloads导航栏 滚动到最下面并点击[Community(GP ...
- linux 查看某几行内容与文件分割
查看指定行数 sed -n 4,8p file #打印file中的4-8行 sed -n 4p file #打印file中的第4行 grep ^pw file # 查看file中以pw开头的行 在Li ...
- 如何学习OpenStack
转自:http://www.chenshake.com/learn-how-openstack/ 如何学习OpenStack 由于工作的关系,也招收实习生,希望可以通过实习生的培养,让他们对Opens ...
- RPA流程自动化-UIPath简介
UiPath简介 转自: http://www.cnblogs.com/mxue/p/UiPath_To147_Road.html 最近RPA比较火,UiPath工具排名前几位并且免费试用,很多朋友们 ...
- 自动生成数据库字典(sql2008) 转自 飘渺の云海
每次做项目的时候都要做数据字典,这种重复的工作实在很是痛苦,于是广找资料,终于完成了自动生成数据库字典的工作,废话少说,上代码. 截取一部分图片: 存储过程: SET ANSI_NULLS ON GO ...
- react-native学习之环境安装
1.首先是java环境安装-安装JDK 2.安装Android-SDK,推荐以下地址:http://tools.android-studio.org/index.php/sdk 然后打开SDK Man ...
- Hive Join
最近被朋友问到有关于Hive Join的问题,保守回答过后,来补充补充知识: Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. 一.Hi ...
- python的爬虫
requests库的安装 https://blog.csdn.net/xiaokuang5020/article/details/80580631 Response对象属性 属性 说明 r.statu ...