一道优雅面试题分析js中fn()和return fn()的区别


Posted in Javascript onJuly 05, 2016

在js中,经常会遇到在函数里调用其它函数的情况,这时候会有 fn() 这种调用方式,还有一种是 return fn() 这种调用方式,一些初学者经常会被这两种方式给绕晕了。这里用一个优雅的面试题来分析一下两种方式的不同之处。 

var i = 0;
function fn(){
 i++;
 if(i < 10){
 fn();
 }else{
 return i;
 }
}

var result = fn();
console.log(result);

这是一道隐藏了坑的面试题,看似很简单,大部分人可能想都不想就答出了10。而实际上运行可知打印出来的是 undefined。这道陷阱题很直观的体现出了前面所说的问题,当我们将执行fn的那一行修改为: 

var i = 0;
function fn(){
 i++;
 if(i < 10){
 return fn();
 }else{
 return i;
 }
}

var result = fn();
console.log(result);

这时,会发现打印出来的结果终于不负众望的是 10 了。

为什么这里加不加return区别会这么大? 

这里的主要原因很简单,JavaScript的函数都是有默认返回值的,如果函数结尾不写return,会默认返回undefined,这就是为什么在chrome的console控制台里,写代码经常下面会出现一行undefined的原因。 

再仔细看看这个例子,当i自增到9的时候,也就是倒数第二次递归调用fn的那一次,如果没有return,这一次执行完fn,会默认return undefined,而不会继续下一次递归了。当加上了 return,在这里则会继续最后一次递归,即i=10的时候,跳入else里面返回得到正确的10。 

说到这里,可以引申出一个更为经典的例子,著名的二分查找法: 

var mid = Math.floor((arr.length - 1) / 2);

function search(n, mid) {
 if (n > arr[mid]) {
 mid = Math.floor((mid + arr.length) / 2);
 return search(n, mid);
 } else if (n < arr[mid]) {
 mid = Math.floor((mid - 1) / 2);
 return search(n, mid);
 } else {
 return mid;
 }
}

var index = search(n, mid);
console.log(index);

二分查找法也是需要多次递归调用,很多新手在第一次实现这个算法的时候经常会犯的一个错误就是忘记在递归的函数前加上return,最后导致返回结果是undefined,这里的道理也和前面是类似的,不加return,会导致递归后,直接返回undefined,不会继续下一次递归。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 创建运动框架的实现代码
May 08 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 #Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 #Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 #Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 #Javascript
Node.js实现文件上传
Jul 05 #Javascript
JavaScript数组方法大全(推荐)
Jul 05 #Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 #Javascript
You might like
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
Stop SQL Server
2007/06/21 Javascript
select组合框option的捕捉实例代码
2008/09/30 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
学习python (2)
2006/10/31 Python
python实现360皮肤按钮控件示例
2014/02/21 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python callable内置函数原理解析
2020/03/05 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python 制作简单的音乐播放器
2020/11/25 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
一封普通求职者的求职信
2013/11/20 职场文书
前台接待的工作职责
2013/11/21 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
车辆年审委托书范本
2014/09/18 职场文书